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.
Related
I know there are various similar threads on this but none answer my question. Please look at this most simple HTML code.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body {
margin: 0;
height: 100%;
background: linear-gradient(to top, blue, white);
background-attachment: fixed;
}
</style>
</head>
<body>
</body>
</html>
Viewed in Chrome for PC (either in normal view or in mobile simulator view) it produces a gradient background that covers the whole screen. Viewed in Firefox mobile for Android or Chrome mobile, the website has a white space at the bottom the size of the address-bar. It either appears right away or it appears when you attempt to scroll the page. Why is it there and how do I get rid of it?
i had the same Problem till hours before.
Set body-height not 100vh, but 100%.
body,html{ padding: 0; margin: 0; height: 100%; } (No background input here!)
In your html document you have to put in a new image-Tag('<'img id="image"'>')
At the end in CSS:
#image{ height: 100vh; background-image: url(..); z-index:-1; background-size: cover; }
So i found out, that 100% is smaller than 100vh actually, what actually kills the white bar at the bottom on android browser while scrolling out the navibar.
Sorry for my broken english. Greetings from germany. xD
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 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%;
}