CSS Background Image

With CSS you can easily add background images or color to your html elements (div, paragraphs, etc) . In this post we will see how to work with the css background image proprieties, make some examples and give some tips and tools.

The Theory Behind

CSS Background Image Definition

background-image: <bg-image>[, <bgimage>]

bg-image: This is the path of the image.

Notes:

If the image is in the same folder as the page you can put the same name of the image.
By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.

For example: using this image called “cloud.png”.

#box{

background-image: url(‘cloud.png’);

border: solid orange 1em;

border-width:5px;

width:500px;

height:400px;

}

The Image Background Repeat.

The image background repeat set how the image is repeated ( in what direction): horizontal, vertical, horizontal and vertical, ect.

The sintax is:

background-repeat: repeat-x | repeat-y | [repeat | space | round | no-repeat]

repeat-x: Repeat the background image in the horizontal direction (from the top-left side of the image to the right side of the image).

repeat-y: Repeat the background image in the vertical direction (from the top-left side of the image to the bottom of the image).

repeat: Repeat the background image both directions ( vertical and horizontal).

space: The image is repeated as often as will fit within the background positioning area without being clipped and then the images are spaced out to fill the area. The first and last images touch the edges of the area. If the background painting area is larger than the background positioning area, then the pattern repeats to fill the background painting area.

round:The image is repeated as often as will fit within the background positioning area. If it doesn’t fit a whole number of times, it is rescaled so that it does.

no-repeat: the image is not repeated.

Positioning the image background

For positioning the image we use the background position property. This sets the starting position of a background image. This is the sintax:

background-position: [position]

[position]: Staring position. This can be.

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
x% y%
[x] px [y] px

For example:

background-position: 0% 0% ;

background-position: 75% 50% ;

CSS3 Improvements for background image

The new version of CSS (CSS3) have some improvements for adding a background image like:

Have multiple image backgrounds. This allows you to add multiple image layers to a box (div, paragraph, etc). The syntax is the same as the background-image property but with all the image layers separated by comma. The first image is the top layer, the second image is behind the top layer, the third image is behind the second and so on.

For example:

We have two images one called cloud.png and the other sky.jpg. We can put the cloud in the front layer and the sky as the background layer like this:

#box{

background-image: url(‘cloud.png’) , url(‘sky.jpg’);

background-repeat: no-repeat , no repeat;

background-position: 0% 0% , 0% 0%;

width:500px;

height:400px;

}