By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

Setting a Background URL with CSS

How to use the background property to set the URL of an image, and other properties.

Edited: 2012-12-25 17:15

Many beginners are having trouble with UTLs, sometimes even skilled web-designers might stumble – usually we tend to get confused after a long days work – its really funny when its just something simple going wrong, like a incorrectly typed URL.

Many also do not know that they can use the CSS background property when using background images as BGs, which is the short-hand way to apply backgrounds in CSS.

To use an image with the background property, you simply need to type url, followed by a set of parentheses and quotes, and then the address for your image.

div {
  background: #ff0000 url("http://mydomain.com/subdirectory/my-background.png") scroll no-repeat top left;
}

See also: Absolute and Relative Paths

Understanding the background property

When using the background property, you can use all the properties in one declaration: set a background color, a background image, its attachment, how and if it should be repeated – you do not have to specify all of this – if the default styles are enough, you could just leave out all the other styles. I.e.

div {
  background: url("/subdirectory/my-background.png");
}

But we should just go over them anyway, for those who do not know what the different parts of the deceleration dose. The first part in the first example is the background color, we specified this using a hex color – you can also use background instead of background-color – in the below example we specify an all white background for div elements:

div {
  background: #fff;
}

Next we also apply a background image – useful if the image doesn't repeat in both directions – as the color will take over where there is no image to fill the empty space.

div {
  background: #fff url("/subdirectory/my-background.png");
}

The background can either be fixed when scrolling on a page, or it can move with the page – use fixed to make it not move when scrolling.

div {
  background: #fff url("/subdirectory/my-background.png") fixed;
}

You often want the image to only repeat horizontally, that can be done by using repeat-x in the background deceleration.

div {
  background: #fff url("/subdirectory/my-background.png") repeat-x;
}

Finally you can also specify the background position, this will also control from which direction the background will be repeated; the default position is topleft; but you can also use other combinations, or even specify it with pixels!

div {
  background: #fff url("/subdirectory/my-background.png") repeat-x bottom right;
}

Background url CSS style

When we include a background url with CSS background, we are telling the browser that we want to use an image – beginners will sometimes find that its difficult to get the URL for their image just right – this results in images not loading when visiting their web pages.

If you haven't done so already, you should read the page about absolute and relative paths, as that will contain more information on how to correctly type your URLs.

You can also leave out the quotation marks from the url deceleration, but we do not recommend it.

Another way to use background images, is to include them in the CSS with base64 encoding. Such backgrounds will look like below:

div {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAyBAMAAACXNVdOAAAALVBMVEVFkbpCirFGlL5LncpKmsZLoM5Il8JOptVBibBDjrdBirFOo9JCi7RImMJFkryHLB1oAAAAmElEQVR4XnXPIQ4CMRQE0EkPQPIdSyqafwXCDbAoskHgVtSh0esICiQSux5Vha/E1nASOukPKJ6aZKbJLxohyxNZPlXjbzMKwszhja7z/gpVHRQ3QiQ0a4ISlmRtT9YmsvZI2JJlDlct2yY90m5vb3tCPJRSrFXC+rWpbRPJbtOBbfbPnOGchgCRxXRHdQFkfv7m+luRf/kDH55IAhJI7RwAAAAASUVORK5CYII=");
}

The above is the code used for Brugbarts header, at the time of this writing.

The advantage of data URLs is obvious, you save http requests when loading your web page, increasing the speed of your pages.

Absolute vs Relative paths for URLs

Some web-designers will also be confused about the different URL types, but while there are clear advantages to absolute and root relative URLs, it is mostly down to personal preference. The following is a list of URLs:

  • Absolute
  • Relative
  • Root-relative

These three ways to specify URLs all have their own advantage. Relative URLs will not have to be changed if you change the domain name, while absolutes will – but relative URLs also have a tendency to confuse people – which way you choose is really up to you, just make sure to get things right.