3 Ways to create New Year screen saver for your computer. You could add make an animated s..
Some simple Photoshop techniques for giving your text and little oooomph!..
Heres a few ideas for those struggling to come up with professional business card designs,..
This tutorial will show you how to add realistic looking graffiti to a photograph or wall ..
This very detailed tutorial will show you some of the techniques you will need for transfo..
Heres some great inspiration for logo design with examples of mod..
In this video Jeremy of Shoemoney.com explains how he experimente..
Heres a great spoof video for the technically challenged develope..
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:
Its simple all you need to to is identify an image path within some simple url() tags
Background-image { url(images/image.jpg);}
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;}
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 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;}
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;}
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>
Send to a friend