Best IT Recipes

Background-size: cover does not work in portrait on Android tablet

I use the background-size property for a full background image of width and height, but it has problems with its full coverage in Chrome on a Nexus7 tablet in portrait mode. It covers only the width, not the height, i.e. Below 200px space below. However, when I browse the site on the Chrome desktop (or something else) and on the vertical monitor to emulate portrait sizes, it does not cause problems.

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 Screenshot:

+43
android google-chrome css3 background-size
Feb 14 '13 at 13:34
source share
7 answers

I believe you can fix this by specifying the height of the html and body tags in CSS, for example:

 html{ height:100%; min-height:100%; } body{ min-height:100%; }

hope this helps

+80
Oct 18 '13 at 14:47
source share

I know it has been a long time since the question was asked, but I just found the answer that I think. For me, the background size: the cover works in Android Browser and Android Chrome if you omit the “fixed” in the CSS reference instruction. After some tests, it works for me, making the background image div:

 #yourDivSelectorHere { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 0; background-image: url(/img/backgrounds/1.jpg) ; background-repeat:no-repeat; background-position: center center; /* background-attachment: fixed; removed for Android */ -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;

}

The DIV itself is fixed in position (as opposed to a background image), has a width and height of 100%, and is located at the back of everything. This is a little extra effort, and not just adding a background image to HTML or BODY, but for me it works in all browsers that I have tested so far (FF, Chrome, IE8, IE9, Safari), on iPad2 and Android Chrome and Android -browser.

+27
Oct. 25 '13 at 16:02
source share

I will provide the solution I found if someone comes across this in the future. Instead of using a background image, I used <img> :

HTML:

 <img id="full_bg" src="/images/post_bg.jpg" alt="Post your project on CustomMade">

CSS:

 #full_bg { height: auto; left: 0; min-height: 100%; min-width: 1024px; position: fixed; top: 0; width: 100%; } @media screen and (max-width: 1024px) { #full_bg { left: 50%; margin-left: -512px; } }

This worked cross browser and on mobile devices. I found a solution here .

+6
Feb 15 '13 at 12:29
source share

Well, I can come up with another solution: I added it to the body, and all you need to take care of is that the background: fixed binding is the last rule:

work:

 body { height:100%; width:100%; background-size:cover; background-repeat:no-repeat; background-position: center center; background-attachment:fixed; }

does not work:

 body { height:100%; width:100%; background-size:cover; background-attachment:fixed; background-repeat:no-repeat; background-position: center center; }

In fact, it’s very touching that telephones, in general, are a bit buggy ...

+2
Sep 01 '16 at 17:52
source share

Use an HTML background instead of a body and give "height: 100%"

 html { height:100%; background: url(bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
+1
Apr 20 '17 at 18:44
source share

I figured out other solutions using the jquery stuff bit. The correction is based on the assumption that we are using the image in a landscape dimension / aspect ratio for the background.

step1: compare "window height" and "page content height"

step2: if "window height" is less than "page content height"

step3: apply this to the body tag

HTML {

 <body style="background-size: auto 'page content height'; background-attachment: scroll;">

}

script

 var wHeight = $(window).height(); var bodyHeight = $('page-content-element').height(); if(wHeight < bodyHeight){ $('body').attr('style', 'background-size: auto '+ (bodyHeight*1.1) +'px;background-attachment: scroll;'); } else{ $('body').removeAttr('style'); }

cause this to load the page and resize the window

0
Sep 24 '14 at 6:28
source share

This solution worked for me and for Android.

 html{ height:100%; min-height:100%; } body{ min-height:100%; }
-3
Mar 19 '15 at 15:28
source share


More articles:


All Articles