I am trying to create my first responsive web site using bootstrap library on visual 2010.Background of my Login page is an image displayed in the hole page. That's why I have used viewPort to adjust it on mobile phones...
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> It works fine on all browsers and IOS devices, but for Android devices it is not working properly. There is a white space in the bottom of each Android screen. How can I remove this white space and display the image correctly on android browsers? Attached are 2 screenshots from android and IOS devices.
Update:
Below is my css class of my body:
.imgBack {
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;
}
Try to add:
html{
height:100%;
min-height:100%;
}
body{
min-height:100%;
}
Related
I have a website that i'm trying to design. I've filled the background with an image that takes 100% of the height of the screen. On a computer this works perfectly, but on mobile it only takes 100% of the webpage space available at load, which includes the browswer's URL bar at the top. When you scroll down, the URL bar disappears that leaves a gap at the bottom of the background of website.
The website is a single webpage website. The 'homepage'/initial view on load fades in to the background image. I want the actual content to be just off the screen on load, and so having a background image that just fills 100% of the height of the screen is important.
How do i fix this?
Below is how i've filled the background and screenshots of the website in question.
I've filled the background of the website using the following CSS code.
html{
background: url(../content/BackgroundAndHand03.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
opacity: 1;
}
Website with mobile browser URL bar
Website without mobile browser URL bar
This prevents scrolling past the html element and allows your body to maintain its position during over-scroll on mobile devices, so even if the device supports over-scroll, the html is locked to the desired color or image while the body moves.
html {
overflow: hidden;
height: 100%;
}
body {
height: 100%;
overflow: auto;
}
Make sure to include this meta tag if you already haven't
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I have a background image for my website that I have set to be responsive to the size of the browser and stay centered; it works completely when I adjust the size in Chrome. However, the background image does not appear in IE or on my android phone in the Chrome app, or on Safari; basically it only works on Chrome. What should I do to make the background image appear on all devices and browsers while still remaining centered?
CSS:
html {
background-image: url("http://blog-imgs-65-origin.fc2.com/s/n/n/snnantn/20140317230845d64.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: rgb(198, 198, 198);
background-position: center;
}
HMTL head:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<title>Website</title>
<link rel="stylesheet" href="app.css" type="text/css" />
</head>
I just try with the your example same as external URL it nicely work for me. actually we can used both external and internal image URL for that. This issue may be issue with the loading time of the image.
And also try to used css vendor prefix as
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
If this also not work there is several css and js methods to complete your task.
I'd like to target the desktop version of Firefox only (not the Android mobile version) with the following CSS properties:
.background {
background: url(imagelocation) no-repeat center center;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I'm trying to create a parallax effect with multiple divs (widths set to 100% and height set to XXXpx) and the background image are fixed while the nested divs scroll out of view.
Here is an example of my codepen: http://cdpn.io/AdglB
When you view this on Firefox Mobile for Android, it creates the effect but it slows down the scroll rendering - hence I would only like to target Firefox desktop if possible. This also creates other issues on the iPhone and Android in terms of background image scaling (it zooms all the way into a large image).
Targetting only Firefox and no other browser: #-moz-document url-prefix() {}. It's a hack. Hacks are bad. Last resort.
Targetting desktop and not mobile: what about using Media Queries and the typical width of a desktop (or mobile) screen?
I guess if it's only about performance on mobile (all smartphones), then just use a MQ...
I'm experiencing a strange issue: When I open a website on my Android 4.1 phone (default browser), the background image doesnt cover the background as it should.
Here is the screen from phone:
Pieces of code, according to background attributes:
...
<meta name="viewport" content="width=device-width">
...
background: #fff url('img/main_bg.png')no-repeat center center;
-webkit-background-size: cover !important;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/main_bg.png', sizingMethod='scale')";
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/main_bg.png', sizingMethod='scale')";
Although, things that I've tried is setting the min-hegith and width property at 100 % - didnt make the things work.
Hope that you have any ideas, how to figure out this issue.
Try the following code snippet. It seems to be a problem of the native Android browser to parse multiple CSS tags for the background property. So define each property seperate might help:
...
<meta name="viewport" content="width=device-width">
...
background-image:url('img/main_bg.png');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover !important;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/main_bg.png', sizingMethod='scale')";
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/main_bg.png', sizingMethod='scale')";
I am having some issues with my background only not loaded correctly on the android mobile screen. Works fine on apple. The styling I have used for the background is:
body
{
background: url('images/MobileBack.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You can also view the site at: www.bingetech.com
i think it could be because you have not defined a scale within your viewport meta tag.
Try:
<meta name="viewport" content="initial-scale=1.0" />
[edited] with max-scale too
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Another thing i would add is
CSS
html, body {
min-height: 100%;
}