Menu
I'm using the background-size property for a full width and height background image but having trouble getting it to fully cover in Chrome on a Nexus7 tablet in portrait view. It only covers the width and not the height i.e. there is about 200px of white space below it. However when I view the site in desktop Chrome (or anything else) and on a vertical monitor to emulate portrait dimensions it covers no problem.
Anyone have a solution?
CSS:
html { background: url(/images/post_bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/post_bg.jpg', sizingMethod='scale')"; } Portrait screen shot:
747
You need background-size:cover if you want to cover the whole area. The value 'contain' will just ensure that it all fits but will be smaller than the viewport unless by accident it happens to be the same aspect ratio.
Using CSS, you can set the background-size property for the image to fit the screen (viewport). The background-size property has a value of cover . It instructs browsers to automatically scale the width and height of a responsive background image to be the same or bigger than the viewport.
If you only provide one value (e.g. background-size: 400px ) it counts for the width, and the height is set to auto . You can use any CSS size units you like, including pixels, percentages, ems, viewport units, etc.
background-size: cover; cover tells the browser to make sure the image always covers the entire container, in this case html . The browser will cover the container even if it has to stretch the image or cut a little bit off the edges.
I believe you can fix it by defining the height of the html and body tags in the CSS, like so:
html{ height:100%; min-height:100%; } body{ min-height:100%; } hope this helps
175
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
