Stretch and Scale a CSS image Background - With CSS only

Question

Good day.

I always wanted to do this.

I want that my background image stretch and scale depending the Browser view port size.

I've seen some questions on SO that do the job, this One for example. Works well, but i want place the img in the background way, not with a image tag.

In that one is placed a img tag, then with CSS we tribute to the img tag.

width:100%; height:100%;

It works, but that question is a bit old, and states that in CSS3 resizing a background image will work pretty well. I've tried this example the first one but i didn't workout for me.

Does somebody know a good method to do it with the background image statement?

If its sounds confusing just ask.

Thanks

Answer 1

You want to achieve this just using one Image? Because you can actually make somewhat similar to a stretching background using 2 images. PNG's for instance.

I've done this before and it's not that hard. Besides I think stretching would just harm the quality of the background. And if you add a huge image it would slow down slow computers/browsers.

Answer 2

You can actually achieve the same effect as a background image with the img tag. You just have to set its z-index lower than everything else, set position:absolute and use a transparent background for every box in the foreground.

Answer 3

I've managed to get the answer my self.

I've used this code, that i mentioned in the question, and with it.

Original:

HTML

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

CSS

#background {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

.stretch {
    width:100%;
    height:100%;
}

I've just changed

position: absolute;
z-index: 0;

to

position: fixed;
z-index: -1;

That as produced the effect i wanted all along.

A background image that resizes to the browser viewport for any screen size, and when content doesn't fit the browser viewport, and the user needs to scroll down, the background image keeps fixed in the viewport. And the content is scrolled. Producing the effect that only the content is being scrolled.

Unfortunate that some browsers don't yet fully support CSS 3, because it seems that with CSS 3 this would be loot easier.

PS: I've just changed the z-index so that the background div tag stays behind the content.

Regards. Fábio Antunes

Answer 4

Thanx for sharing!

Answer 5

Wonderfull! I'm starting to get the hang of it thanks to you!

Answer 6

Thanks!

But then it was not working for Chrome and Safari browser (stretching worked, but hight of pics was only 2mm!), until someone told me what lacks:

*" try to set height:auto;min-height:100%; "

So change that for your height:100%; line, gives:

#background {

width: 100%; 
height: 100%; 
position: fixed; 
left: 0px; 
top: 0px; 
z-index: -1;}

.stretch {width:100%;height:auto;min-height:100%;}

Just before that newly added code I have this in my Drupal Tendu themes style.css:

html, body{height:100%;}

#page{background:#ffffff; height:auto !important;height:100%;min-height:100%;position:relative;}

Then I have to make a new block within Drupal with the picture while adding class=stretch:

< img alt="" class="stretch" src="pic.url" />

Just copying a pic with the editor in that Drupal block doesn't work; one has to change the editor to non-formatted text.

Answer 7

Hi - I got this thing (with Cybr's updates) to work just fine. It SCALES the image perfectly. No distortion.

BUT, my image isn't "computer friendly". I.e.: Not 1024 X 768 or even close to that. (Heck, my monitor has a wide screen, so it isn't either! Is anybody's anymore?)

Anyhow, this creates a problem inasmuch as, unless I size the window from the bottom up it ends up with a white "stripe" beneath it.

What I would REALLY like to do is have is for that white to be BLACK.

My "usual" BG color/text etc. code is like: ""body bgcolor="#000000" text="#fcba1e" link="#0000ff" vlink="#800080" alink="#ff0000"" (It won't let me add the arrows here.)

I've tried inserting this in various places with no success. Any ideas for a workaround would surely be appreciated !

Thanks ! Bill