Question

Here is my website

http://albuquerqueautomotiveservice.com/

but I coded it in my old computer and its monitor is rather squared then widescreen.

I just noticed in my laptop the right side of the page is gray.

How can I make sure it stretches only horizontally?

  body {
        background:#333 url(bg.jpg) no-repeat;
        width: 100%;
        font-family:Arial;
        cursor: url(images/wrench.cur);
        }

Answer 1

That’s what background-size is for:

background-size: cover;

---

If you support IE < 9, you’ll have to use their proprietary filter:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/path/to/bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/path/to/bg.jpg', sizingMethod='scale')";

---

Another option for IE would be to have the image as an actual img tag in your HTML:

<img src="/path/to/bg.jpg" class="page-background" />

Then use this piece of code in your CSS:

.page-background {
    width: 100%;
    height: auto;
    z-index: -1;
}