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); }



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); }



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


To repeat the background image vertically:


ol { 

            background-image: url(MyPic.jpg);

            background-repeat: repeat-y;}




To repeat the background image horizontally:


ol { 

            background-image: url(MyPic.jpg);

            background-repeat: repeat-x;}


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.