stackoom
  简体   繁体   中英

Div with Background Image Not Showing

 原文  2019-05-30 22:55:56  2   2    javascript/ html/ css

Question

I am sure I am missing something simple here: I am creating a map with different image overlays. I got the map to work but the map doesn't show up until you push a button. I need it to show up always. Currently the map is set as a background image. If I set it as an image none of the buttons work. Does anyone know what I'm missing? 

 var alertName = document.getElementsByClassName("alertName"); var myFunction = function() { var hide = document.getElementsByClassName("hide"); for (var i = 0; i < hide.length; i++) { hide[i].style.display = "none"; } var name = this.getAttribute("name"); var show = document.querySelector('.' + name); if (show.style.display = "none") { show.style.display = "block"; } else { show.style.display = "none"; } }; for (var i = 0; i < alertName.length; i++) { alertName[i].addEventListener('click', myFunction); } 
 .hide { z-index: 2; display: none; } .hidingsection { background-image: url("https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077777/elke/map_base_1_gv6ehh.png"); background-repeat: no-repeat; } .container { display: flex; flex-flow: row } .hidingsection { z-index: 0; } 
 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="container"> <div class="map"> <section class="hidingsection"> <div class="hide schoolContent"> <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077188/elke/schools_pyqexw.png" /> </div> <div class="hide recreationContent"> <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077189/elke/recreation_psbfyp.png" /> </div> <div class="hide restaurantsContent"> <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077188/elke/restaurants_xjbtbd.png" /> </div> <div class="hide banksContent"> <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077188/elke/banks_zohw39.png" /> </div> <div class="hide groceriesContent"> <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077188/elke/groceries_xjaddd.png" /> </div> <div class="hide transportationContent"> <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077188/elke/transportation_mzzclu.png" /> </div> <div class="hide libraryContent"> <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077188/elke/library_pbesf1.png" /> </div> </section> </div> <div class="buttons"> <section> <div> <button class="alertName" name="schoolContent">Schools</button> <button class="alertName" name="recreationContent">Recreation</button> <button class="alertName" name="restaurantsContent">Restaurants</button> <button class="alertName" name="banksContent">Banks</button> <button class="alertName" name="groceriesContent">Groceries</button> <button class="alertName" name="transportationContent"> Transportation</button> <button class="alertName" name="libraryContent">Library</button> </div> </section> </div> </body> </html>

2 answers

solution1
 3 ACCPTED  2019-05-30 23:07:31

Since all inner div s are hidden (thus no-content), the parent (outer) div does not have an initial height.

Add a size to the section and you'll see the bg image

ie 

.hidingsection {
    z-index: 0;
    width: 1280px;
    height: 800px;
    background-image: url("https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077777/elke/map_base_1_gv6ehh.png");
}

(of course, you'll need to adjust the values given above to suit your needs)

See demo below 

 var alertName = document.getElementsByClassName("alertName"); var myFunction = function() { var hide = document.getElementsByClassName("hide"); for (var i = 0; i < hide.length; i++) { hide[i].style.display = "none"; } var name = this.getAttribute("name"); var show = document.querySelector('.' + name); if (show.style.display = "none") { show.style.display = "block"; } else { show.style.display = "none"; } }; for (var i = 0; i < alertName.length; i++) { alertName[i].addEventListener('click', myFunction); } 
 .hide { z-index: 2; display: none; } .hidingsection { z-index: 0; width: 1280px; height: 800px; background-image: url("https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077777/elke/map_base_1_gv6ehh.png"); } .container { display: flex; flex-flow: row } .hidingsection { } 
 <div class="container"> <div class="buttons"> <section> <div> <button class="alertName" name="schoolContent">Schools</button> <button class="alertName" name="recreationContent">Recreation</button> <button class="alertName" name="restaurantsContent">Restaurants</button> <button class="alertName" name="banksContent">Banks</button> <button class="alertName" name="groceriesContent">Groceries</button> <button class="alertName" name="transportationContent"> Transportation</button> <button class="alertName" name="libraryContent">Library</button> </div> </section> </div> <br/> <div class="map"> <section class="hidingsection"> <div class="hide schoolContent"> <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077188/elke/schools_pyqexw.png" /> </div> <div class="hide recreationContent"> <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077189/elke/recreation_psbfyp.png" /> </div> <div class="hide restaurantsContent"> <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077188/elke/restaurants_xjbtbd.png" /> </div> <div class="hide banksContent"> <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077188/elke/banks_zohw39.png" /> </div> <div class="hide groceriesContent"> <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077188/elke/groceries_xjaddd.png" /> </div> <div class="hide transportationContent"> <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077188/elke/transportation_mzzclu.png" /> </div> <div class="hide libraryContent"> <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077188/elke/library_pbesf1.png" /> </div> </section> </div>

solution2
 1  2019-05-30 23:10:25

At the very top of your CSS Styles, where you have: 

.hide {
  z-index: 2;
  display: none;
}

remove the display: none; so you are left with: 

.hide {
  z-index: 2;
}

暂无
暂无

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.

Related Question javascript div background image not showing CSS: background image not showing background image not showing in React Style background not showing an image ReactJS Background Image not Showing Background image not showing on iOS Animate a div background image Preload a background image on a div? Div Background Image Change background image of a div
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM