CSS Backgrounds Tutorial

Syntax, Tips, Design Ideas & Code

The background Image scrolls with the text.

CSS background properties are used to define the background effects of an element. Look at the examle above. The background with is made by using a small 265 X 107 pixel image.

This property is supported by all major browsers like IE, Firefox, Opera, Chrome and Safari.

Background Syntax

background:(Color) (Image) (Repeat) (Attachment) (Position) ;

background:#FFFFFF url('images/green-vine.png') no-repeat fixed right;

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.

Code For <body></body> tag

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.

<body>
<div id=example>

</div>
 
</body>

Code For <head></head> tag

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>.

<head>

<style type=text/css>

#example{width:750px;
height:auto;
background:url("images/red-vine.png") no-repeat;
}

</style>

</head>

! Line 8background:url("images/red-vine.png") no-repeat;
This code will work as long as the properties are in order.(see the Backgrond Syntax for Order)

Here only Image URL and background repeat properties are defined other values are not defined.

Here are some examples how you can manipulate the background image.

Example 1

#example1{width:750px;
height:auto;
background:url("images/red-vine.png");
 }

A Red Colored Vine Design is used as the background image for this div.
The image is positioned behind the text.
The image gets repeated by default in both horizontal and vertical direction .
It is now difficult to read the text (Example 1) .

Example 2

#example2{width:750px;
height:auto;
background:url("images/red-vine.png") no-repeat;
 }

Background repeat is turned off here. Only a single instance of the image is visible now. It is still difficult to read the text (Example 2).

Example 3

#example3{width:750px;
height:auto;
background:url("images/red-vine.png") no-repeat right;
 }

Background repeat is turned off here and position has been set to right.The image moves to the right. Now you can read the text clearly.

Example 4

#example4{width:750px;
height:auto;
background:#99DC30 url("images/red-vine.png") no-repeat right;
 }

Green(#99DC30) color has been applied to the the background here.

Example 5

#example5{width:750px;
height:auto;
background:url("images/red-vine.png") no-repeat scroll right;
 }

Background image Scrolling is applied here in this code. Move the scroll bar down to see the effect.

Now let see how I made the example at the top with image scrolling background.

The Scrolling Background TextBox

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.

Codr for the <body> </body> tag.

We'll have to create a <div id=textbox> inside another <div id=example>

<body>

<div id=example>
<div id=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 --> 

</div> <!-- #example ends here --> 
 
</body>

Here's the code for the <head> </head> tag.

Now we'll specify css style for both the div.

<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>

The Explanation

Line 5 › #example{
→ This is the Id of to the outer div (id='example') that contains the inner div(id='textbox').

Line 6 › border:3px solid #000;
→ Here 3px is the width of the border. Solid is the type of border. #000 is Hex code for Black Color.

Line 7 › width:70%; Line 8 ›height:300px;
→ To Specify Width and height for this <div id=example> tag.

Line 9 › margin:auto;
→ Margin auto positions the <div id=example> in the center.

Important Line 10 › overflow:scroll;
→ This is the Css Property that makes this <div id=example> behave like a textarea.

Important Line 11 › overflow-x:hidden;
→ Another Extension for Css Overflow Property. It hides the horizontal scroller which was generated on line 10.

Line 14 › #textbox{
→ This is the Id of to the inner div (id='textbox') contained inside the outer div (id='example') .

Line 15 › padding:12px;
→ Specifies padding from all side for this div(id='textbox').

Line 16 › background:#fff url("images/green-vine.png") scroll ;
→ White (#fff) background color is specified with the background image (green-vine.png). Background-Attachment is set to scroll. So that the image scrolls with the text. The image is repeated horizontally and vertically by default.

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!

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.