CSS Background
Many attributes define a good website, the most important being its background.
CSS provides a single and simple interface to design any kind of website, be it a personal, business or entertainment website, suing a background settings of your choice, at your ease.
CSS lets you choose desired colors, background images, image repeating or scrolling direction without using any complex tables.
Defining colors
You can define the background color in many ways. Here is a look at how you can do this:
You can specify the background color using the color name. Here is the cod for this:
h4 { background-color: <color name>; }
§ Note: The color name is any valid color name
h4 { background-color: <#hexadecimal value>; }
§ Note: The hexadecimal value stands for a color. This value begins with # symbol, followed by 6 hex values (0-F)
h4 { background-color: <RGB(individual values of RGB separated by commas; }
§ Note: RGB stands for individual RGB values separated by commas where the values of R (red), G (green), and B(blue) should be in the range of 0-255.
Here are some examples on how to use the above-mentioned formats for setting the background color:
p { background-color: gray; }
H2 { background-color: #1078E1; }
ol { background-color: RGB( 255, 255, 0); }
Output
This is a <p> with a gray background
This is a <H2> with a background color using the hexadecimal value of #1078E1
· This is an ordered list
· With RGB values of 255, 128, 0
Having set the background color, the next question would be “how do I modify my image settings?”
Modifying the image settings can include one of the following:
· Set a normal background image
· Repeat the background image in horizontal and/or vertical directions
· Set fixed/scrolling background image
· Provide gradient image
Here is a look at how to do each of these actions:
Setting a normal background image
This simple code sets up a normal background image:
p { background-image: url(MyPic.jpg); }
Output
Similarly you can also specify your background image through a url:
h4{ background-image: url(http://www.abc.com/pics/cssT/Pic.jpg); }
Repeating the background image
You can repeat the background image vertically and/or horizontally, or without any repetition.
To repeat a background image:
p {
background-image: url(MyPic.jpg);
background-repeat: repeat; }
Output
To repeat the background image vertically:
ol {
background-image: url(MyPic.jpg);
background-repeat: repeat-y;}
Output
To repeat the background image horizontally:
ol {
background-image: url(MyPic.jpg);
background-repeat: repeat-x;}
Output
Without repetition:
ul {
background-image: url(MyPic.jpg);
background-repeat: no-repeat;}
-this does not repeat the image
Fixed/scrolling background image
You can have a fixed background image for your web page, else you can opt for a scrolling one.
Use the following css codes to have a fixed background image:
textarea.noScroll {
background-image: url(smallPic.jpg);
background-attachment: fixed;
}
Use the following code to have a scrolling background image:
textarea {
background-image: url(smallPic.jpg);
background-attachment: scroll;}
Background positioning
If you are very interested in specifying the position of your background image, you can do so using the CSS background position codes like length, percentage, and keyword. The most preferable one is length, in other words, pixels.
Positioning using pixels: If the location of the image should be 10px from the left of the screen and 40px from the top of the screen, type the code:
p {
background-image: url(MyPic.jpg);
background-position: 10px 40px;
}
Positioning based on percentage: If the location of the image should be 50% from the left of the screen and 40% from the top of the screen, type the code:
h4 {
background-image: url(MyPic.jpg);
background-position: 50% 40%;
}
Positioning based on keywords: If the location of the image should be on top right position, type the code:
ol {
background-image: url(MyPic.jpg);
background-position: top right;
}
Gradient background
You can also create a drawing using a Paint application and use the repeat attribute to repeat the image across the paragraph. This creates a beautiful gradient background image in just two simple steps.
p {
background-image: url(http://www.example.com/gradient.gif);
background-repeat: repeat-x;
}
This resulting paragraph of this code will have a gradient background.