Title explains what I want to achive, here is the code:-
HTML
<div id="header-shadow"></div>
<div id="block">
<div id="square"></div>
</div>
CSS
#header-shadow {
background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/header-shadow.png);
background-repeat: repeat-x;
display: block;
width: 100%;
height: 10px;
z-index: 0;
position: fixed;
top: 100px;
}
#block{
height:1000px;
}
#square{
height: 100px;
width: 100px; background: red;
margin-top: 200px;
display: block;
z-index: 9999999;
opacity: 1;
}
JSFiddle
As you can see, on scroll the #square sits under the background image, is there any way to display this over the #header-shadow?
Yes, like this, where you can remove your z-index and set position: relative to #block.
#header-shadow {
background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/header-shadow.png);
background-repeat: repeat-x;
display: block;
width: 100%;
height: 10px;
position: fixed;
top: 100px;
}
#block{
position: relative;
height:1000px;
}
#square{
height: 100px; width: 100px; background: red;
margin-top: 200px; display: block; opacity: 1;
}
<div id="header-shadow"></div>
<div id="block">
<div id="square"></div>
</div>
Related
I have this HTML:
<div id="container">
<div id="content"></div>
<div id="close-button"></div>
</div>
and this CSS:
#container {
width: 50%;
}
#content {
width: 100%;
height: 50px;
background-color: gray;
}
#close-button {
float: right;
margin-left: 100%;
height: 50px;
width: 50px;
background-color: red;
}
JSFiddle: https://jsfiddle.net/Le53m70b/
How can I make the red box overlaid on top of the gray one, instead of being on a separate line? Note that the size of the container is not fixed, but regardless of its width, I'd like the gray box to cover 100% of it and the red box to be at its very right.
Ah, this finally works: https://jsfiddle.net/Le53m70b/1/
#container {
position: relative;
width: 50%;
}
#content {
width: 100%;
height: 50px;
background-color: gray;
}
#close-button {
position: absolute;
right: 0;
top: 0;
height: 50px;
width: 50px;
background-color: red;
}
You can use z-index property. Which is used to overlay an individual div over another div element.
#container{
width: 200px;
height: 200px;
position: relative;
margin: 20px;
}
#content{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.8;
}
#close-button{
z-index: 9;
margin: 20px;
}
I´ve been trying to display the child div over the parent div but it keeps it pushing down. i´d like to have the background picture with a banner on top of it with some text inside the banner.
<div class="contact-wrapper">
<div class="contact-background"></div>
<div class="contact-header">
<h1>Contact Us</h1>
</div>
</div>
.contact-wrapper{
width: auto;
height: 400px;
border: 3px solid #ff0000;
margin-top: 5px;
}
.contact-background{
background-image: url("images/background1.jpg");
width: auto;
height: 400px;
object-fit: contain;
vertical-align: top;
opacity: 0.7;
position: relative;
.contact-header{
width: auto;
height: 70px;
background-color: #c1c1c1;
line-height: 70px;
}
Try to add
position: absolute; top:0;
to the .contact-header class
.contact-wrapper{
width: auto;
height: 400px;
border: 3px solid #ff0000;
margin-top: 5px;
}
.contact-background{
background-image: url("http://via.placeholder.com/350x350");
width: auto;
height: 400px;
object-fit: contain;
vertical-align: top;
opacity: 0.7;
position: relative;
z-index: 1;
}
.contact-header{
width: 100%;
height: 70px;
background-color: #c1c1c1;
position: absolute;
top:0;
z-index: 2;
}
<div class="contact-wrapper">
<div class="contact-background"></div>
<div class="contact-header">
<h1>Contact Us</h1>
</div>
</div>
I want to show an background-image while hovering over the normal image. They both should have the same height and width. I thought to make it work by giving the div with the background image display: inline-block so it takes the same size as the image, but that makes it so the width: 100% and height: 100% of the image stop working cause they try to take 100% of the width from the inline-block element.
How can I make the background-image the same size as the image while keeping the values of height and width as ..% of the .box div.
.box{
width: 500px;
height: 400px;
border: 1px solid black;
text-align: center;
}
.around-image{
background: url(http://via.placeholder.com/600x400) no-repeat center;
background-size: cover;
display: inline-block;
}
img{
max-height: 100%;
max-width: 100%;
height: 100%;
width: 100%;
opacity: 1;
vertical-align: middle;
}
.helper{
display: inline-block;
height: 100%;
vertical-align: middle;
}
img:hover{
opacity: 0;
}
<div class="box">
<div class="around-image">
<span class="helper"></span><img src="http://via.placeholder.com/300x200">
</div>
</div>
Edit
Thanks to the answer from #dbigpot I probably got a better solution which is changing the background-image on hover. Only problem is that I can't use the max-height and max-width on the image and I need that part of the code so my images always look good inside of the div.
Is there anyway to set max-height or max-width on a background-image?
.box{
margin: 30px;
width: 400px;
height: 200px;
border: 1px solid black;
text-align: center;
background: url(http://via.placeholder.com/300x200) no-repeat center;
background-size: cover;
position: relative;
}
.box:hover{
background: url(http://via.placeholder.com/200x300) no-repeat center;
}
.height p{
position: absolute;
left: -60px;
top: 45%;
-webkit-transform: rotate(-90deg);
}
.width p{
position: absolute;
left: 40%;
top: -40px;
-webkit-transform: rotate(0);
}
<div class="box">
<div class="height">
<p>height: 200px</p>
</span>
<div class="width">
<p>width: 400px</p>
</span>
</div>
As you see, the 300x200 image is stretched over an area of 400x200. I don't want the image to stretch.
To prevent stretching of the image just change the value of the background-size property to contain:
.box {
background-size: contain;
}
.box {
margin: 30px;
width: 400px;
height: 200px;
border: 1px solid;
text-align: center;
background: url(http://via.placeholder.com/300x200) no-repeat center;
background-size: contain;
position: relative;
}
.box:hover {
background: url(http://via.placeholder.com/200x300) no-repeat center;
}
.height p {
position: absolute;
left: -60px;
top: 45%;
-webkit-transform: rotate(-90deg);
}
.width p {
position: absolute;
left: 40%;
top: -40px;
-webkit-transform: rotate(0);
}
<div class="box">
<div class="height">
<p>height: 200px</p>
</div>
<div class="width">
<p>width: 400px</p>
</div>
</div>
You could try using background-size:cover
.box{
width: 500px;
height: 400px;
border: 1px solid black;
text-align: center;
}
.around-image{
background: url(http://via.placeholder.com/300x200/ff0000) no-repeat center;
background-size: cover;
display: inline-block;
}
img{
max-height: 100%;
max-width: 100%;
height: 100%;
width: 100%;
opacity: 1;
vertical-align: middle;
}
.helper{
display: inline-block;
height: 100%;
vertical-align: middle;
}
img:hover{
opacity: 0;
}
<div class="box">
<div class="around-image">
<span class="helper"></span><img src="http://via.placeholder.com/300x200">
</div>
</div>
You could use something like this -
#target {
width: 200px;
height: 200px;
background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRN_bhuF3l7rhMNNBk4lgEoOp2qnB2TAJd5h_rVGtsWzZ0K0uzs');
}
#target:hover {
background: url('http://3.bp.blogspot.com/-KdSQjJhV4jI/TpMRe96ndUI/AAAAAAAACfQ/BC6ZMvbp_DA/s1600/gerbera-elegant-flowers-9.jpg');
}
<div id="target"></div>
Adjust the background css properties to suit your need.
*{
margin: 0;
padding: 0;
}
.container{
height: 638px;
width: 100%;
max-width: 100%;
position: absolute;
overflow: hidden;
background-position: center;
top: 0;
z-index: -1;
}
.container img{
width: 100%;
height: 638px;
}
.container #short-des{
background: rgba(0,0,0,.5);
height: 400px;
width: 500px;
position: relative;
}
<div class="container">
<img src="cover.jpg">
<div id="short-des">
</div>
</div>
i want short-des div to visible over image at the center i tried z-index but it not working. please help me out to fix this with reason so i will take these things in future
Put your div positioned absolute to overlap your image. Use left/top/right/bottom properties to set it's position.
It's position will be relative to closest non-static (absolute/relative/fixed) positioned element or <body>
#short-des,
#short-des2 {
position: absolute;
left: 90px;
top: 50px;
width: 50px;
height: 50px;
background-color: rgba(100, 250, 100, .6);
z-index: 7;
}
#short-des2 {
z-index: 8;
left: 100px;
top: 55px;
background-color: rgba(250, 100, 100, .7);
}
.wrapper {
margin: 50px;
position: relative;
}
<div class="wrapper">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
<div id="short-des"></div>
<div id="short-des2"></div>
</div>
You can add image as background of container div [.container] as
.container{
background: url('path/to/image'); // eg. 'cover.jpg'
background-repeat: no-repeat;
background-size: 100% 100%;
height: 638px;
width: 100%;
max-width: 100%;
position: absolute;
overflow: hidden;
background-position: center;
top: 0;
z-index: -1;
}
and remove the <img> from html
<div class="container">
<div id="short-des"></div>
</div>
Try this...
Just set position : absolute then set the location using top and left CSSproperties.
* {
margin: 0;
padding: 0;
}
.container {
height: 638px;
width: 100%;
max-width: 100%;
position: absolute;
overflow: hidden;
background-position: center;
top: 0;
z-index: -1;
}
.container img {
width: 100%;
height: 638px;
}
.container div#short-des {
background: rgba(0, 0, 0, .5);
height: 40px;
width: 50px;
top:40%;
left:50%;
position: absolute;
z-index:999;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="container">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
<div id="short-des">
</div>
</div>
</body>
</html>
.container{
height: 638px;
width: 100%;
max-width: 100%;
position: absolute;
overflow: hidden;
background-position: center;
top: 0;
z-index: -1;
}
.box {
position: relative;
width: 638px;
height: 300px;
}
.box img{
width: 100%;
height: 500px;
}
.box #short-des{
background: rgba(0,0,0,.5);
height: 400px;
width: 500px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -100px;
margin-left: -250px;
}
<div class="container">
<div class="box">
<div id="short-des">
</div>
<img src="http://www.slowtrav.com/blog/girasoli/IMG_6820.JPG">
<div id="short-des">
</div>
</div>
</div>
http://codepen.io/rizwanmughal/pen/KgZQRx
Please see the code in jsbin
Screenshot:
All I need is just to have blue on top, then white, then greens. So ideally:
I tried z-index, create stacking context... nothing worked.
It might have something to do with negative margin in CSS
I'm happy to change the HTML code or change the current CSS, as long as I can get the desired effect.
.left,
.right {
width: 200px;
height: 60px;
background-color: green;
display: inline-block;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
display: inline-block;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
margin-left: -10px;
margin-top: 10px;
}
<div class="out">
<div class="left"></div>
<div class="bar">
<div class="circle"></div>
</div>
<div class="right"></div>
</div>
Edit
I should have mentioned that my difficulty was mostly achieving the effect while keeping the current HTML setup (i.e. circle in bar). Turns out it doesn't seem possible, because
If no zindex on bar, can't make sure it's on top of circle
If set zindex on bar, then it creates new stacking context, then circle can't be on top of 2 greens. Because greens are on different stacking context
you can simplify this using just the div out with position + z-index
.out {
position: relative;
width: 400px;
height: 60px;
background-color: green;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
display: inline-block;
position: absolute;
top: 0;
left: 50%;
z-index: 10
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
margin-left: -10px;
margin-top: 10px;
position: absolute;
top: 0;
left: 50%;
z-index: 1
}
<div class="out">
<div class="circle"></div>
<div class="bar"></div>
</div>
EDITED : edited my answer after reading more carefully :) sorry about that
see here > jsFiddle
or snippet below :
.left, .right {
width: 200px;
height: 60px;
background-color: green;
display: inline-block;
position:relative;
z-index:1;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
display: inline-block;
z-index:6;
position:relative;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
top: 10px;
position:absolute;
left:0;
right:0;
margin:0 auto;
z-index:5;
}
.out {width:420px;position:relative;}
<div class="out">
<div class="left"></div><div class="bar"></div><div class="circle"></div><div class="right"></div>
</div>
OR if you don't want different bg color for .left and .right just use one big div .out and position the bar and circle on top of it :
.out {
position: relative;
width: 420px;
height: 60px;
background-color: green;
}
.bar {
width: 20px;
height: 100%;
background-color: blue;
position: absolute;
left: 0;
right:0;
margin:0 auto;
z-index: 2
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
position: absolute;
top: 10px;
left: 0;
right:0;
margin:0 auto;
z-index: 1
}
<div class="out">
<div class="bar"></div>
<div class="circle"></div>
</div>
What if we just interchange .bar as child element of .circle. And try as below,
.left, .right {
width: 200px;
height: 60px;
background-color: green;
display: inline-block;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
margin:-10px 10px;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
display:inline-block;
position:absolute;
margin:10px -20px;
}
<div class="out">
<div class="left"></div>
<div class="circle"><div class="bar"></div></div>
<div class="right"></div>
</div>
You could even further simplify your markup and utilize a pseudo selector instead of wrestling with stacking order, and order elements naturally.
.out {
width: 400px;
padding: 10px 0;
background: green;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 100%;
display: block;
margin: 0 auto;
position: relative;
}
.circle:after {
content: '';
width: 20px;
height: 60px;
background-color: blue;
display: block;
margin: 0 auto;
position: absolute;
top: -10px;
left: 10px;
}
<div class="out">
<div class="left"></div>
<div class="circle"></div>
<div class="right"></div>
</div>
Use transform.
https://jsbin.com/geconefine/1/edit?html,css,output
.out{
position: relative;
z-index: 0;
}
.left, .right {
width: 200px;
height: 60px;
background-color: green;
display: inline-block;
position: relative;
z-index: -2;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
display: inline-block;
position: relative;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
transform: translateX(-10px);
margin-top: 10px;
position: relative;
z-index: -1;
}
You need a position before z-index will do anything. Since I don't see any applied in your current css that might be your issue.
.left, .right{
position: relative;
z-index: 1;
}
.circle{
position: relative;
z-index: 4;
}
.bar{
position: relative;
z-index: 5;
}