0

I used this post Stretch and scale a CSS image in the background - with CSS only to figure out how to stretch my background image to fit the size. I'm using background-size: cover;

But I'm afraid, that's not quiet what I need. I can't figure out (a nice way) how to do it: Assume that I have an image with an really wide resolution like 3840px x 1024px

Requirements:

  1. The Image is centered
  2. Viewport width < 1280px: Fixed width of 1280px, horizontal scrollable Viewport width >= 1280px: no horizontal scrolling, show more of the background image
  3. If the content of the site is really long (above the 1024px) I want to add a color above the image like light blue, if the upper part of the image is sky so it seems like the bg-color is part of the image.

Current implementation (which sucks): The image is cut into 3 even pieces. The middle part is the background of the content section. If the screen increases in width, 2 divs left and right of the middle part will be shown, they have the left and the right part of the image as background). The size (height and width) of this side divs is calculated with js everytime the windows is resized. The offset of the background images works in Chrome but in Firefox there is a issue with the left div.

The code for this is:

var PageWidth = 1280;
var SideImageWidth = 1280;
function calculateImageSet(){

    var bodyWidth = $('body').width();
    var fillerSize = Math.floor((bodyWidth - PageWidth)/2);

    if(bodyWidth < PageWidth){
        $('#fillerLeft').hide();
        $('#fillerRight').hide();
    }
    else{
        var imageOffset = SideImageWidth - fillerSize;
        var mainHeight = $('#main').outerHeight();
        $('#fillerLeft').width(fillerSize).height(mainHeight).show();
        # Doesn't seem to work
        if($.browser.mozilla){
            $('#fillerLeft').css('background-position', '-'+imageOffset+'px 0px');
        }
        $('#fillerRight').width(fillerSize).height(mainHeight).show();
    }
}

Is there a nice way to do this? Without js?

If you didn't understand any of the requirements, please ask.

Thank you

Edit: I've got a (nearly working) approach:

#main{
    background-color: #d4eaff;
    background-image: url('forest-wide.jpg');
    background-repeat: no-repeat;
    background-size: auto 1280px;
    background-position: center top;
    min-width: 1280px;
}

If the content is not higher than 1024px this is nice, but when it is over 1024px it adds the blue to the bottom so I have to change the background-position to center bottom at this point.

Community
  • 1
  • 1
Bernd Strehl
  • 2,852
  • 4
  • 24
  • 43

1 Answers1

2

well bro if what you are trying is to get a fully stretched background image i guess this would help you out .... purely CSS based works in Safari 3+,Chrome Whatever+,IE 9+,Opera 10+, Firefox 3.6+

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
Vicky
  • 694
  • 1
  • 8
  • 23
  • thank you this is a nice solution, but it doesn't scale in width, does it? – Bernd Strehl Feb 25 '14 at 09:43
  • @Strernd i think you would get a perfectly scaled image ...... did you try it out what did you get as a result ....? – Vicky Feb 25 '14 at 09:49
  • I let my co-worker try this on a bigger screen, I just tried it with zooming before. If you have a really wide resolution the image becomes wider, this is exactly what I wanted. Except you scroll over the image and dont a blue color to the top. But i really like this solution. Thank you! – Bernd Strehl Feb 25 '14 at 09:55