HTML Forum

**Elly** · 08-15-2006, 06:51 AM

I didn't know if this belonged in the CSS forum or here, sorry!

I know different size monitors have an impact on how a webpage can look.
For example, on my monitor it comes up like this:

But on a friends monitor it comes up like this:

As you can probably tell the red/black image is the background image and I've got this as coding:

Code:

<style type="text/css">

.extra{
background-repeat:no-repeat
}
</style>

<body background="http://img125.imageshack.us/img125/2104/hospitalcopyjh5.jpg" class="extra" bgcolor="#120404">

*bg color= the black, which you can see a lot of on my friends screenshot.

Thing is though, I don't want the plain black, I want the whole background image to go across.

Is there a code for this? Or do I need to make the background image bigger? Do you suggest a size?

Thanks!

**Coulix** · 08-15-2006, 07:05 AM

A common problem

When i run into this problem i either accept that there are people out there with 50 inch monitors, or just center the page so that it looks good in most monitor resolutions.

You dont really want anyone to see the page too large for their view, gives a very bad impression.

As a rule of thumb, i usually make my site fit nicely for 1024x768 or 1280x1024, which are the more common resolutions these days.

An alternativ solution could be to use a design that streches over the whole screen, and have center graphics that looks nice even if the site is streched or minimalized. A friends website is a good example if you look at his header and try to resize the browser window, gives you an idea of what i mean.
.:: Screaming Art Designs ::..

Good luck whatever you choose

**Elly** · 08-15-2006, 07:47 AM

I tried centering the image but it left a large black space at the bottom, but that's okay. Heh.
I'll take into account your rule of thumb, maybe it will become my rule of thumb also!
With that layout I didn't want to redo it all again so I centered it, kept the black background and made the image blend in into it by having a black/red gradient at the edges. Looks much better than it did!

Thanks for your help it's greatly appreciated.

**Oneway** · 08-15-2006, 08:30 AM

For a sleazy solution:

CSS:

Code:

html, body {
  padding: 0px;
  margin: 0px;
}
#bglayer {
  position:absolute;
  z-index:1;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
}
#bglayer img {
  width: 100%;
  height: 100%;
}
#content {
  position:absolute;
  z-index:2;
  top:0px;
  left:0px;
}

and the HTML that goes with it:

Code:

<html>
  <body>
    <div id="bglayer">
      <img src="path/to/bg/img.jpg">
    <div>
    <div id="content">
       All page content goes here
    </div>
 </body>
</html>

**LadynRed** · 08-16-2006, 01:55 PM

You don't want to us position: absolute. For one it's not necessary, and 2 it can cause many other problems.

You set the bg to 'no-repeat', so, of course, it's not going to. It's a problem when you use a large single graphic for a background. Either make the bg so that you can tile it and re-think the other elements (the needle etc) and place them independently, or make the background itself much wider and longer. I would do the former, as making the bg image bigger will up your page weight considerably.

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!