Featured Tutorials

photoshop tutorials, gradient filter, photo effects, brand image,gradient mapping,gradients in photoshop,gradient colours,photo gradients,gradient photo,gradient filter,photoshop filters Gradient Mapping

Gradient Mapping

How to transform a standard photograph for use with a specific colour scheme or brand imag..

css, learn css,css links,css classes,links in css,a tag css,a tag,css a,css tutorial,css help,a class,a tag Learn CSS: Link Classes & Properties

Learn CSS: Link Classes & Properties

Learn how to create and customise links or <a> tags in CSS. This detailed tutorial w..

photoshop,buttons,blending options,web 2.0,web20,stylish buttons,sleek buttons,shiny buttons,shiny effects,rss button,rss logo Sleek Web 2.0 Buttons using Photoshop's

Sleek Web 2.0 Buttons using Photoshop's "Blending Options"

This is one of the best looking buttons I've seen and have used this tutorial many times i..

3d studio max,3d studio,3ds max,3ds,diamond,ruby,modeling a diamond,modeling a ruby,modeling a ring,how to model,shape modeling Modeling a Ruby / Diamond in 3D Studio Max

Modeling a Ruby / Diamond in 3D Studio Max

This is a very detailed video tutorial that will teach you how to easily create a 3D ruby ..

photoshop grass,photoshop tutorial,grass texture,grassy texture,ground texture,textures,green texture,create textures,texture tutorial Grass Textures in Photoshop using Filters

Grass Textures in Photoshop using Filters

Its amazing what you can get from using a combination of different filter in Photoshop. Th..

Featured Videos

A useful tutorial for creating an Ethernet or Patch Cable for net..

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

This spoof advert copies the popular Citroen C4 commercials and s..

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

Particle Illusion is one of those cool particle effect programs t..

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