Make my background image supported by all browsers?
Question
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>
1 answers
solution1
0 2015-01-28 09:57:50
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.