CSS Tutorial - CSS Background

I the previous chapter of CSS tutorial we learnt about CSS colors and now in this chapter we will study about CSS backgrounds.

But before we move ahead we can over-view the CSS background properties.

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

Let’s start now!

Background-color

The background-color is CSS property that specifies the background color of HTML elements.

body{
 background-color: #DDDFFF;
}
h1{
 background-color: #156938;
}
p{
 background-color:orange;
}
div{
 background-color:rgb(255,38, 30);
}

The above example will produce below result

Result

CSS background-color property receives only valid color names, HAX color values, RGB color values, HSC color value etc. If there is any trouble with you then you may go through the previous chapter which describes the CSS colors. Click Here CSS Tutorials - CSS Colors.

Background-image

CSS background-image property sets the image to HTML elements. Check the below example, how to set the image to HTML Elements.

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

Tips: Be careful while using background image. When using background image, always use an image that don’t disturb the visibility of text using over image.

Below is an example that shows the improper use of the background image.

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

Background-repeat

By default the CSS background-image property repeats the image horizontally and vertically so that it can cover the entire element. Sometimes it looks awkward. For example

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

CSS background-repeat property can control it and allow repeating only vertically, only horizontally or no-repeat.

Horizontal repeat 

To repeat image horizontally, use (background-repeat: repeat-x). Follow the below example.

body{
 background-image:url('background1.jpg');
 background-repeat:repeat-x;
}

Vertical repeat

To repeat an image vertically, use (background-repeat: repeat-y).

body{
 background-image:url('background1.jpg');
 background-repeat:repeat-y;
}

No Repeat

To disable the repeat of an image in an element use (background-repeat: no-repeat). If the image is totally got fit to element, then it will not repeat by default.

body{
 background-image:url('background5.jpg');
 background-repeat:no-repeat;
}

Background-position

Use of CSS background-position is ideal when we do not want to repeat the image and set the image position to the element as we want.

In above example image is not repeating but it also not looks great. We can change its position using CSS background-position properties.

body{
 background-image:url('background5.jpg');
 background-repeat:no-repeat;
 background-position:right top;
}

Background-attachment

Sometime we do not want to scroll the background-image along with scroll bar. This can be done by using CSS background-attachment property. By default image is scroll with scrolling the scroll bar.
If we use (background-attachment:fixed; ) image will be fixed and not scroll.

body{
 background-image:url('background5.jpg');
 background-repeat:no-repeat;
 background-position:right top;
 background-attachment:scroll;
}

If we use (background-attachment:scroll;)image will be fixed and scroll.

body{
 background-color: #C6E6FD;
 background-image:url('background5.jpg');
 background-repeat:no-repeat;
 background-position:right top;
 background-attachment:scroll;
}

Background – shorthand property

It is possible to define all the background properties in a single property. This is call background shorthand property.

body{
 background: #C6E6FD url('background5.jpg') no-repeat right top fixed;
}

Related Topics

CSS Tutorial - CSS Background