logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA
Irish Culture
Home Finance


dailyclick
All times in EST

Full Schedule
g
g HTML Site

BellaOnline's HTML Editor

g

Using CSS to Set a Background Image

Guest Author - Elizabeth Connick

Ever wonder how websites manage those pretty designs and pictures floating behind the text? It's all done through the magic of Cascading Style Sheets. CSS not only allows you to designate an image for your page's background, it also lets you tweak how the image is displayed so that you can get just the look you want.

The fundamental building block for your background image is, fittingly enough, the 'background-image' property. You use this property to tell your site where the image file is located, as follows:

body {
background-image: url ("image.gif");
}

That's all you need to do to place a background image for your web page. Of course, you'll probably want to customize how the image appears. Let's say you want your image to start at the top of the page but to be centered horizontally instead of left-aligned (the default alignment). In that case, you will want to add the 'background-position' property to your CSS rule:

body {
background-image: url ("image.gif");
background-position: center top;
}

When defining the 'background-position' property, the first value sets the horizontal alignment (left, center or right) and the second sets the image's vertical alignment (top, center or bottom).

Next, you decide that you want to stop the image from tiling (repeating itself) horizontally, although you do want it to tile vertically. It's time to bring out the 'background-repeat' property:

body {
background-image: url ("image.gif");
background-position: center top;
background-repeat: repeat-y;
}

Setting the value to 'repeat-y' tells the browser to tile the background image along the y-axis, aka vertically, but not the x-axis (horizontally), which is exactly what we wanted. If you wanted to tile it horizontally but not vertically you would use the 'repeat-x' value instead; if you didn't want the image to tile at all, give it the 'no-repeat' value. The default value is to tile the image both horizontally and vertically, so if that's the best choice for your image you don't need to set the 'background-repeat' property at all.

Finally, you can take a look at the 'background-attachment' property. By default, your image will scroll as the page scrolls, so if you are not repeating the image vertically and you have a long page your image will not extend to the bottom of the page. You can change this by setting the 'background-attachment' property to 'fixed,' which causes the background image to stay in the same spot on the monitor regardless of how the page scrolls. Now your background image rules will look like this:

body {
background-image: url ("image.gif");
background-position: center top;
background-repeat: repeat-y;
background-attachment: fixed;
}


If you want to keep your CSS rules as small as possible, you can combine all of your background values into one line by using the 'background' property, like this:

background {
url ("image.gif") repeat-y fixed center top;
}

When using the 'background' property you must list the values in a specific order:
[background-color (if used)] [background-image] [background-repeat] [background-attachment] [background-position]. You can leave out any value that you don't need, you just need to list any values that you do use in the proper order or the rule won't work.
This site needs an editor - click to learn more!

Add Using+CSS+to+Set+a+Background+Image to Twitter Add Using+CSS+to+Set+a+Background+Image to Facebook Add Using+CSS+to+Set+a+Background+Image to MySpace Add Using+CSS+to+Set+a+Background+Image to Del.icio.us Digg Using+CSS+to+Set+a+Background+Image Add Using+CSS+to+Set+a+Background+Image to Yahoo My Web Add Using+CSS+to+Set+a+Background+Image to Google Bookmarks Add Using+CSS+to+Set+a+Background+Image to Stumbleupon Add Using+CSS+to+Set+a+Background+Image to Reddit




RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the HTML Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 by Elizabeth Connick. All rights reserved.
This content was written by Elizabeth Connick. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.

g


g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor