HTML Box over Image

Asked Feb 27 '20 at 11:45

Active Feb 28 '20 at 17:02

Viewed 46 times

How do I display an element with a background-image that has a 35% semi-transparent layer over the element?

Note: I can get the image to appear, but not the box

CSS

body {background-image: url(test.jpg);}

.box-1
{
 background-color: white;
 height: 100%;
 width: 35%;
}

HTML

<div class="box-1"></div>

edited Feb 27 '20 at 12:43

John

asked Feb 27 '20 at 11:45

Nathan Paprocki

So where are you stuck with this problem? – Turnip Feb 27 '20 at 11:50
https://stackoverflow.com/questions/806000/how-do-i-give-text-or-an-image-a-transparent-background-using-css – Paulie_D Feb 27 '20 at 11:52
I'm stuck at the point that my box won't show up but the background image will – Nathan Paprocki Feb 27 '20 at 12:34
https://jsfiddle.net/jabcreations/vhruezqc/ – John Feb 27 '20 at 12:51
1

If the code in your question is all you have, your box will have a height of zero pixels. 100% height will only work if the parent element has a defined height. Try `100vh` to make the box the height of the viewport. – Turnip Feb 27 '20 at 13:37
Thanks for all your help. I changed the height to 900 pixels and it works. – Nathan Paprocki Feb 27 '20 at 20:50

0 Answers0