The Theory Behind
CSS Background Image Definition
background-image: <bg-image>[, <bgimage>]
bg-image: This is the path of the image.
For example: using this image called “cloud.png”.
border: solid orange 1em;
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:
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:
[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
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.
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:
background-image: url(‘cloud.png’) , url(‘sky.jpg’);
background-repeat: no-repeat , no repeat;
background-position: 0% 0% , 0% 0%;