Hack Forums
html/js changing div style causes background image to disappear? - Printable Version

+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: html/js changing div style causes background image to disappear? (/showthread.php?tid=5698488)



html/js changing div style causes background image to disappear? - Seifer - Aug 19, 2017

Hey HF, really strange issue here, I am working on a page, it contains multiple divs each with a background image and the following css

position: relative;
opacity: 1;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 100%;
min-width: 100%;

each div can be hidden and shown with a button calling javascript that toggles div style to and from none/ block

however whenever a button is clicked the images disappear and just become white, any one have any idea why?

I can upload the script to a site if any one needs a closer look 🤝


* - Rushax - Aug 19, 2017

I think I know what you're saying.
This is most likely because the container of the image is being set to an exact width/height.
As this element isn't being told to display none; it still shows the container but not the image on-toggling the button.
You would have to find the JS file and just display none on the whole container, instead of the img inside the container.

Hope that makes sense.


* - Seifer - Aug 19, 2017

(Aug 19, 2017 12:52 PM)Rushax Wrote:  I think I know what you're saying.
This is most likely because the container of the image is being set to an exact width/height.
As this element isn't being told to display none; it still shows the container but not the image on-toggling the button.
You would have to find the JS file and just display none on the whole container, instead of the img inside the container.

Hope that makes sense.

Hey thanks for the reply, I managed to fix my issue by setting the background image in the css for the div, where before it was set like this
<div id="id" class="class" style='background-image: url("Images/image.png");'

all working now, thanks 🤝