Text in transparent box on top of image? - html

Question

I'm having trouble with creating a transparent box on top of a background image, like this. My code is almost exactly the same, but for some reason, I can't get the transparent box to move away from the top of the image (I'd like the box to be centered with some margin above and below). Adding padding:20px to .background does nothing; adding margin:20px to #transbox only increases the left and right margins by 20px, but does nothing to the top and bottom margins.
HTML & CSS:
.background {
background-image: url("https://source.unsplash.com/5OMTuqOM7bI");
}
#transbox {
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
margin: 60px;
}
h3 {
text-align: center;
font-weight: 300;
color: #3C5FA3;
}
.container {
width: 80%;
margin: 0 auto;
padding: 0 30px;
}
.clearfix:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
<div class="container clearfix background">
<div id="transbox">
<h3>Some text here</h3>
</div>
</div>

Answer 1

Several options to get this. One of them is to set the padding-top/bottom of the container.
padding: 30px;
(instead of padding: 0 30px).
Here is the fix to your code:
.background {
background-image:url("https://source.unsplash.com/5OMTuqOM7bI");
}
#transbox {
background-color:rgba(255,255,255,0.8);
padding:20px;
margin:60px;
}
h3 {
text-align:center;
font-weight:300;
color:#3C5FA3;
}
.container {
width: 80%;
margin: 0 auto;
padding: 30px;
}
.clearfix:after {
visibility:hidden;
display:block;
content:"";
clear:both;
height:0;
}
<div class="container clearfix background">
<div id="transbox">
<h3>Some text here</h3>
</div>
</div>

Answer 2

You don't need a clearfix or anything for this case. All you need is the background opacity. The key here is to give the container:
position: relative;
height: <some>px;
And the transbox:
position: absolute;
top and right values.
If you want it to be centered, it's very easy. Use a dead centre trick like this:
.background {
background-image: url("https://source.unsplash.com/5OMTuqOM7bI");
}
#transbox {
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
margin: 60px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h3 {
text-align: center;
font-weight: 300;
color: #3C5FA3;
}
.container {
width: 80%;
margin: 0 auto;
padding: 0 30px;
position: relative;
height: 500px;
}
<div class="container background">
<div id="transbox">
<h3>Some text here</h3>
</div>
</div>
Initial Version
Centered Version

Answer 3

padding: 0 30px; is identical to padding-top: 0; padding-right: 30px; padding-bottom: 0; padding-left: 30px;
You say:
Adding padding: 20px; to .background does nothing
That's because later in your CSS you overwrite this padding in .container.
If two or more rules have the same CSS specificity, the one that occurs last wins. Since both selectors have identical specificity, .container definitions win over .background definitions.