html, css, jQuery, PHP, mySQL

« | »

CSS From Scratch. 8:2 Background images.


add images with css

Many experts agree that it is best to include images in your web page using CSS. This makes it easier to edit them later, and maintains the separation of concerns (CSS used only for appearance, HTML used only for semantic markup). Others disagree, and say that it is better for accessibility to use HTML <img> tags with the alt attribute, as screen readers can recognise the <img> tag and will read aloud the value of alt. It’s up to you to decide which is more appropriate for each picture on your website: decorative features may be best in CSS, where they will be invisible to screen readers; photos of your latest holiday may be best in HTML, so that blind or partially-sighted visitors can hear a description.

You can add a background with CSS to any element with the property display:block (this includes block-level elements, which have this property by default), as long as it also has width and height. You may notice that when a span is given display:block, it still has no height until this is assigned: span is the commonest element used to display graphics, so bear this in mind.

The basic property used to give a background to an element is background, but before looking at the shorthand which allows you to list all values in one declaration here are all properties (and their values) listed separately:

This sets the background colour of the element. Remember that it is also possible to set transparency using rgba or hsva.

This sets a background image. By default the image is placed in the top left corner of the element, and then will be repeated until it covers the whole of the element.

To control the direction of the repeated background image use repeat-x (repeat the image only in a horizontal direction) or repeat-y (repeat the image only in a vertical direction). This can give a stripe across the top or down the side of an element. To prevent the image from repeating at all use no-repeat. This value is often given even though an image fits the element exactly, just to make doubly sure that there are no inconsistencies.

This is similar to using position:fixed, but for a background image. The default is scroll (the image scrolls with the page). Fixed will mean that the image remains in place while the rest of the page scrolls. Inherit always means that the property takes the same value of that given for the parent element.

This enables you to set the starting position of the background image. The default is top left (the top left corner). You can use the key words top left bottom and right, or set the position using percentages for x and y coordinates or units such as px, em and pt. Remember that when a computer draws an image on a screen it begins from the top left corner, and then “writes” lines across, working line by line down the screen. This means that y-coordinates are calculated from the top of the box by default, in contrast to most mathematical diagrams where y-coordinates are calculated from the bottom upwards!

The shorthand property background simply takes as values the values of the properties listed above. They are listed in the same order given above, but many are optional. Only a background-color or background-image is essential – or there will be no content for the other properties to apply to!


background: #ff0000 url(‘myPic.gif’) no-repeat fixed top right;

background: url(‘myNewPic.jpg’) repeat-x left 50%;


Tags: , , , , , , , , , , , , , , , , , ,

This entry was posted on Wednesday, August 10th, 2011 at 10:52 am and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply