One of the great and easiest ways to spruce up your web pages is to add a background image. It can be applied to the background of web pages, paragraphs, headings, text, and footers, etc. Cascading style sheets (CSS) enables you to control all the design elements on your website without affecting the content. It works nicely in the background.
How to style your web page with a background image
When using a background image for a web page make sure you also add the code for a background color as sometimes the image takes time to load. The color should be the same or close to the image color so there will be a smooth transition.
Here’s the CSS code I used to create a blue gradient background for: positivecontracting.com
body {background-color: #05366E;
background-image: url(images/bg_blue_outer_1500.jpg);
background-repeat: repeat-x; }
I created a gradient image 1500 pixels long and 5 pixels wide and tiled it horizontally. To achieve this I used the repeat-x property to make the image span left to right across the whole page.
By default, the background-image property repeats an image both horizontally and vertically however most times you need to define the background properties.
Background Properties
This determines how a background image will be repeated using the properties:
repeat
repeat-x
repeat-y
no-repeat
inherit
Examples
Header background
Here’s the CSS I used for the header background in positivecontracting.com
#header{margin: 0; padding: 0; background-color: #FFFFFF; height: 180px;
background-image: url(images/header-positive-contracting.jpg);
background-repeat: no-repeat;}
This header banner has a height of 180 pixels with white background that is not repeated across the page. No-repeat means you’ll only see one instance of the image.
How to create 3 column web page using a background image
In this example I created a thin image background 1000 pixels wide and 10 pixels long that repeats vertically (background-repeat: repeat-y) down the page to create 3 columns..blue, white, blue. This enabled me to easily add content to each of these 3 columns using CSS.
#wrapper{width: 1000px; background-color:#FFFFFF;
margin-left: auto;
margin-right: auto;
padding: 0px;
background-image: url(images/bluebg.gif);
background-repeat: repeat-y;}
How to position a background image
You can use CSS to position an image in the background of your web page using the property…background-position.
Example:
Here’s the CSS code I used to position the World Impact Christian Center Logo in the center of this page:
#topline{
height: 125px;
background-image: url(images/logo.jpg);
background-repeat: no-repeat;
background-position: 200px 5px;
border-bottom-width: 760px;
border-bottom: 20px solid #6A8FB4;
}
The image is positioned 200 pixels from the left and 5 pixels from the top.
How to style your paragraph with a background image
The first paragraph of this article contains a gradient image in the background that repeats horizontally. This enables you to add nice effects to any paragraph. Here’s the sample code using inline CSS:
<p style="padding-left: 5px; background-image: url(images/gradient.jpg); background-repeat: repeat-x;">
Adding a background image within your html helps draw attention to specific areas on your web page. Have fun with it and let me know how you get on by leaving adding your comments below.
Related Articles
http://www.w3schools.com/css/css_background.asp
How Do I Add a Background Color to a Web Page
****************
Get a free evaluation of your website by visiting:
Free Website Evaluation
