CSS background

It defines the background properties for the visual HTML elements. The background can be styled with different colors, images (with repeat or no repeat properties of images).

In this tutorial, each and every property related to the background is presented.

background-color

The color of the background of any visual HTML element is set by this CSS attribute.

Example

<style>
body{
 background-color: lightblue;
}
h1{
 background-color:gray;
}
p{
 background-color:yellow;
}
</style>
Try </>
css background color
background-color

Now we consider the image as the background of the HTML elements.

background-image

This property sets the image for the background.

Example

<style>
body
{
 background-image:url("/images/codingb-96x96.png");
}
</style>
Try </>

An author should also specify the background-color with the background-image so that when the image is not available it may present a difference between the alt text and the background.

If the size of the image is small as compared to the size of the background, then the image repeats itself by default.

The repetition of the image can be prohibited by the following property.

background-repeat

This property enables the image to repeat itself to cover up the whole background. The default value is repeat.

Example

<style>
body
{
 background-repeat:no-repeat; //It does not allow the image to repeat
}
</style>
Try </>

There are many values of the background-repeat that have been given below.

background-repeat property values

ValuesDescription
repeat-x The image repeats itself horizontally (along x-axis).
{background-repeat:repeat-x;}
</>
repeat-y The image repeats itself vertically (along y-axis).
{background-repeat:repeat-y;}
</>
space In this method, the image repeats itself a whole number of times (means we can see the full images) without rescaling.
{background-repeat:space;}
</>
round The images are rescaled (reduced form) so as to fit the whole background-area.
{background-repeat:round;}
</>

background-attachment

The background image is not fixed by default. If the page size is larger and scroll bar is present then the image moves up and does not remain constant.

The follwing properties decide the attachment of the image on background.

background-attachment property values

ValuesDescription
fixed The image remains fixed at the top of the page even if the page is scrolled down. The image is fixed with respect to the viewport.
{background-attachment:fixed;}
</>
scroll It is default value of background-attachment property. The image also moves with the movement of the content. Remember that it moves with respect to the viewport.
{background-attachment:scroll;}
</>

background-position

The position of background can also be specified by this property. The image may be on the right, left, top or bottom side. You can also define the position of the image in terms of length or percentage.

background-position property values

ValuesDescription
right Horizontally full area of the page covers full area of the image. Vertically half of the page area covers half of the image area.
{background-position:right;}
</>
left Horizontally no area of the image is covered by the page. Vertically half of the page area covers half of the image area.
{background-position:left;}
</>
top In this case,horizontally half area of the page covers half area of the image (By default). And vertically no area of the image is covered by the page area.
{background-position:top;}
</>
bottom Horizontally half of the page covers half of the image area (By default). And vertically full area of the page covers the full area of the image.
{background-position:bottom;}
</>
center Horizontally half of the image area is covered by the half of the page. And vertically half of the image area is covered of the page area.
{background-position:center;}
</>

You may be confused about the above properties. There are always two values for the background-position property. One value defines the horizontal position of the image on the page. And the other value represents vertically that how much area of the image is covered by the page.

When we define one property for background-position, then by default the other one is center. For example, background-position:right; actually means background-color:right center;

background-clip

It defines the area that the background image occupies.

background-clip property values
ValuesDescription
padding-box padding-box defines that the image occupies the area under padding also.
{background-clip:padding-box;}
</>
content-box In this case, only the content area is covered by the background image.
{background-clip:content-box;}
</>

background-size

It defines the size of the background image. The size of the background image can be customized by using values in pixels, percentage or other units.

background-size property values

ValuesDescription
cover The image is rescaled in such a way that only one image covers the background area.
{background-size:cover;}
</>
contain It covers the complete background with the image scale to the smallest size (provided the aspect ratio remains constant).
{background-size:contain;}
</>
length The length value decides the size of the image.
{background-size:200px;}
</>


Was this article helpful?

 

Email:

Message:

Get the newsletter