CODEWITHSUNDEEP
cssbackground-image
lbholland
lbholland

Reputation: 83

full screen background image (sort of) - without cropping?

My client wants what may in fact be impossible - they want a full screen background image that doesn't crop, and that retains its dimensions. They are willing to accept white space, but they want the image to fill the screen as best it can without cropping on any axis. I was able to find nice scripts that achieve true full page backgrounds, but they won't accept any cropping of the image. Any ideas?

Upvotes: 0

Views: 1270

Answers (2)

Lee Pender
Lee Pender

Reputation: 11

html:

<img id="bg" src="whateves.jpg"/>

you might want to center the image in css

#bg { display:block; margin:auto; }

using jquery:

$(window).load(function(){
      var windowRezize = function() {
          var windowHeight = $(window).height(),
              bg = $('#bg'),
              bgHeight = bg.height();

            console.log(windowHeight);
            console.log (bgHeight);
          bg.height($(window).height());
          bg.css('opacity', '1');
      };
      windowRezize();
      $(window).resize(function(){
          console.log('resized');
          windowRezize();
      })

  });

Upvotes: 1

victoroux
victoroux

Reputation: 286

This is not impossible! You can totally do this. Use JQuery to find the height and width of the browser viewport and voila! Set background image to that size. If you need to maintain aspect, use a JQuery algorithm for width/height, use that ratio to benchmark against the ratio of the actual dimensions and if it's higher/lower set the height/width of the background image to 100% and the other dimension to whatever the actual ratio would calculate it to be.

If your client doesn't care about scroll bars you can follow this guide under the third attempt: http://css-tricks.com/766-how-to-resizeable-background-image/ And set the minimum height of the html/body element to whatever it needs to be according to the width of the background image. I hope this all helps you get ideas for what to do.

Upvotes: 0

Related Questions