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%;
}
Related
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%;
}
My responsive background works well on PC Safari, Chrome, Firefox, Opera. It works as well in Firefox on Android. But in Chrome on Android I'm getting something like this:
Do you have any idea how to fix it? I want it to be fullscreen on Android Chrome too. I've tried everything...
CSS and HTML code:
.background {
background-image: url("images/bgsky2.jpg");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="background">
</body>
</html>
This issue was reported meny years ago !
See this link will help :
http://code.google.com/p/android/issues/detail?id=3301
And i remember this code helped me :
html{
height:100%;
min-height:100%;
}
body{
min-height:100%;
}
Try this:
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;
}
I need some help with displaying my background on mobile devices, the current code works on my browser but when I visit it on a mobile device the background crawls up to the top and is not visible, also the div for the other image does not react to the % i gave it. (I really have to use percents becouse it will make the site better for any mobile device)
I had this code working, but it was not in CSS but made in HTML itself, now i want to use CSS becouse you can not download the background anymore as picture.
<!DOCTYPE html>
<html>
<head>
<link rel="favicon" type="image/ico" href="favicon.ico"/>
<title>Rolling Barrel :: Sport & Game</title>
<meta name="description" content="De Rolling Barrel is een revolutionair idee waarmee sporten & gamen een compleet nieuwe dimensie krijgt.">
<style>
body#background {
background: url('background.jpg') no-repeat center center fixed;
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-color: #e0e0e0;
background-size: 100% 100%;
}
div {
position: absolute;
top: 20%;
left: 11%;
width: 37%;
height: 70%;
overflow-y: scroll;
overflow-x: hidden;
}
div img {
width: 100%;
}
</style>
</head>
<body id="background">
<div>
<img src="text.png" alt=""/>
</div>
</body>
</html>
I used my Android phone to view the site btw.
Hope someone can help me or give me a push in the right direction.
Thank you very much!!
Either just put the background-image attribute on #background or just put it on body (in the css) no need for both. I understand you may want to contain the image, in which case you can just use the element name (#background) and set an overflow to none if the image bleeds.
If you have any more questions or need help with this, just comment and I'll set up a JS Fiddle for you.
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'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')";