ansaurus

Question

CSS Image Resizing

Answer 1

+1 A:

You can use the CSS3 property of background-size:100% but the support for this property is not across the board yet and won't work in older browsers. To achieve what you want you need a bunch of hacks to get it to work. There are a number of blogs like this one that will show you what you need to do. I don't recommend doing this since if you have a big image/slow connection you will see the image load. If the image isn't the best quality then it won't look good all stretched across a screen or in a different resolution.

amurra 2010-07-20 02:53:22

I don't know why, but neither of the examples works for me... Thanks anyway.

mRt 2010-07-20 03:05:26

Answer 2

+2 A:

add the background-repeat property.

finished code should look like this:

     body {
     position:absolute;
     background-image: url(art/c11.jpg);
     background-size:100%;
     background-repeat: no-repeat;
     width:100%;
     height:100%;
     }

Conceited Code 2010-07-20 02:53:24

I don't know why, but neither of the examples works for me... Thanks anyway.

mRt 2010-07-20 03:04:19

just updated the code with amurra's suggestion. Does it work now?

Conceited Code 2010-07-20 03:06:48

Nope. In fact, with that code, it does not display anything.

mRt 2010-07-20 03:10:34

What browser are you using?

Conceited Code 2010-07-20 03:14:01

I am on Firefox 3.6.6

mRt 2010-07-20 03:19:45

Answer 3

+2 A:

I dont think there is a way to stretch or control the size of a background image using CSS. However, you could use the background-position, background-attachment and background-repeat porperties to achieve an alternative result..

or you may use some JavaScript putting Image into a lower z-index layer and set the layer as you backgournd, however that is a little bit Hacking there

D.J 2010-07-20 02:56:32

Answer 4

+2 A:

If you're going to make this work cross browser, you're better off putting an image on the page and then wrap all your content in a DIV that's laid on top. E.g.

CSS

#background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#content {
  position: relative;
  z-index: 1;
}

If you plan on supporting IE6, then add this snippet:

<!--[if IE 6]>
  <style type="text/css">
    html {
      overflow-y: hidden;
    }

    body {
      overflow-y: auto;
    }

    #background {
      position:absolute;
      z-index:-1;
    }

    #content {
      position:static;
    }
  </style>
<![endif]-->

HTML

<img id="background" src="art/c11.jpg" alt="" />

<div id="content">
  Your content
</div>

Code in action.

Gert G 2010-07-20 03:15:17

ansaurus

tags:

views:

answers:

CSS Image Resizing

related questions