Welcome to Our Free Tutorial!

CSS - Background

The background is the more powerful property than HTML. It is very important of your website. So please spend some time with this tutorial. If you use light background with dark text. Color combination is the must for website.

You can set the background color or image of CSS element.

CSS Background Color

CSS Code:

 h4 { background-color: white; } 
p  { background-color: #1078E1; } 
ul { background-color: rgb( 149, 206, 145); }
      

Display:

with a white background.

background using the hexadecimal value of #1078E1

  • Hello AoneStudy Free Tutorial

CSS Background Image:

If you want to use background image in your web site. It is quite easy with CSS.

CSS Code:

p { background-image: url(Image URL); }
h2{ background-image: url(Image URL); }
<p style="height:100px;background-image:url(img URL);">
This is for background image. </p>

CSS Background Repeat:

<p style="height:100px;background-image:url(image URL);background-repeat:no-repeat;">
This background image not repeat. </p>

CSS Background Position:

Position of the background image

<p style="height:100px;background-image:url(Image UEL);background-repeat:no-repeat;
background-position:100px;">This background image is positioned 100 pixels from the left. </p>

This background image is positioned 100 pixels from the left.

CSS Background Attachment

<p style="height:100px;width:150px;overflow:scroll;background-image:url(image.jpg);
background-attachment:fixed;">This background image attachment is fixed it does not scroll.
</p>

CSS Gradient Background

If you want to use gradient background first create an image image into (Photoshop, Coral Draw, etc).

Notice that the image should be very thin or slim and horizontal.

CSS Code

p {
	background-image: url(image URL);
	background-repeat: repeat-x; 
}