Featured Tutorials

photoshop,tutorial,photo editing,effects,filters Create a Time is Money hour glass in photoshop

Create a Time is Money hour glass in photoshop

In this tutorial we will learn how to create an hourglass...

firework photos,how to photo fireworks,photograph fireworks,photography,fireworks,shoot fireworks,take pictures of fireworks,fireworks with camera Firework Photography how to setup your camera

Firework Photography how to setup your camera

This digital photography tutorial will teach you how to setup your cameras shutter speed a..

Flash, XML, Tutorial, MP3, Music How To: Flash XML Music Player

How To: Flash XML Music Player

This tutorial will teach you how to create an XML music player using AS3. The songs played..

bubbles,animation,flash, bubbles animation,bubbles in flash,bubbles guide,flash animation,flash tutorial,how to animate bubbles, how to draw bubbles,bubbles,flash bubbles Animate Bubbles in Flash with Motion Guides

Animate Bubbles in Flash with Motion Guides

This simple tutorial will teach you how to draw and animate bubbles rising to the surface ..

halloween graphics,halloween brushes,halloween design,halloween vector,zombie images,vector zombies,halloween icons,avatar graphics,photoshop brushes,ghost icons,ghost images Spooky Halloween Graphics Collection

Spooky Halloween Graphics Collection

With Halloween just around the corner here's a massive collection of ghostly Photoshop bru..

Featured Videos

This tutorial will teach you some of the basics of the third part..

Heres some great inspiration for logo design with examples of mod..

A great example of how the many Photoshop tools can be used to im..

This video will open your eyes to the strange phenomenon of Traga..

This detailed tutorial will show you how to create a realistic ch..

Learn CSS: Background Images

There are many ways to add a background image to both your page body and its various page elements. There are also many different properties allowing you to display a background image or colour in certain ways depending on what best for your sites layout:

 

Background Image

Its simple all you need to to is identify an image path within some simple url() tags

Background-image { url(images/image.jpg);}

 

Background Repeat

The second part sets whether you want the image to repeat or just display once, you can use the follow lines for this:

Repeat the image horizontally from left to right

{background-repeat: repeat-x;}

Repeat the image vertically from top to bottom

{background-repeat: repeat-y;}

Do not repeat or loop the image, only display it once.

{background-repeat: no-repeat;}

 

Background position

With this setting you choose were you want your background image to be positioned either on the whole back or just in one specific div element, heres some examples:

{background-position: center;}

{background-position: top;}

{background-position: left;}

{background-position: top left;}

 

Background Color

Background colors are defined as a set of HTML Color codes such as #000000 for black, but you can also use simple colour choices like red,green etc, heres some examples:

{background-color: #334455;}

{background-color: green;}

 

Shorthand CSS (for those who want their code to look a bit more pro)

Short hand in css is a way of writing many of the above examples in one line of property code, or in other words squeezing it all into one simple line, as follows:

{background: #000000 url(images/image.jpg) no-repeat top left;}

 

Using Backgrounds for BODY and DIV tags

You can add background colors and images to both the whole page and seperate div tags heres some examples:

 

Within the style sheet for the BODY

<style>
html, body {background: #000000 url(images/image.jpg) no-repeat left;}
</style>

 

Within the page or style sheet for individual elements

<div class="test" style="background: #000000 url(images/image.jpg) no-repeat left;"></div>

 

More Web Design...

Other Content...

 Subscribe to our feed

Send to a friend