How to make a div appear over a background image
Question
Firstly here is an image of my design to make it easier to understand:
I am in the process of trying to create the center content which appears over the top of the image, although when I add divs into my html with a background colour just to test where they are, I'm seeing no change from the above image. I'm wondering if perhaps they are appearing below the image or behind it, although I have changed the z-indexes without success.
Any help would be greatly appreciated, thank you.
3 answers
solution1
0 2017-02-11 15:17:05
If you're talking about the div with the map in it from your first image, then you'll want to do something along the lines of this in your html:
<div id='header'>
<img src='...'>
</div>
<div id='floater'>
<div id='floatContent'></div>
</div>
Then in your css, something along the lines of:
.header{
position: fixed;
width: 100%;
}
.floater{
position: absolute;
margin: auto;
}
solution2
0 2017-02-11 15:27:10
I can't really work with the provided code, but I can tell you what you should do. You should add the background image in CSS, then add the div you wish inside the header after the nav, and then position it using CSS on the background image.
<header>
<nav>
<ul>
<li><a href="Menu.html" style="padding: 0 20px 0 20px;">Menu</a></li>
<li><a href="Burritos.html" style="padding: 0 20px 0 20px;">Burritos</a></li>
<li><a href="index.html"><img class="header-image" src="assets/Headerlogo1.png"></a></li>
<li><a href="Contact.html" style="padding: 0 20px 0 20px;">Contact Us</a></li>
<li><a href="About.html" style="padding: 0 20px 0 20px;">About Us</a></li>
</ul>
</nav>
<div id="wrapper">
</div>
</header>
CSS:
header {
background-image: url(img/your-img.jpg);
background-size: cover;
background-position: center;
height: 100vh; /* or whatever you wish */
background-attachment: fixed;
position: relative;
}
.wrapper {
position: absolute;
width: 1140px; /* or how much do you want */
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
http://codepen.io/anon/pen/ggQJpX
Hope I understood correctly what you want.
solution3
0 2017-02-11 15:39:31
You can set an image as background and add absolutely positioned content div placing over background. also set semi transparent background to .content
html, body { font-family: 'Open Sans', sans-serif; background-color: #f3f3f3; color: #666; margin: 0px; padding: 0px; width: 100%; height: 100%; } #Page { position: relative; padding-top: 100px; background: url('http://lorempixel.com/output/food-qc-640-480-1.jpg') no-repeat; background-size: cover; height: 100%; width: 100%; } #wrapper { width: 1280; height: 100%; } #home-bg { position: fixed; height: 100%; width: 100%; opacity: 0.8; z-index: -1; } header { background-color: #1c1c1b; font-family: 'Century gothic'; font-size: 180%; height: 100px; width: 100%; border-bottom: solid; border-bottom-color: #009641; border-bottom-width: 5px; position: fixed; line-height: 50px; z-index: 1000; overflow: hidden; transition: all 0.8s ease; } .header-image { align-content: center; height: 100px; transition: all 0.8s ease; } .scroll { height: 80px; font-size: 180%; } .header-image-scroll { height: 80px; } #center-column { background-color: white; width: 1080px; height: 100%; box-shadow: 0px 1px 5px #888888; margin: 0 auto; padding-bottom: 10px; } nav { } nav ul { text-align: center; display: table; margin: auto; } nav li { display: table-cell; vertical-align: middle; /*display: inline;*/ padding: 0 10px; } nav li a { color: #009641; text-decoration: none; } nav li a:hover { color: #e2030e; } .content { position: absolute; top: 50%; left: 50%; width: 25%; height: 25%; transform: translate(-50%, -50%); background: rgba(180,255,180, 0.5); border: 2px solid green; color: red; }
<body id="chesters"> <header> <nav> <ul> <li><a href="Menu.html" style="padding: 0 20px 0 20px;">Menu</a></li> <li><a href="Burritos.html" style="padding: 0 20px 0 20px;">Burritos</a></li> <li><a href="index.html"><img class="header-image" src="assets/Headerlogo1.png"></a></li> <li><a href="Contact.html" style="padding: 0 20px 0 20px;">Contact Us</a></li> <li><a href="About.html" style="padding: 0 20px 0 20px;">About Us</a></li> </ul> </nav> </header> <div id="Page"> <div id="wrapper"> <div class="content">Lorem ipsum dolor amet </div> </div> </div> <!-- Page --> </body>
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.