Currently, the featured-img-display
element has no height. That's why you don't see the background image.
height: 100%;
will only set full screen height on an element if its parent actually has 100% screen height as well.
To do this using % units you'll need to make sure that all elements up to the featured-img-display
element have 100% height,.. something like:
html,body,.container,.content {
height: 100%
}
Then your current CSS code will work. Sometimes however the above code isn't so viable.
Using viewport units here: height: 100vh;
makes things a lot easier
Note:
If you want the image to span the full screen height (and without scroll-bars), you'll have to adjust your CSS a bit:
1) remove default margin with body { margin:0 }
2) You have set padding and a border on the parent of the element with the background image... you'll probably want to set these properties on the image element itself with box-sizing
set to border-box
.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…