CancelImage Upload

Background Image CSS

Want to add a background image to your HTML elements using CSS? Then you have come to the right place! Here is an example of CSS code that you can give to your html, body, div or table tags to provide them with a background image!


body { background-image:url('path/yourpicture.gif'); }

The above code is the simplest form. A more advanced example is:


body { background: #FF0000 url('path/yourpicture.gif') no-repeat fixed center; }

This code would place yourpicture.gif on a red background (color code: #FF0000), without repeating it, while having the image centred. The picture can be positioned using a combination of the words: top, right, bottom and centre, or by defining x and y values with px or %. Here is an example of a background image being positioned with a 50px gap from the top and left-hand side of the page:

background-position: 50px 50px;

As for repeating the background element you can choose between repeat (vertical & horizontal), repeat-x (only horizontal), repeat-y (only vertical) or as above no-repeat.

Here is another way of defining the above example:

body {
    background-color:#FF0000;
    background-image:url('path/yourpicture.gif');
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:center;
}

If you want to change the background image using Javascript, try:

object.style.backgroundImage="url(path/yourpicture.gif)"

One vital component that background images using CSS lacks

Unfortunately assigning width and height attributes is not possible as of yet. Defining a background image's size within a layout using CSS is therefore not possible. If required a workaround is needed. One could for example use PHP and the GD image library.

Login
Want to leave a comment?

No problem. Just enter your email and password below.


register | home | reminder

myDesignTool Networking • www.mydesigntool.cominfo@mydesigntool.com