CSS background property

A website that you can use CSS to provide excellent all backgrounds. Always use a background image to the background color should be used, but because of the color of the image more than the load time. So the loading time of the web page background color if you do not see does not take well.

Tables: CSS background properties.

CSS: background-color property:
These properties can be set using the page background color. By default, the background color is transparent. hex, codes, color keywords, rgba () and hsla (), etc. can be made even by the color of the background.


CSS: background-image property:
These properties can be easily added to the background of the image. It takes two values. Namely:
url () brackets in the background of the image path is determined. For example: /path/image.png
none: there is no background image. It is used as the default value.

Sample coding syntax:

Example II:

CSS: background-repeat property:
Repeat this to automatically adjust the image to the browser is very important properties. Otherwise, the screen image browser automatically will repeat. This value is used in a variety of properties. For example –

Sample coding syntax:

Example 1: image is to repeat horizontally.

Example II: Repeat image inserted vertically.

The position of the image to determine the background

The web page’s position in the middle of the image, the left-right or up-down can be set in different ways. The possible values for the position in property -left / right / center / top / center / bottom and so on. You can use these single or blending. Without the background-position property with units using a variety of backgrounds, text or image to be in a position to come up with. This is the unit -%, px, em, in, cm, mm, etc.

Position of the image is determined by the value of one or two, separated by a space. (Eg, -5%, 20%), (30px-40px) (top center). If the value of a single value that is assigned to center.

declaration format is:


For example:

Set right on the image.

CSS background-attachment property:
This property is used in the background image attachments. How about the background of the image in response to scroll through the pages which are set by the property. Possible values of the –

Fixed: users scroll through web pages, but the background image is fixed.
Scroll: When the user scroll through pages background image will move. .. The default value is.
Local: Content background image to be fixed. So if you scroll pages with content that will move it.


For example –
For example, Web pages stabilize the background image.

Shorthand CSS background properties:

Multiple backgrounds single syntax Properties Properties are used to define the shorthand background. declaration properties in …

Leave a Reply

Your email address will not be published. Required fields are marked *