Background images are one of the easiest aspects of a website to do and can transform your site tremendously if done correctly.

You can have background images repeating vertically (y-axis), horizontially (x-axis) or until it covers the entire element background.

In the following examples I will firstly show the full CSS then I will show the minimilised version of the same CSS code.

Repeating background image to cover entire background

Minimal version

#div1
{
background:url(stripe.png);
}

Full version

#div1
{
background-image:url(stripe.png);
}

Repeating background image horizontially

Minimal version

#div2
{
background:url(stripe.png) repeat-x;
}

Full version

#div2
{
background-image:url(stripe.png);
background-repeat: repeat-x;
}

Repeating background image vertically

Minimal version

#div3
{
background:url(stripe.png) repeat-y;
}

Full version

#div3
{
background-image:url(stripe.png);
background-repeat: repeat-y;
}

Repeating background images example

You can also have a background image which you would like to show just the once and not repeat it at all. This can be achieved by doing the following:
Minimal version

#div1
{
background:url(stripe.png) no-repeat;
}

Full version

#div1
{
background-image:url(stripe.png);
background-repeat: no-repeat;
}

Bookmark It

Hide Sites