Development issue/problem:
I use the full width and height background size property, but I have trouble getting the full screen in Chrome on a Nexus7 tablet in portrait mode. It only covers the width, not the height, which means there is about 200px white space underneath. However, when I view the site on a Chrome desktop (or other) and on a vertical screen to mimic portrait mode, there is no problem at all.
Does anyone have a solution?
CSS :
html {
– background: url(/image/post_bg.jpg) fixed center without repetitions;
– background size: cover;
– background size: cover;
– background size: cover;
– background size: cover;
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=https://dnmtechs.com/images/post_bg.jpg, sizingMethod=’s scale’);
}
Screenshot :
How can I solve this problem?
Solution 1:
I think you can solve this problem by setting the height of the html and body tags in the CSS:
html{
height: 100%;
min height: 100%;
}
body{
min height : 100% ;
}
the hope is that it will help
Solution 2:
I know the question was asked a long time ago, but I think I just found the answer.
For me the background size works: the cover works in the Android browser and Android Chrome if you omit the corrections of the CSS instructions for the background.
After a few attempts it works for me by making the image the background of the IVD:
#yourDivSelectorHere { width
: 100%; height
: 100%; position
: fixed;
top: 0;
left: 0;
index z: 0; background
: url(/img/backgrounds/1.jpg); wallpaper
– repeat: no repeat; wallpaper
: centered; wallpaper
/*: fixed; taken for Android */
– background size: cover;
– background size: cover;
– background size: cover;
– background size: cover ;
}
The IVD itself is fixed in position (in contrast to the background image), has a width and height of 100% and is placed at the end of everything.
It’s a bit more than just adding a background image in HTML or BODY format, but for me it works in all the browsers I’ve tested so far (FF, Chrome, IE8, IE9, Safari), on iPad2 and in the Chrome and Android browser.
Solution 3:
I will bring you the solution I found in case anyone encounters this problem in the future. Instead of using the background image, I got error ! File name not specified. : or https://bestkayak.us/
HTML :
CSS :
#full_bg {
height: car;
left: 0;
min. height: 100%;
min. width: 1024px;
position: fixed;
height: 0;
width : 100% ;
}
@screen and (maximum width: 1024px) {
#full_bg {
left: 50%;
left margin: -512px;
}
}
This worked on both browsers and mobile devices. I found the solution here.
Solution 4:
Well, I can think of another solution:
I’ve added it to the body, and make sure the background confirmation: fixed is the last line:
It’s working:
body {
height:100%;
width:100%;
background size:cover;
background-repeat:no repetitions;
background position:center;
background insert:fixed;
}
doesn’t work:
body {
height:100%;
width:100%;
background size:cover;
background size:fixed;
background repeat:no repeats;
background position:center;
}
It’s a pity that the phone browsers in general are a bit buggy…. are.
Solution No 5:
Use the HTML background instead of the body and adjust the height: 100%.
html { height: 100%; background: url(bg.jpg) without fixing the middle;- background size: lid;- background size: lid;- background size: lid;}
Solution No 6:
With a little curiosity, I’ve found another solution. The correction is based on the assumption that we use the image in the landscape / the ratio for the background.
Step one: Compare the height of the window with the height of the content of the page.
step2: if the height of the window is smaller than the height of the content of the page.
Step three: Put this on the label
HTML {
}
Scenario
var wHeight = $(window).height();
var bodyHeight = $(‘page content element’).height();
if(wHeight)
are called up when loading the page and resizing the window
Good luck!
Related Tags:
background-size: 50,ajustar imagen de fondo css,css background constrain,background size contain mdn,background size for website,image cover css,android background auto resize,fit image to background android,chrome background-size,how to adjust background image in android studio,how to zoom background image in android
