Geek asks and answers

Css background image resize width height

I use this code from CSS tips and tricks to cover the background image. The problem is that it scales the image to fit the width and height, and changes the aspect ratio. I want the background image to be scaled to the full width of the screen, and then cropped only in height (starting from the top of the image, not in the center) to close the viewport. Thus, the aspect ratio of the image will be maintained.

The secondary problem that I am facing is that it does not work unless I use the full name 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;
}
+5
source share
3 answers

Instead

background-size: cover;

you will want to use

background-size: 100% auto;

Cover , , , , . .

+12

cover. , , , , , , , , .

(, ?), center bottom center center.

100% , Nit, , / html , , , , , , ...

fqdn, / . css, , css, bg.jpg.

index.html
main.css
images/
    bg.jpg
+1

JS. , CSS .

- :

div

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

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

, , 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");

, . CSS, ,

0

More articles:


All Articles