The div tag has a background image and i wanna put the overlay on the main tag's background-image and the rest of contents over both of them. But The following code will put the overlay tag over the conent.
HTML:
<div id="nav-section">
<div class="overlay"></div>
<div class="container">
<p>test</p>
<h5>test</h5>
</div>
</div>
CSS:
#nav-section{
background-image: url('../img/1.jpg');
background-position: top center;
background-size: cover;
position: relative;
}
#nav-section .overlay{
position: absolute;
top: 0;
height: 100%;
width:100%;
background-color: rgba(0,0,0,0.9);
z-index: 1;
}
#nav-section .container{
height: 600px;
}
#nav-section .container ul li{
float: left;
}
Thanks in advance.
Make the #nav-section .container have an position relative or absolute with a z-index that is higher than the overlay.
use z-index.
give #nav-section .container z-index that is higher then the div you want him to over lay.
Related
Would like to apply a background-color to a div that's nested inside a footer. The footer has a background-image covering the entire footer I set in CSS. The background-color of the div containing the imgshould reach the bottom of the footer's bakground-img. Here's an illustration of what I mean:
My code looks like this:
<footer>
<div class="some class">
<img src="img/some-image.png" alt=" ">
<div class="some class"> other content </div>
</div>
<div class="bottom-footer"> </div>
</footer>
CSS:
footer {
background-image: url('../img/footer.jpg');
background-repeat: no-repeat;
background-size: 100%;
height: 400px;
width: 100%;
}
.some.class {
width: 300px;
height: 365px;
margin-left: 2%;
background-color: (0,0,0,.97);
z-index: 1;
}
div.some img {
width: 260px;
height: 130px;
margin-top: 30px;
}
The img shows but i cannot see the background-color of the div that has the img. Probably a simple fix but I can't seem to figure it out. Any help would be appreciated.
You need to include rgba.
background-color: rgba(0,0,0,.97);
I have my "header_main" positioned absolute with a height of 100% to basically cover the entire screen. Inside the header_main div n have another div positioned absolute as well. I have set the "icon-wrapper" div to bottom:0; but it does not want to position absolute bottom.
<body id="top" class="no-js">
<header id="header_main">
<div class="icon-wrapper"></div>
</header>
</body>
My CSS:
html, body {
height: 100%;
}
body{
font: 18px/27px $font-stack;
color: $text-color;
-webkit-font-smoothing: antialiased;
font-weight: 300;
}
#header_main{
height:100%;
width:100%;
position: absolute;
background: url('../images/ac-placeholder-img.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.icon-wrapper {
position:absolute;
height: 254px;
bottom: 0;
vertical-align:bottom;
}
It can be done by giving top:100%; to the icon wrapper it will be always to the bottom of the header_main check out the working demo below;
#header_ main{
height:100%;
width:100%;
position: absolute;
background:#ddd;
}
.icon-wrapper {
position:absolute;
height: 254px;
bottom: 0;
background:red;
top:100%;
vertical-align:bottom;
}
<body id="top" class="no-js"> <header id="header_main"> Scroll Down<div class="icon-wrapper">ww</div> </header> </body>
.icon-wrapper is being aligned to the bottom, but its content is not, because the display value of absolute-positioned elements is always table or block, and vertical-align applies to inline or table-cell elements only.
Use the wrapper for the absolute positioning only, and add another element to handle the vertical align:
CSS
.icon-wrapper {
position: absolute;
bottom: 0;
}
.icon {
display: table-cell;
vertical-align: bottom;
height: 254px;
}
HTML
<div class="icon-wrapper">
<div class="icon">
</div>
</div>
Fiddle
You need to set the width for the absolute positioned div.
.icon-wrapper {
position:absolute;
height: 254px;
bottom: 0;
vertical-align:bottom;
width: 100%;
}
I'm curious whether it's possible with CSS to have a <div> overlaying the <div> above and below, like so:
I've tried to use margin-top: -40px;, but that doesn't seem to work. I've tried position:relative; without any luck, either. Any ideas?
Thanks!
Sure!
Demo Fiddle
The trick is managing the positioning of your divs, then setting the offset (top) correctly for the div you want overlapping.
<div></div>
<div>
<div></div>
</div>
CSS
div {
width:100%;
height:100px;
position:relative; /* ensure the parent divs have a position set */
}
div:first-child {
background:red;
}
div:last-child {
background:blue;
}
div:last-child div {
opacity:.5;
height:50px;
background:white;
position:absolute; /* position relative to the parent */
top:-25px; /* position the top to -25px (half its height) above the top of the parent */
}
There are many ways to do this:
With all div's absolutely positioned
You can use position: absolute to achieve this. This is better if you are trying to build a web app as it sticks to the edges of the screen.
Fiddle here
HTML
<div id="top-section"></div>
<div id="banner-section"></div>
<div id="btm-section"></div>
CSS
div {
position: absolute;
left: 0;
width: 100%;
}
#top-section {
top: 0;
bottom: 50%;
background: red;
}
#btm-section {
top: 50%;
bottom: 0;
background: blue;
}
#banner-section {
height: 100px;
margin-top: -50px;
top: 50%;
background: rgba(255,255,255,0.5);
z-index: 2;
}
With the #banner-section relatively positioned
You mentioned that you tried relative position. This is how you can achieve what you were trying to do. In this case, you want the #banner-section to be nested inside the #btm-section:
Fiddle here
HTML
<div id="top-section"></div>
<div id="btm-section">
<div id="banner-section"></div>
</div>
CSS
#banner-section {
position: relative;
top: -50px;
height: 100px;
background: rgba(255,255,255,0.5);
}
With a negative margin on #banner-section
You also mentioned that you tried using a negative value for the margin-top. Here is a working example of that:
Fiddle here
HTML
(Also nested)
<div id="top-section"></div>
<div id="btm-section">
<div id="banner-section"></div>
</div>
CSS
#banner-section {
margin-top: -50px;
height: 100px;
background: rgba(255,255,255,0.5);
}
You can also have it poking out of the top section
If the #top-section is static and the bottom section can extend past the bottom of the page, this might be the best option for you.
Fiddle here
HTML
<div id="top-section">
<div id="banner-section"></div>
</div>
<div id="btm-section"></div>
CSS
#banner-section {
position: absolute;
bottom: -50px;
z-index: 2;
height: 100px;
background: rgba(255,255,255,0.5);
}
Without further details you can do it as follows:
JSFiddle Example
HTML
<div class="top-section"></div>
<div class="banner-section"></div>
<div class="btm-section"></div>
CSS
.top-section{
height:60px;
background-color:red;
}
.btm-section{
height:60px;
background-color:blue;
}
.banner-section{
position:absolute;
z-index:1;
margin-top:-20px;
height:40px;
width:100%;
background-color:rgba(255,255,255,0.5);
}
End Result
The trick here is to have the middle div banner-section positioned absolutly, and with a margin-top value negative corresponding to half its height, giving us this end result:
Explanation
Since the element with the CSS class .banner-section gets positioned absolutely, it will rise above in the document stack order. So the elements .top-section and .btm-section stay one after the other.
An element with position:absolute will then need some extra css to keep up with the desirable appearence, like a width declaration and a height declaration to set its size.
Check if this one helps you
http://codepen.io/anon/pen/EJBCi.
<div class="outer">
<div class="topSec"></div>
<div class="midSec">Midcontent</div>
<div class="btmSec"></div>
</div>
CSS
.outer {
position: relative;
height: 400px;
text-align: center;
}
.topSec {
height: 50%;
background: red ;
}
.btmSec {
height: 50%;
background: yellow ;
}
.midSec {
position: absolute;
background: rgba(255,255,255,0.7);
z-index: 1;
top: 50%;
height: 60px;
margin-top: -30px;
left: 0;
right: 0;
line-height: 60px
}
OK, so what I would like to have happen is what I've set as a background image to display on top of all other elements on the page - set on the right, half on the Content block, half off to the side... currently I have the structure of:
<div id="SideImage">
<div id="Contain">
<div id="Dash"></div>
<div id="content">
<h1>Heading 1</h1>
<p>Content</p>
</div>
<div id="Footer">
<p>Footer Content</p>
</div>
</div>
</div>
CSS looks like the following, z-index isn't working when I use FireBug, If I remove the background color from the Contain css I can see the full image, but I want that SideImage OVER the Contain background, Dash background and footer. The only other thing I can think of is setting a Div above the SideImage Div with a white background color that is only a specific width, and removing the background color from the Contain Div. Any ideas?
#Contain {
background-color: #FFFFFF;
margin: 0 auto;
position: relative;
text-align: left;
width: 850px;
z-index: 1;}
#Dash {
background-image: url("/23456jjsg886635kksjp/EQI/EQIImages/dash.png");
float: none !important;
height: 10px;
position: absolute;
top: 169px;
width: 850px;
z-index: 2;}
#content {
border-left: 2px solid #C5DFF3;
border-right: 2px solid #C5DFF3;
float: left;
position: relative;
width: 846px;
z-index: 3;}
#Footer {
background-color: #C5DFF3;
clear: both;
height: 60px;
padding-top: 5px;
position: relative;
width: 850px;
z-index: 4;}
#SideImage {
background-image: url("/23456jjsg886635kksjp/EQI/EQIImages/SideImage.png");
background-position: 85% top;
background-repeat: repeat-y;
position: relative;
z-index: 5;}
JSFiddle of code above
Z-index can be a fickle mistress. I usually resort to content rendering order for something like this. Based on the above markup and what you have in mind, I'm leaning toward agreeing that it's not possible to have the background of the containing #SideImage be "on top" of any of its contents. See the diagram in that Smashing link for more information.
If you added the element <div id="SideFill" class="ir"></div> you could make the changes to your css:
#SideImage {
width:100%;
position:relative;
}
#SideFill {
position:absolute;
width:15%;
height:100%;
top:0;
right:0;
background:transparent url("/23456jjsg886635kksjp/EQI/EQIImages/SideImage.png") repeat-y 0 0;
}
OK this is where I finally ended up for the HTML on the page.
<div id="Contain">
<div id="SideImage" class="ir"> </div>
</div>
For the CSS I ended at
#SideImage {
background: url("/myLink/SideImage.png") repeat-y scroll 0 0 transparent;
height: 100%;
left: 748px;
position: absolute;
top: 0;
width: 100%;
z-index: 30;
}
The background-image property of css is used to put an image at the background of an element. To put an image in the content or to elevate image over content use <img> tag.
You realize you want the background image, which is supposed to be in the BACK, to be in front, right? There's no way of doing it normally in CSS.
You'll need to have an <img> element with the image you want, and have it fixed/absolutely positioned with a high z-index.
I've got a question regarding positioning of two objects: image and div. I want bg2.png image to stay under div. I keep encountering problem with image pushing div down by img's height. How do I avoid that?
I tried pushing down image with "top:" value but of course it leaves me with empty area above div. Also I tried adding negative "top:" value and relative position to "maincontent" div but again it left me with empty area, only difference was that this time it was under the div.
HTML:
<body>
<img src="./images/bg2.png" class="bgimg" />
<div id="maincontent">
</div>
</body>
CSS:
body {
width: 100%;
background: #000;
}
.bgimg {
z-index: -1;
overflow: hidden;
left: 70px;
position: relative;
display: block;
}
#maincontent {
height: 520px;
width: 960px;
margin: 20px auto;
display: block;
z-index: 8;
}
Thanks in advance.
edit - what I'm trying to achieve:
Click me!
2 solutions:
Change your HTML structure:
<body>
<div id="maincontent">
</div>
<img src="./images/bg2.png" class="bgimg" alt="some">
</body>
or make it as the background-image:
<body>
<div id="maincontent">
</div>
</body>
#maincontent {
background: url(./images/bg2.png) no-repeat 0 100%;
padding-bottom: height_of_image_in_px;
}
<style>
body {
width: 100%;
background: #000;
}
.bgimg {
z-index: -1;
overflow: hidden;
left: 70px;
position: relative;
display: block;
}
#maincontent {
height: 520px;
width: 960px;
margin: 20px auto;
display: block;
z-index: 8;
}
</style>
<body>
<div id="maincontent">
<img src="./images/bg2.png" class="bgimg" alt="some info about image here">
</div>
</body>
if you want that image inside the div use this code. or if you want make that image background of that div use css background property