You are here : : Home > Free Resources > CSS Tutorials > CSS Backgrounds |
Free Web Design Resources
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
background:(Color) (Image) (Repeat) (Attachment) (Position) ;
Color
Image
Repeat
Attachment
Position To specify background color of an element in RGB, Hex Color code or simply color names
To specify URL of the Image for background of an element.
To repeat the image the image in X or Y axis. (By default it is repeated in both axis.)
To specify whether a background image is fixed or scrolls with the rest of the page
To specify a starting position of the background image.
Create an empty <div> </div> inside your <body></body> tags. We'll then apply background to it and manipulate it using the stylesheet. Here's the code for the body tags.
1 2 3 4 5 6 7
<body><div id=</body>example> </div>
Lets start by declaring width and height for the <div id=example
>and then we'll apply Background Property.
To apply background property to this <div> </div> element we'll have to give it an id. Give it an id like this <div id=example
>.
1 2 3 4 5 6 7 8 9 10 11 12 13
<head> <style type=text/css> #example{width:750px; height:auto; background:url("images/red-vine.png") no-repeat; }</style> </head>
Here are some examples how you can manipulate the background image.
1 2 3 4 5
#example1{width:750px; height:auto; background:url("images/red-vine.png");}
1 2 3 4 5
#example2{width:750px; height:auto; background:url("images/red-vine.png") no-repeat;}
1 2 3 4 5
#example3{width:750px; height:auto; background:url("images/red-vine.png") no-repeat right;}
1 2 3 4 5
#example4{width:750px; height:auto; background:#99DC30 url("images/red-vine.png") no-repeat right;}
Example 5
Example 5
Example 5
Example 5
Example 5
Example 5
Example 5
1 2 3 4 5
#example5{width:750px; height:auto; background:url("images/red-vine.png") no-repeat scroll right;}
Now let see how I made the example at the top with image scrolling background.
Because of compatibility issues with some of the browsers will use <div id=textbox
> to display this textarea.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
The background Image scrolls with the text.
We'll have to create a <div id=textbox
> inside another <div id=example
>
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 20 21 22
<body> <div id=example><div id=</div> <!-- #example ends here --> </body>textbox><p>The background Image scrolls with the text.</p> <p>The background Image scrolls with the text.</p> <p>The background Image scrolls with the text.</p> <p>The background Image scrolls with the text.</p> <p>The background Image scrolls with the text.</p> <p>The background Image scrolls with the text.</p> <p>The background Image scrolls with the text.</p> <p>The background Image scrolls with the text.</p> <p>The background Image scrolls with the text.</p> <p>The background Image scrolls with the text.</p></div> <!-- #textbox ends here -->
Now we'll specify css style for both the div.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
<head> <style type=text/css> #example{border:3px solid #000; width:70%; height:300px; margin:auto; overflow:scroll; overflow-x:hidden; }#textbox{ padding:12px; background:#fff url("images/green-vine.png") scroll ; } </style> </head>
example> tag.
example> in the center.
example> behave like a textarea.
No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.