The CSS background- properties
There are several CSS properties used for setting the background of an element. These can be used on
<body> to set the background of an entire page.
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position
Setting a background-color
The most straightforward way to change the default (white) background for a page is to use
background-color on the body.
body { background-color: #efefef; }
One thing you have to watch out for, though — if you set the
background-color too dark, the default black text won’t be readable, so you’ll need to change it (or not make the background so dark). See our
tutorial on dark backgrounds for more tips on dark-background site design.
Setting a background-image
All of the other CSS
background- properties are connected with setting an image.
background-image — The source URL for the image.background-repeat — Whether and how the image should tile.background-attachment — Whether and how the image should scroll with the content.background-position — How the image should be placed relative to the element.
background-image
The
background-image property needs to be a URL to the image. This usually looks like this:
body { background-image: url(/path/to/image.png); }
When using the
url() value, you have three choices:
- relative path based on the root domain of the CSS file — begin with a slash (
/) as shown above
- relative path based on the immediate directory of the CSS file — no slash (
url(path/to/image.png) )
- absolute URL, if you are linking to an external resource —
url(http://example.com/path/to/image.png)
Remember that the relative URLs are relative to the CSS file, not the page.
background-repeat
This property specifies whether and how the image will repeat, or
tile. The default is for the image to repeat both horizontally and
vertically. You can change this by specifying a value other than
repeat.
repeat — The default. Repeats in both directions.repeat-x — Repeats only on the x-axis (horizontally across the element).repeat-y — Repeats only on the y-axis (vertically down the element).no-repeat — Does not repeat.
background-attachment
This property affects how the background image responds to scrolling.
fixed — The background is fixed relative to the
viewport (browser window). Scrolling the contents of the element or
scrolling the contents of the entire page will not cause the image to
move.scroll — The background is fixed relative to the
boundaries of the element’s box. Scrolling the entire page (moving the
placement of the element itself) will cause the image to move with the
element.local — The background is fixed relative to the
contents of the image. If the contents of the image are scrolled, the
background will scroll with them. If the document as a whole is scrolled
(causing the element content to be moved), the image will move with the
element.
This is a little hard to visualize, so you may want to see
this example of all three attachment values, side-by-side. Note that in the context of the
<body> element,
scroll and
local will have the same effect.
background-position
There are several ways to specify the position of a background image, but the easiest is to use the positioning keywords
left,
right,
top,
bottom, and
center. This gives you nine possibilities:
left topleft centerleft bottomcenter topcenter centercenter bottomright topright centerright bottom
You can omit
center if you like, as it is the default value — but it’s a good idea to include for clarity’s sake.
The background shorthand property
You can combine all of these rules into a single line labelled
background.
body { background: #efefef url(/path/to/light-texture.png) repeat fixed top left; }
When using the shorthand property, you can omit any of the
components if you just want the default value. You must keep them in the
same order, though. Note that you should almost always include a
background color, even if you want to have a background fully-covered by
an image tile. Especially if the image is dark, you’ll want a color
that closely matches the overall color of the image. That way, if the
image load fails (or is slow), the text is still readable as intended.
Comments
Post a Comment