CODEWITHSUNDEEP
css
markhorrocks
markhorrocks

Reputation: 1408

css background image resize width crop height

I am using this code from css tips and tricks to cover a background image. The problem is that it rescales the image to fit both width and height and changes the aspect ratio. I want the background image to rescale to full screen width and then crop the height only (starting from the top of the image, not the center) to cover the view port. In this way, the image aspect ratio will be maintained.

A secondary problem I have is that it doesn't seem to work unless I use the FQDN for the image instead of just the url below.

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

Upvotes: 8

Views: 39628

Answers (3)

Etheryte
Etheryte

Reputation: 25310

Instead of

background-size: cover;

you will want to use

background-size: 100% auto;

Cover will stretch the image to the smallest size such that both its width and its height can fit inside the content area, hence your issue. See more about that over here.

Upvotes: 17

hasanyasin
hasanyasin

Reputation: 6253

Image aspect ratio is not changed when you use cover. However, I believe what you want is to fix bottom of the image, since you told that you want it to be cropped from top, not center, which I thought you wanted to say not from top and bottom.

If you want to keep the bottom at the bottom, (maybe a grassland with an avoidably large sky?) then you will need to change positioning to center bottom from center center.

If you make it 100% auto as Nit suggested, then, on a window where height/width ratio of the html element is larger than your image's, you will see empty space at the top which can be what you wanted especially in case you are using an image that fades into the same color at top...

For your second problem, it is not fqdn, it is the relative/absolute referencing of your path. According to your css, there should be an image folder where your css file is which has a bg.jpg in it.

index.html
main.css
images/
    bg.jpg

Upvotes: 2

DavidVII
DavidVII

Reputation: 2283

I would use JS for this instead. CSS doesn't seem to handle aspect ratios very well yet.

Try out something like this:

First, create a div and put an image in it

<div class="big-image">
   <img src="path.jpg" width="1000" height="1000" alt="whatever">
</div>

Then do this in your CSS:

.featuredImage img {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -10;
}
/* this class will be added via JS */
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

And finally, your JS

  var theWindow = $(window),
  $bg = $(".big-image img"), // Use your image selector here.
  aspectRatio = $bg.width() / $bg.height();

  $bg.removeAttr('width');
  $bg.removeAttr('height');

  function resizeBg() {
    if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
      $bg
        .removeClass()
        .addClass('bgheight');
    } else {
      $bg
        .removeClass()
        .addClass('bgwidth');
    }
  }
  theWindow.resize(function() {
    resizeBg();
  }).trigger("resize");

Let me know if this makes sense. Not exactly just CSS I know, but it's a solution

Upvotes: 0

Related Questions