Create an opaque Text box on top of an image? - css

Question

I am a newbie to both html and css and for the life of me I cannot get this right. Can someone please assist me in coding this?
This is what I have done so far, but now I'm stuck and my image is not showing up at all..
<div class="image"></div>
<div id="box1">
<h2>Welcome to the home of</h2>
<h1>Oliver & Sons</h1>
<p title="Oliver & Sons - Exquisite Carpentry">
In my workshop patience, skill and immaculate precision are combined to produce items that is unique, of exquisite taste and quality and could very well be a heirloom in your family. Explore my gallery and contact me when you are ready to experience craftsmanship at it’s best.
</p>
</div>
#box1 {
width: 100%;
padding: 100%px;
border: 2px solid navy;
margin: 0px;
background-colour: white;
}
div.image {
background: url(Images/background.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}

Answer 1

There are a several wrong things here:
When you set any CSS property like padding you should only use one kind of messure: px, %, em, rem... But not two, as you do in #box1. This is an error.
This is matter of style. When you set a property to 0 is better not set px, nor any kind of messurement units.
Now, your goal.
You want to get your #box1 inside of your .image so you should put one tag inside of another, as you could see on my code. Doing that you will be very close to your solution.
Next thing is centering you #box1. There are a lot of ways to do that, I put here my favourite, but, as always, the best way depends on the situation.
#box1 {
width: 50%;
border: 2px solid navy;
margin: 0 auto;
color: #FFF;
background: navy;
opacity: 0.8;
border-radius: 5px
}
div.image {
padding: 20px;
background: url(http://static.vecteezy.com/system/resources/previews/000/094/491/original/polygonal-texture-background-vector.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
<div class="image">
<div id="box1">
<h2>Welcome to the home of</h2>
<h1>Oliver & Sons</h1>
<p title="Oliver & Sons - Exquisite Carpentry">
In my workshop patience, skill and immaculate precision are combined to produce items that is unique, of exquisite taste and quality and could very well be a heirloom in your family. Explore my gallery and contact me when you are ready to experience craftsmanship
at it’s best.
</p>
</div>
</div>

Answer 2

Looks like the outer container will be a background image, then you will have another container to hold the text which will could use the the background-color: RGBA property.
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.container {
height: 100%;
background: url(link/to/image) center center;
background-size: cover;
// Use prefixes
}
.inner-container {
background-color: rgba(255, 255, 255, 0.6);
color: #000;
width: 500px;
margin: 60px auto;
}
Please make sure you explain as much as possible in your example code, SO isn't here to code for you :)
Here is a pretty useful link explaining RBGA
https://css-tricks.com/rgba-browser-support/