Fixed image backgroun problem

Question

Busch 0 Newbie Poster

12 Years Ago

I've been using a fixed image background, if I can call it that, on my web folio. I'm using a image that is big enough to look good on even the biggest screen, and coding it so that the whole picture is always in the browser window, no matter the screen size. Like this;

CSS:

#background {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    text-align: center;
}

HTML:

<div id="background"><img width="100%" height="100%" src="http://stinebusch.com/images/UNIVERStestnestenHEL.jpg" /> </div>

But I have an issue with it, as I've discovered that the image gets very stretched when I pull the browser window, as the image always fills the whole window, no matter height or width. I want it to work like on this site; http://www.mychemicalromance.com/news, where the image looks nice in all screen sizes, yet it doesn't stretch if you for example pull the window to a very narrow height.

Does anyone know how I could code that? Thanks!

web-design

2 Contributors
5 Replies
101 Views
9 Hours Discussion Span
Latest Post 12 Years Ago Latest Post by Busch

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Felixius 0 Newbie Poster · Answer 1 · 2011-09-09T11:39:33+00:00

Hi there Busch,

I happen to be working on an article for this!

This should help you a bit - at least get on the right track.

Here is the html

<body>
<div id="background-image">
<img src="seal.jpg">
</div>
</body>

Here is the css

body{
width:100%;
height:100%;
margin:0;
	}
div#background-image {
position:absolute;
	height:100%;
width:100%;

	}	
div#background-image img {
	max-height:auto;
max-width:100%;
margin: 0 auto;
overflow:hidden;
	
}

Now I prefer to put an image in the actual background, as this will cover the whole screen no matter what.

html

<body>
CONTENT STUFF GOES HERE
<div id="background-image">
</div>
</body>

css

body{
width:100%;
height:100%;
margin:0;
background:#381700;
	}
div#background-image {
position:absolute;
top:0;
left:0;
	height:100%;
width:100%;
	background:url(YOUR IMAGE HERE.jpg) center center fixed no-repeat ;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: cover;
background-size: cover;
z-index:-10;
	}

No stretching! No warping! And 100% UV protection!

Felixius
(GAWD I HOPE IT WORKS! LOL)

EDIT: Forgot, there is an article that covers issues for IE8 and older.

http://www.pziecina.com/design/turorial_demos/resize_background.php

Busch 0 Newbie Poster · Answer 2 · 2011-09-09T12:59:13+00:00

Thanks! But that didn't really work too well.

On the first, my header image and wrapper background disappeared, there was a gap above the background image and it only repeated once.

In the second, the image also only repeated once, and though it looked nice when I minimised the window, the whole image got _huge_ in opera.

Felixius 0 Newbie Poster · Answer 3 · 2011-09-09T13:49:06+00:00

Thanks! But that didn't really work too well.
On the first, my header image and wrapper background disappeared, there was a gap above the background image and it only repeated once.
In the second, the image also only repeated once, and though it looked nice when I minimised the window, the whole image got _huge_ in opera.

Hi there Busch,

I think I stuffed up the css coding of the 2nd one...

body{
width:100%;
height:100%;
margin:0;
background:#381700;
	}
div#background-image {
position:absolute;
top:0;
left:0;
	height:100%;
width:100%;
	background:url(YOUR IMAGE HERE.jpg) center center fixed no-repeat ;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
z-index:-10;
	}

I think this will help.

As far as I can tell, the 2nd solution 'should' match the example link you provided.

Can you help me here? You said that the image ONLY repeated once. What does this mean? The example site you provided had a single image that was resizing itself without distortion. It did not repeat.

If you are wanting some sort of repeat, I guess you could change the css code to suit.

background:url(YOUR IMAGE HERE.jpg) center center fixed no-repeat ;

to repeat or repeat-x or repeat-y.

I am sure that there will be a certain amount of tweaking to get it to work perfectly for you. I hope that you are able to get the job done.

^_^

Felixius

Busch 0 Newbie Poster · Answer 4 · 2011-09-09T14:23:42+00:00

I tried that now, and it's still weird in Opera.

I wrote the wrong thing there, I didn't mean repeat really. What I was thinking of was that when I have pages with much content, so I have to scroll, the image isn't "fixed", it's just white underneath where it ends. I attached a screenshot of that so you can see what I mean?

Thanks for the help, still :)

Busch 0 Newbie Poster · Answer 5 · 2011-09-09T14:26:57+00:00

Okay, I changed position to fixed in the background-image div, and that worked. The background looks grand now too, nothing stretches. Thanks!

But would you have any idea why the image gets so weird on Opera? It seems like it's zoomed in a hundred times.