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

Example

background is a shorthand property of background-color, background-image, background-repeat, background-clip, background-position, background-attachment.

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

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

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
Values	Description
repeat-x	The image repeats itself horizontally (along x-axis).
repeat-x	`{background-repeat:repeat-x;}`
repeat-y	The image repeats itself vertically (along y-axis).
repeat-y	`{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.
space	`{background-repeat:space;}`
round	The images are rescaled (reduced form) so as to fit the whole background-area.
round	`{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
Values	Description
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.
fixed	`{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.
scroll	`{background-attachment:scroll;}`

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
Values	Description
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.
right	`{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.
left	`{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.
top	`{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.
bottom	`{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.
center	`{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
Values	Description
padding-box	padding-box defines that the image occupies the area under padding also.
padding-box	`{background-clip:padding-box;}`
content-box	In this case, only the content area is covered by the background image.
content-box	`{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
Values	Description
cover	The image is rescaled in such a way that only one image covers the background area.
cover	`{background-size:cover;}`
contain	It covers the complete background with the image scale to the smallest size (provided the aspect ratio remains constant).
contain	`{background-size:contain;}`
length	The length value decides the size of the image.
length	`{background-size:200px;}`

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.

Next Previous