CSS Background Images
Jakob Jenkov |
You can use the CSS property background-image to set background images for HTML elements.
Here is an example:
#withImage {
background-image : url('/images/css/bg-image-small.jpg');
}
This example CSS rule sets the background-image CSS property for the HTML element with
the id withImage. The URL of the image to be displayed as background image is referenced inside
the url('') declaration. In the example above the URL is /images/css/bg-image-small.png.
Here is how a div element would look when rendered with the above background-image
CSS property value applied (I have added a dotted border to show you the boundaries of the div
element):
Div with background image
Div with background image
As you can see, the text inside the div element is written on top of the background image.
Additionally, the background image is repeated. We will look at how to control that and other behaviour
in the following sections.
background-repeat
The background-repeat CSS property controls how the background image is repeated inside
the HTML element it is applied to. The background-repeat CSS property can accept the
following values:
- no-repeat
- repeat
- repeat-x
- repeat-y
The no-repeat value makes the background image only be displayed one time inside the
HTML element. It is not repeated neither vertically, nor horizontally.
The repeat value makes the background image repeat both vertically and horizontally.
Thus, if the HTML element is 300 pixels high and 200 pixels wide, and the background image is
150 pixels high and 100 pixels wide, then the background image will be repeated 2 times horizontally
(300 / 150 = 2), and 2 times vertically (200 / 100 = 2).
The repeat-x value makes the background image repeat horizontally, but not vertically.
The repeat-y value makes the background image repeat vertically, but not horizontally.
background-position
The background-position CSS property is used to set the position of the background image.
The background-position CSS property can take either a set of predefined values, or
explicit numbers. I will show you how both works.
Predefined background-position Values
The predefined values are split up into 2 sets. The first set specifies the horizontal position and the second set specifies the vertical position.
The horizontal position values are:
leftcenterright
The vertical position values are:
topcenterbottom
When setting the value of the background-position CSS property, you set one value for the horizontal
positioning and one value for the vertical positioning. Here is an example:
#withImage {
background-image : url('/images/css/bg-image-small.jpg');
background-position : left top;
}
This example CSS rule sets the background position to left horizontally and top
vertically. This wil position the top left edge of the background image at the top left of the HTML element
it is applied to. Here is how that looks (with a background-repeat: none):
Look what happens if we change the background-position to right bottom; ;
The right edge of the image is now aligned with the right edge of the HTML element, and the bottom edge of the image is aligned with the bottom edge of the HTML element.
The two center values will align the center of the background image with the center of the HTML element
horizontally and vertically. Here is how a background-position: center center; looks;
You can combine the horizontal and vertical values any way that suits your needs.
Numerical background-position Values
Instead of the predefined values you can also use numeric values for the background-position
CSS property. Like with the predefined values, you set one value for the horizontal position and one value
for the vertical position. Here is an example that sets the horizontal position to 100 pixels and the vertical
position to 50 pixels:
#withImage {
background-image : url('/images/css/bg-image-small.jpg');
background-position : 100px 50px;
}
Here is how that looks when applied to a div element:
The left edge of the background image is positioned 100 pixels to the right of the left edge of the HTML element. The top edge of the background image is positioned 50 pixels down from the top edge of the HTML element.
You can also use percentages for the horizontal and vertical positioning. When you do, the browser will align the point that is X%, y% into the background image with the point that is X%,Y% into the HTML element. Here is an example:
#withImage {
background-image : url('/images/css/bg-image-small.jpg');
background-position : 50% 50%;
}
This example will align the point that is 50% into the background image both horizontally and vertically, with
the point that is 50% into the HTML element both horizontally and vertically. Here is how that looks when
applied to a div element:
The result is a centered background image because the center (50%, 50%) of the background images is aligned with the center (50%, 50%) of the HTML element.
You can mix fixed numeric values (like pixels) with percentage values. Here is an example of that:
#withImage {
background-image : url('/images/css/bg-image-small.jpg');
background-position : 20px 50%;
}
You can also use negative values in case you want to move the background image off to the left or top of the HTML element. Here is an example:
#withImage {
background-image : url('/images/css/bg-image-small.jpg');
background-position : -20px -20px;
}
Here is how that looks when applied to a div element:
Notice how the background image is now only partly visible.
background-attachment
Normally the background image of an HTML element scrolls along with the rest of the content when you scroll
up and down in the browser. For instance, if you have a background image set on the body element,
then the background image will be visible at the top of the page (or where you positioned it). When the user
scrolls down the page, the background image will scroll up and out of the browser window, just like the rest
of the content in the page.
If you want to keep the background image of an HTML element fixed so that it does not scroll along with
the content in the HTML element, then you can use the background-attachment CSS property.
The background-attachment CSS property can take this value:
fixedscrolllocal
fixed means that the background image is fixed inside the viewport of the browser.
If the content scrolls, the background image does not scroll along with the content.
scroll means that the background image is fixed inside the HTML element's borders.
In case the content inside the HTML element can scroll, the background image of the HTML element
will not scroll with it. If, however, the whole browser content (viewport) is scrolled, the background
image will follow the borders of the HTML element.
local means that the background image scrolls along with any content inside the viewport
or inside the HTML element if the element can scroll its content.
Here is an example:
#withImage {
background-image : url('/images/css/bg-image-small.jpg');
background-position : 20px 20px;
background-attachment : fixed;
}
This example will make the background image attached to the body element stay fixed inside
the browser's viewport, even if the user scrolls up or down the page.
background-size
The background-size CSS property is used to size the background image set on an HTML element.
Here is a background-size example:
#withImage {
background-image : url('/images/css/bg-image-small.jpg');
background-position : 20px 20px;
background-size : 200px 100px;
}
This example sets the backround-size CSS property to 200px 100px, which means
a 200 pixel width (first number) and a 100 pixel height (second number).
You can also use percentages as width and height of the background image. Here is an example:
#withImage {
background-image : url('/images/css/bg-image-small.jpg');
background-position : 20px 20px;
background-size : 50% 50%;
}
This example sets both width and height to 50% of the background positioning area (see background-origin
further down this page).
background-origin
The background-origin CSS property is used to specify what part of the HTML element to align the
background image with. The background-origin CSS property can take one of these values:
border-boxpadding-boxcontent-box
The value border-box means that the background image is drawn already under the border of the
HTML element.
The value padding-box means that the background image is drawn from the padding box and in.
The padding box starts just inside the border of the HTML element. Thus, the upper left corner of the
background image is aligned with the upper left corner of the padding box.
The value content-box means that the background image is drawn from the content box and in.
The content box starts inside the padding box - with the padding area of the HTML element excluded.
Here are three div element with the same background image, using a different value for
the background-origin CSS property. The left uses border-box, the middle
uses padding-box and the right uses content-box.
background-clip
The background-clip CSS property specifies where to clip the background image. In other words,
how much of the area of an HTML element to fill out with the background image. The background-clip
CSS property takes one of these values:
border-boxpadding-boxcontent-box
The border-box value means that the background image is rendered from under the border of the HTML element
and in.
The padding-box value means that the only the padding box part of the HTML element has the background image
rendered.
The content-box value means that the only the content box part of the HTML element has the background image
rendered.
You can combine the background-clip property with the background-origin property to
get the clip and alignment of the background image you need.
Here are three div elements all with background-origin set to border-box,
and background-clip set to border-box, padding-box and content-box,
to show you the effect of combining the two CSS properties:
| Tweet | |
Jakob Jenkov | |
