SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background image is cut in half (responsive pages)

    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/zaseb...ki-veceri.html

    Kind regards

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,535
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Yes, with css3, you can have 2 (or more) images in one background. Something like this should do it:

    Code:
    .container {
        background-image:url(image1.png),url(image2.png);
        background-position:x1 y1, x2 y2;
        background-repeat:no-repeat;
    }

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    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; 
    }

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ninostar View Post
    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.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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.

  9. #9
    SitePoint Guru bronze trophy
    Join Date
    Dec 2003
    Location
    Poland
    Posts
    930
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    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!

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Just use an inner wrapper like this and it will work back to ie6.

    Code:
    <!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>

  11. #11
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  12. #12
    SitePoint Guru bronze trophy
    Join Date
    Dec 2003
    Location
    Poland
    Posts
    930
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ninostar View Post
    @ 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.
    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.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ninostar View Post
    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.
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •