CoderTools Web site

CSS background-attachment

Description


Use the background-attachment property to fix or scroll a background image of an html element.

If the value is fixed then when or if the element is scrolled the background image will stay fixed in place. If the value is scroll then the image will scroll with the element.

This is typically used on the body tag when the html page has a background image.
    
        background-attachment: fixed; 
        or
        background-attachment: scroll;
        or
        background-attachment: inherit;
        or
        background-attachment: local    /* CSS 3 */
        
See also: background-color, background-position, background-attachment, background-repeat
HTML & CSS Editor with FTP / FTPS

Examples for css background-image

This is the image we will be using as our background:   

Example 1:

This example shows a fixed background image. When the user scrolls the background stays fixed. This is achieved by using the background-attachment: fixed; value.

test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test
test test test test test test test test test
test test test test test test test test test
test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test
    <style>
        #test { 
            background-image: url(./images/grad.gif); 
            background-attachment: fixed; 
            
            /* 
              the three following items below do the following: 
                a) fix the width and height of the containing div
                   to be smaller than the width and height of the content.
                b) we set the overflow style so that when the content is
                   bigger than the containing element scroll bars appear
                   to allow users to scroll the element contents. 
            */
            height:200px; 
            width:300px; 
            overflow:scroll; }    
    </style>

    <div id="test">
       test test test test test test test test test test test <br/>
       test test test test test test test test test test test <br/>
       test test test test test test test test test test test <br/>
       test test test test test test test test test test test <br/>
       <div style="border:3px solid white; margin:20px; width:80%">
       test test test test test test test test test <br/>
       test test test test test test test test test <br/>
       test test test test test test test test test <br/>
       test test test test test test test test test <br/>
       </div>
       test test test test test test test test test test test <br/>
       test test test test test test test test test test test <br/>
       test test test test test test test test test test test <br/>
       test test test test test test test test test test test <br/>

       
    </div>Give it a go!
Example 2:

This example shows a scrolling background image. When the user scrolls the element contents the background scrolls too. This is achieved by using the background-attachment: scroll; value.

test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test
test test test test test test test test test
test test test test test test test test test
test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test
    <style>
        #test2 { 
            background-image: url(./images/grad.gif); 
            background-attachment: scroll; 
            
            /* 
              the three following items below do the following: 
                a) fix the width and height of the containing div
                   to be smaller than the width and height of the content.
                b) we set the overflow style so that when the content is
                   bigger than the containing element scroll bars appear
                   to allow users to scroll the element contents. 
            */
            height:200px; 
            width:300px; 
            overflow:scroll; }    
    </style>

    <div id="test2">
       test test test test test test test test test test test <br/>
       test test test test test test test test test test test <br/>
       test test test test test test test test test test test <br/>
       test test test test test test test test test test test <br/>
       <div style="border:3px solid white; margin:20px; width:80%">
       test test test test test test test test test <br/>
       test test test test test test test test test <br/>
       test test test test test test test test test <br/>
       test test test test test test test test test <br/>
       </div>
       test test test test test test test test test test test <br/>
       test test test test test test test test test test test <br/>
       test test test test test test test test test test test <br/>
       test test test test test test test test test test test <br/>

       
    </div>Give it a go!

Values for <background>


Name Values Description
background-image url(URL) e.g. url(images/image1.jpg)
none
Specifies an image to display in the background of the element
background-color red
#ff0000
rgb(100%,0%,0%)
transparent
Set the background color of the element.
background-repeat repeat
repeat-x
repeat-y
no-repeat
Specifies the repeat style of the background image. repeat-x causes tiling to the left and the right, repeat-y causes tiling up and down
background-attachment scroll
fixed
Specifies if background image scrolls or is fixed when the page is scrolled
background-position

(note two values one for x and one for y
For y
   %|px|top|center|bottom
For x:
   %|px|left|center|right

e.g. top left
e.g. 50% right
e.g. 50% 20px
Specifies the position of the background image. Or if tiling then indicates the origin of the tiling


TotalEdit Now Completely Free

CoderTools TotalEdit - The Free Text Editor

A powerful editor and notepad replacement TotalEdit makes it easier to complete your file editing and software development tasks. TotalEdit is FREE for commercial and non-commercial purposes (its freeware).

6/23/2017 11:36:29 AM
Terms Of Use | Privacy Statement | Copyright 2006-2015 © Independence Software LLP