Having a transparent box/overlay on top of the backround image
Question
I have this image ( https://cdn.pixabay.com/photo/2015/08/25/03/51/toner-906142__480.jpg ) as as backround image and this light box below it. I would want to have the light box on top of my backround image, so that the backround image can be seen trough the box. I have tried to get in on (top of) the picture instead of being outside of it, but nothing works so far.
I want to have this headline and these words inside the white box, with the backround image seeing trough (opacity being maby 0.5).
<h2 style="color: black" align="center">Food is essential part of our well-being</h2>
<p>Our expertise </p>
Here is the bootstrap/HTML.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="instagram" href="#">
<img src="https://cdn3.iconfinder.com/data/icons/picons-social/57/38-instagram-256.png" width="35" height="35" alt=""></a>
<a class="facebook" href="#">
<img src="https://cdn3.iconfinder.com/data/icons/wpzoom-developer-icon-set/500/01-256.png" width="35" height="35" alt=""></a>
<a class="twitter" href="#">
<img src="https://cdn2.iconfinder.com/data/icons/font-awesome/1792/twitter-square-256.png" width="35" height="35" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#experts">Our experts <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#service">Our service <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#food">Food <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#contact">Contact <span class="sr-only">(current)</span></a>
</li>
<!-- <li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li> -->
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div class="container" href="service">
<img src="https://cdn.pixabay.com/photo/2015/08/25/03/51/toner-906142__480.jpg" id="ourservicepicture">
<div class="transbox">
<h2 style="color: black" align="center">Food is essential part of our well-being</h2>
<p>Our expertise </p>
</div>
</div>
</div>
</body>
</html>
And CSS:
h1{
}
#h1{
color:blue;
padding-bottom:30px;
font-family: CelebriSans;
}
h2{
font-family: CelebriSans;
margin-top:10px;
}
.navbar{
background-color:#c99ab1 !important;
height:11%;
}
.main{
height:60%;
width:100%;
grid-row: 1/4;
}
p{
font-family: CelebriSans;
font-size:16px;
font-style:bold;
}
div.container{
/* The image used */
/* background-image: url("https://cdn.pixabay.com/photo/2015/08/25/03/51/toner-906142__480.jpg"); */
position: relative;
max-width:100%;
/* Full height */
height: 100%;
margin: 0 auto; /* Center it */
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/*
.container .content{
position: absolute;
/* background: rgb(0, 0, 0); /* Fallback color */
/*background: rgba(255,255,255, 0.5); /* White background with 0.5 opacity
color: black;
width: 75%;
padding: 20px;
}
*/
#ourservicepicture{
height:100%;
width:100%;
margin:0px;
margin-left:0px;
margin-right:0px;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p {
margin: 5%;
font-weight: bold;
font-family: Verdana;
font-size: 12px;
color: #000000;
}
2 answers
solution1
1 ACCPTED 2020-03-31 18:35:17
You can use display: flex on .container to place elements inside .container on top. I have added some comments to minimize your code. Check it out!
.container { background-image: url("https://cdn.pixabay.com/photo/2015/08/25/03/51/toner-906142__480.jpg"); /* Add the background image like this */ height: 500px; /* Give the background image the correct height */ background-repeat: no-repeat; background-position: center; background-size: cover; display: flex; /* Places content inside on top */ justify-content: center; /* Center horizontally */ align-items: center; /* Center vertically */ } .transbox { padding: 30px; background-color: rgba(255, 255, 255, 0.5); /* Opacity can be given to background with rgba*/ border: 1px solid black; height: 100px; }
<div class="container" href="service"> <div class="transbox"> <h2> Food is essential part of our well-being </h2> <p>Our expertise </p> </div> </div>
solution2
0 2020-03-31 18:25:58
Simply add this CSS to your .transbox styles
https://jsfiddle.net/rjaw5nvx/
position: absolute;
top: 50%;
transform: translateY(-50%);
You could also use flexbox to center the box vertically and horizontally but that's a little bit more complicated.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Transparent Text Box - Image Overlay
How can I add a transparent image overlay on top of a video?
jQuery popup with image (box with black transparent overlay) on HTML page
Black transparent overlay on image
Transparent Image Overlay
Background Image with Transparent Overlay
Overlay transparent image on hover
Overlay on top of image
Transparent box over an image
Get image to overlay on top of table
Related Tags