I’m designing a background image for a website that goes flush to the top and has a bottom. Unless I make the tables a certain height it does not show the bottom of the background image. That’s because I am making the background image a certain height in pixels. And that means I have to have each page that very height. Is there a better way around this? I don’t want to get deep into CSS at this point because I want to get this project done and CSS will be too much of a learning curve.
A background image has no mass. It doesn’t affect the size of any container. Fixed height is a no-no in Web design. Trust me, it doesn’t work out very well.
Its best if the background image repeats or fades out.
You are probably looking at it from the wrong angle and do not know what height the visitors’ web browser will be either. You cannot really safely set explicit heights on a table for the background like was mentioned. Although you think CSS is a steep learning curve it is probably worth the extra effort to save you time having to relearn how to do things the correct way in the future.
I assume you are misusing a table at 100% height of the body of the page?
it sound slike you arent using a background image at all, but rather a foreground image. if its in the background it wont affect the table size at all.
A background image can be independent of any tables or other containers. Sounds like you should just attach the image to the Body element.
In your Head section, link to to a CSS sheet like so:
<link type="text/css" media="all" rel="stylesheet" href="/css/styles.css">
In the stylesheet, put something like this:
body {
background: url(/images/background.jpg) no-repeat scroll 50% 0;
}
It’s as simple as that. As much of the background image will show as the browser width/depth allows.