How do you get background images on JUST the right and left side of a webpage using HTML?

Question

So I'm doing this project for Webpage Design at my school...i know quite a bit of HTML, but I can't figure this out. I want a background on just the left and right side of my page with black in the middle so it's easier to read my text and it looks more presentable. what are some ways that i could do this? try to make it easy as possible. thanks :]

Answer 1

The simplest solution I can think of is to use one image. Create an image the width (and possibly height) of your page. If you want the background black, make your image black. Then paste your two images on the left and right.



[In the following examples I've used an embedded stylesheeet. This is to reduce the complexity of the example. It would be better to place the styling in an external stylesheet, but as you "know quite a bit of HTML" I assume you know how to do this.]



Here is an example of using one background image (as above). The great advantage is that it is all done with styling. No need to add extra html markup (ie extra tags).




"http://www.w3.org/TR/html4/loose.dtd">

Background

As this is a school exercise I'll leave it to you to figure out what all this does. Try taking out one item of styling at a time and see what happens.



Here is a two image solution. Note the extra

s required to put the background images on.

Background

For more on the div tag see: http://www.html-tags-guide.com/html-div-tag.html

Answer 2

Josh, we might have a lot to talk about.



You need to use CSS for this. HTML wasn't originally designed to work with background images, so it's support is limited, you should use CSS because it's a styling language, perfect to make background images.



What you need is a CSS similar to:

html {

    background: url(background-image);

}



body {

    background: white;

    margin: 8px auto;

    width: 80%;

}



Where background-image is the image's file name. I assumed that your image was white, so I didn't give it any text colour or a backup colour.



You link it to your html, by placing a link element within the head, such as:





Where stylesheet.css is your CSS file.



If you wanted to do this using just transitional HTML, it would require a few layout tables, which are actually an abuse of HTML ^_^;



If you need any more help, please email me.



---



To the second poster: Divisions (divs) are basically meaning-neutral block elements in HTML terms (or stylistic paragraphs in DSSSL terms), so using a division in or outside of an element that doesn't need it is kind of redundant.

...

is usually redundant, you should only use one level-1 heading per page, so it's unnecessary.

is usually redundant, because you have two elements in an HTML document, that contain the main content (html and body) so a third one is usually unnecessary.



Using inner divisions and division wrappers is really a complicated solution for a complicated problem, and using it when you don't need it could lead to laziness.

Answer 3

To be totally up to date you need to use DIVs. First create a DIV for your header spanning the entire width, then create two DIVs underneath it side by side (float one left if needs be). Give these DIVs either IDs or classes, then assign the class/ID background properties in your style sheet.



Try copying and pasting this source (from a Dreamweaver template) into your HTML editor and have a look at it: