CSS Background Image and Color

CSS Background properties are used to add the background on the web page. CSS can be used to apply background colors and background images to different parts of a web page.

CSS Background Color

In HTML, background colors and background images can be applied to the whole page or to a table. CSS provides the facility to apply background color on an image to even a single word. The property used for this purpose is background-color.

P{
  background-color: green;
}
b{
  background-color: red;
}

CSS Background Image

CSS also provides the facility to add an image as a background to any part of the page. The property for this purpose is background-image.

Body{
  background-image: url(image.jpg);
}

Background control

The style of display the background image can easily control in CSS. Different options for controlling background image are as follows:

Background Repeat

The repetition of the image in the background can be controlled by using the background-repetition property.

P{
  background–image: url(image.jpg); 
  background-repeat: no-repeat;
}

The above example will display the image once in the top-left of the paragraph. The possible values are as follows:

• repeat-x:
  • repeats the image horizontally for one row
• repeat-y:
  • repeats the image vertically for one column

Background Attachment

Normally, the background image moves when the user scrolls or down the page. background-attachment property is used to specify the background-attachment.

Body{
  background-image: url(“image.jpg”); 
  background-attachment: fixed;
}

The other value is this property is the scroll that restores the default option

CSS Background Position

You can also specify the position of the background image relative to the element behind which it is applied. The possible values are top, center, bottom, left and right.

P{
  background-image: url(“image.jpg”); 
  background-position: right bottom;
}

You can also specify horizontal and vertical starting points as follows:

P{
  background-position:60px 15px;
}

Reference

If you want to learn more about CSS visit the official website: Visit

Visit the CSS tutorial list. And make strong your CSS concept. Click here. wuschools.com is always written about the CSS concept for the CSS lover. Ang writes about how CSS makes your life easy if you are a web site developer. We help you to continue your learning.