Featured Tutorials

youtube,you tube,history,history of youtube,youtube history,design,layout,web design,archive.org,wayback,old version,use to be like FlukeTube: The History of YouTube's Design

FlukeTube: The History of YouTube's Design

An interesting look at the history of YouTube and how it use to look in the early days, th..

photoshop,effect,comic book,layer,retro,comic,photo,photo editing Give Your Photos a Retro Comic Book Effect

Give Your Photos a Retro Comic Book Effect

This tutorial will show you how to give a comic book look to your photos using a couple of..

graphics design,business cards,business card design,business card ideas,how to design, business card sizes,layouts Ideas for Business Card Layouts

Ideas for Business Card Layouts

Heres a few ideas for those struggling to come up with professional business card designs,..

adobe,photoshop,pdf,creator,creation,free,software,how to,tools,multipage,multi,page,multi-page,more than,one page Creating Multi-page PDF’s with Adobe Photoshop

Creating Multi-page PDF’s with Adobe Photoshop

Heres a tutorial on how to create Multi-page PDF documents using Adobe Photoshop, thats ri..

css tutorial,css tutorials,css borders,css border styles,css border types,borders,border styles,border types,border dotted,border striped,border width,css border width,css border size,how to Learn CSS: Border Styles & Properties

Learn CSS: Border Styles & Properties

There are many different style and settings for borders in CSS. This tutorial hopes to tea..

Featured Videos

This video will teach you some basic techniques for creating and ..

Informative but scary video about the history of Google, where it..

Heres a must for all flash developers, as you will at some point ..

This detailed tutorial will teach you how to create a realistic l..

This tutorial will teach you some of the basics of controling mov..

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