background-image not displaying

Question

I'm building a portfolio site for a friend. One of the features includes an image change on hover.

I am trying to achieve this by:

Creating a div with background image
Layering another image over the top of it.

#b1 {
 position:relative;
 background-image: url('http://s10.postimg.org/d03f8a015/SHOT_09_060_V2.jpg');
}

#b1.img {
    opacity:1;
    position:absolute;
    left:0;
}

#b1 img:hover {
    opacity:0;
}

<div id="b1">
    <img src="http://s29.postimg.org/v7eh0qmxz/SHOT_04_024_V7.jpg">    
</div>

However, I cannot get the background image to appear and have tried numerous steps to troubleshoot where I'm going wrong.

The JSFiddle with my code appears to be working, but I cannot reproduce it successfully on my localhost.

On localhost how do you open the file? `file://` protocol? it might be browser security preventing access to that image. — Sergio Tulentsev, Nov 23 '14 at 21:03

score 1 · Answer 1 · answered Nov 23 '14 at 21:48

1

You need to set CSS rules for width and height of your div that contains background image.

Example:

#b1 {
    width:500px; //set your own value
    height:500px; //set your own value
    position:relative;
    background-image: url('http://s10.postimg.org/d03f8a015/SHOT_09_060_V2.jpg');
}

answered Nov 23 '14 at 21:48

Michael Money

2,441
1
22
25

Sorry, I forgot to mention that I've actually done this and it still wasn't working. Additionally, in order to maintain responsiveness would I need to set different width/height rules for each viewport break? – Automatic Yes Nov 23 '14 at 21:56

score 0 · Answer 2 · edited May 23 '17 at 12:05

I think it has something to do with the #b1.img selector. When I change that to #b1 img as I think it should be, I don't get the background image repeating across the page and I'm able to reproduce the issue of not seeing it on hover. Then I add height: 480px; width: 359px; to the #b1 tag and it works. Does that change fix it for you?

If not, try using this method instead of changing the opacity: https://stackoverflow.com/a/18813323/4285369

background-image not displaying

2 Answers2