Background Attachment Images
Background Attachment Images
Chapter - 15 : Background Color and Images (Background Attachment Images): (Page 3/3)
(Cotinued from previous page)
15.3- Background Attachment: In above cases the background image is fixed and as you go down the page, the images will move upward and may not be visible. This definition will scroll the image with the rest of the page.
body {background-image:url('images/logo.jpg');
background-repeat:no-repeat;}
With this command you will get an output screen as shown in Fig- 15.3 and as you scroll down the image will go up as shown in Fig- 15.6
To make the image fixed a place, add the line attachment. body {background-image:url('images/logo.jpg');
background-repeat:no-repeat;
background-attachment:fixed;}
Now scroll the screen and you will find your image at fixed place and always visible (Fig- 15.7)
15.4- Background Position: You can also define the position of the image to be displayed.
body {background-image:url('images/logo.gif');
background-repeat:no-repeat;
background-position:left top;}
All these commands can be written in one line also e.g.
body {background:yellow url('images/logo.gif') no-repeat left top;}
NOTE:It is not necessary that all the styles are preset and you can use any combination. But remember, if more than one style is present, then the sequence should be
background-color
background-image
background-repeat
background-attachment
background-position
This will fill the background with 'cyan' color.
© funandhobby.com (Background Attachment Images)