I insert a background-image in my HTML page but it does not show
Question
I write the following HTML code, with a jpg image inserted, but why doesn't the image appear after the page rendering?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div.image { background-image: url("images/bg1.jpg"); } </style> </head> <body> <p class="text1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, iste?</p> <div class="image"></div> <div class="text2">Lorem ipsum dolor sit amet.</div> </body> </html>
2 answers
solution1
0 2021-11-01 21:28:43
Perhaps using CSS like so may help, based on this answer: https://stackoverflow.com/a/10833692/5968663
<style>
<div class="image"></div>
</style>
with CSS like so:
div.image {
content: url("images/bg1.jpg");
}
solution2
0 2021-11-05 08:38:58
By default, a div spans full-width of its container, but has zero height unless there is some content inside it. Currently your div.image has zero height. Specify a height to div.image with something like height: 100px or put a child element in it.
solution3
0 2021-11-05 08:42:04
you should give HTML , BODY and div.image a min-height: 100vh , then your background image should also be visible.
If you really want it to serve as a website background, you should also set the position: absolute; top:0;left:0 position: absolute; top:0;left:0 .
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.