CSS background image not showing on mobile devices
Question
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!!
1 answers
solution1
0 2015-01-07 23:06:16
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.
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.