Hi,
I have strange problem with background image of beer in a glass and I don’t know why. Well, it must be something with divs and length of content, but don’t know how can I solve this. On certain pages, like on link below, is image being cut in half. I think there’s simple solution, but I can’t see it clearly - maybe I’ve been looking at that beer too long haha. So any help would be appreciated.
http://www.spletopia.com/haler/zasebni-gurmanski-veceri.html
Kind regards
It’s a background on the #wrapper div, so will only be as tall as that div. Perhaps put that image on the <body> element instead.
Well, I actually have in body another background - the brown image of background. On top of that, I have image of beer in glass, which is positioned on left side. Can I have two images as background in one div? As I know I can’t have that?
Yes, with css3, you can have 2 (or more) images in one background. Something like this should do it:
.container {
background-image:url(image1.png),url(image2.png);
background-position:x1 y1, x2 y2;
background-repeat:no-repeat;
}
That’s great… but sadly I didn’t get it to work. Is having two background images supported by IE 7-9? Well, I tried with this css, but it doesn’t work:
body {
background-attachment: fixed, fixed;
background-image: url(../images/background.jpg), url(../images/pivo.png);
background-repeat: repeat-y, no-repeat;
background-position: center top, -550px 50px;
}
Oh, you need to add images in other order… “The the first value in the list represents the top layer (closest to the user), with subsequent layers rendered behind successively.” - http://www.css3.info/preview/multiple-backgrounds/
Just need to see on which browsers it works…
It works on browsers from current version down to (tested to mentioned versions):
IE 9 (not working on IE 7 and 8)
Firefox 10
Chrome 23
Safari 5.1
Android Tab 3.2
iPAD (OS) 5.1
Is there any way to fix this for IE 7 and 8? The problem is that many users still have IE7 or IE8 on their computers. I would add that fix in special css file that will be for IE 7/8 only.
Yeah, older versions of IE are hopeless. Another option is to wrap another div around everything and set it to height 100% (there are tricks with that, though) and place the bg on that. Or heck, you could place the image in the HTML and position it anywhere you like, though I prefer not to do that for decoration.
With the help of CSS PIE you can use multiple backgrounds in IE<9 for those who have js enabled (but simply provide some graceful degradation in css for those who don’t). Just don’t use the current 2.0 beta version because multiple backgrounds are buggy in IE7. CSS PIE has saved me lots of troubles many times!
HI,
Just use an inner wrapper like this and it will work back to ie6.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
height:100%;
margin:0;
padding:0;
}
body { background:url(http://www.spletopia.com/haler/images/background.jpg) repeat-y fixed 50% 0; }
.whole-page-wrapper {
min-height:100%;
background:url(http://www.spletopia.com/haler/images/pivo.png) no-repeat fixed -550px 50px;
}
* html .whole-page-wrapper { height:100% }
</style>
</head>
<body>
<div class="whole-page-wrapper"> </div>
</body>
</html>
Hi guys,
Thanks for help. I actually didn’t check forum posts, as I didn’t get email notifications about other replies (must check settings for that in my profile), but I’ve managed to fix this by giving “min-height: 987px” in my css. I see Paul suggested almost same thing with “height: 100%”, so thanks for that Paul.
@ Lemon Juice: I wouldn’t like to use js, as some users might have disabled js… not many, but some might have. I will look at that today or tomorrow. Thanks.
I would also like to say that I like this forum a lot, especially you guys who are active in “CSS & Page Layout” section. You are always ready to help out and are also capable to help - I will definitely stick to sitepoint forum 
Take care
Well, the js library is not actually a requirement but a convenience, in that it will scan your css and apply the IE proprietry filters for you. But you can get background images in IE7/8 to work without js by using MS filters in your css. It’s a bit more work but can be done. But even if you use a js library like CSS Pie I wouldn’t worry - the percentage of IE7/8 users with js turned off is very small and soon will die out, and if you set an alternative background (even solid colour) so that the page is readable for them then I think it’s really good enough.
You’re welcome
I should point out that the difference with my code is that you will never get an unwanted vertical scrollbar as the image will always display to the bottom on short viewports and in full on tall viewports whereas as a pixel height means that the viewport will always be 987px tall even if a user has it closed smaller and a vertical scrollbar will appear. It’s often seen as a sign of bad coding if you have a scrollbar when one is not needed unless of course you think it important that users can scroll to see the rest of an image.
However sometimes just setting a min-height in pixels is the easiest option as you don’t have to change the html as in my version.