Background image not working at all
Question
I have been researching for a while to how to get my background image to work on different screen resolutions. After many failed attempts I noticed I can't even get a normal css background in. It's not the file, I have tried different formats. Code for the different screen resolutions:
html { background: url('background.jpg') no-repeat center center fixed; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; }
body { background-image: url('Background.jpg'); }
3 answers
solution1
2 ACCPTED 2016-03-21 09:02:00
That is strange. Did you check that the path to your image is correct? For example if the image is inside an "example" folder, the path should be "example/myImage.png".
As for a responsive background, I believe you are on the right track, although a simple background-size: 100%; would have been enough. Check this Jsfiddle https://jsfiddle.net/a0mvnj63/
Also try using an external image, like in my example, just in case.
solution2
1 2016-03-21 09:16:31
Try to use your code like this background-image:url('../background.jpg'); with height: 100vh;
body { padding: 0; margin: 0; height: 100vh; background-image: url(http://static.tumblr.com/295a1562899724d920b2b65ba33ffb76/vouqyzj/f2Dna5qb8/tumblr_static_197ahk99f1z44ogskg4gw4c80.jpg); background-size: 100% 100%; background-position: center; } h1 { text-align: center; color: #fff; }
<body> <h1>Hello Universe</h1> </body>
solution3
0 2016-03-21 08:59:30
only background elements does not give height and width to any div or html.
try giving some height and width to your code. just like
html { background: url('background.jpg') no-repeat center center fixed; height:500px; width:500px; }
or just put some data on body so you get auto height width according to contain and get image in background.
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.