CSS - Background

This chapter teaches you how to set backgrounds of various HTML elements. You can set the following background properties of an element ?

  • The background-color property is used to set the background color of an element.

  • The background-image property is used to set the background image of an element.

  • The background-repeat property is used to control the repetition of an image in the background.

  • The background-attachment property is used to control the scrolling of an image in the background.
  • The background-position property is used to control the position of an image in the background.

  • The background property is used as a shorthand to specify a number of other background properties.

Background Color

The background-color property specifies the background color of an element.

The background color of a page is set like this:

Example

body {
    background-color: teal;
}

With CSS, a color is most often specified by:

  • a valid color name - like "red"
  • a HEX value - like "#ff0000"
  • an RGB value - like "rgb(255,0,0)"

You can read more about colors and their value in our CSS Color Tutorial http://css.w3clan.com/tutorial/31/css-colors

In the example below, the <h1>, <p>, and <div> elements have different background colors:

Example

h1 {
    background-color: teal;
}

div {
    background-color: #FF0000;
}

p {
    background-color: rgb(0,0,255);
}

Background Image

The background-image property specifies an image to use as the background of an element.

By default, the image is repeated so it covers the entire element.

The background image for a page can be set like this:

Example

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

Note: make sure, Image path is correct.  Wherever you are calling your CSS code from, your path to any object starts from there.

Background Image - Repeat Horizontally or Vertically

By default, the background-image property repeats an image both horizontally and vertically.  Some images should be repeated only horizontally or vertically, or they will look strange, like this:

If you want to specify selective repeat like "Horizontal Repeat", you can do like below :-

Example

body {
    background-image: url("gradient.png");
    background-repeat: repeat-x;
}

If you want to specify selective repeat like "Vertical Repeat", you can do like below :-

body {
    background-image: url("gradient.png");
    background-repeat: repeat-y;
}

If you want to specify not to Repeat at all.

body {
    background-image: url("gradient.png");
    background-repeat: no-repeat;
}

Background Position

The position of the image is specified by the background-position property:

The background position for a page can be set like this:

Example

body {
    background-image: url("background-image.png");
    background-repeat: no-repeat;
    background-position: right top;
}

Avoid using "space in name of image". Example of Bad Image name  "my profile picture.jpg

Background Image - Fixed Position

To specify that the background image should be fixed (will not scroll with the rest of the page), use the background-attachment property:

Example

body {
    background-image: url("gradient.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
}

Background - Shorthand property

To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property.

The shorthand property for background is background:

Example

body {
    background: #ffffff url("gradient.png") no-repeat right top;
}

When using the shorthand property the order of the property values is:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
body {
    background: backgroun-color background-image background-repeat background-attachment background-position;
}

It does not matter if one of the property values is missing, as long as the other ones are in this order.


Loading ...

Related Results :

  1. CSS - Background
  2. CSS Background image
Note :
  • Related Posts are generally User Blog posts.
  • or Other tutorials from other networks of w3clan.com.
  • Any registered user can create related posts based on search term tags.

About the Author