May 26, 2010 by 1 Comment

How Do You Put an Image as a Background

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

Filed Under: Web Design Tagged With: , ,
May 24, 2010 by 2 Comments

How Do I Add a Background Color to a Web Page


So you want to jazz up the background of your web page instead of using the default white color that most websites use. There are several ways to achieve this. One way is to simply change the background color and the other is to use a background image.

How to put an image as a background on a web page

If I want to change your web page background to grey use this html code:


<body bgcolor="#CCCCCC"></body>

You can use any color in place of #CCCCCC or even use the words green, red, etc.

Cascading style sheet
You can also use a cascading style sheet (CSS) and place it between the head tags. This eliminates the need to use the code above, have less code clutter and speed up the load time of your web pages.


<head>
<style type="text/css">
<!--body {background-color: #CCCCCC;}-->
</style>
</head>

Inline CSS
This is another method to add a background color. Instead of using an external style sheet placed between the head tags as shown above, code it directly into your html like this:


<body style="background: #CCCCCC;">

Inline CSS allows you to style any HTML element. For example if I want to add a background color to a paragraph use this code:


<p style="background: black; color: white;">black background with a white font color</p>

black background with a white font color

Tables
You can add a background color to tables using this code:


<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#000066">
  <tr>
    <td></td>
  </tr>
</table>

This will give you a table of 600 pixels with a dark blue background.

Tip
When using background colors for your web pages make sure you use contrasting colors (ie white on black or black on white) so your website visitors can easily read your content.

My next article will discuss How To Add a Background Image to a Web Page
****************
Get a free evaluation of your website by visiting:
Free Website Evaluation

Filed Under: Web Design Tagged With: , ,