Please help me to solve this issue, image not working z-index when div on clip-path. how i z-index to image easily thanks
Please check my code :-
.mymap {
background-image: url("https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg?auto=compress&cs=tinysrgb&h=350");
background-repeat: no-repeat;
-webkit-clip-path: polygon(100% 0, 100% 80%, 0 80%, 0 23%);
clip-path: polygon(100% 0, 100% 80%, 0 80%, 0 23%);
}
.mymap {
height: 220px;
}
.men img {
width: 20%;
}
.men img {
z-index: 999;
position: relative;
}
<div class="mymap">
<div class="men">
<img src="https://i.pinimg.com/originals/1c/01/27/1c0127d19cdd75efb5a3eca4384658d5.png">
</div>
</div>
Here is the codepen link :- https://codepen.io/anon/pen/JaQoOX
Please check and tell me how to fix this.
You need to to wrap .mymap and .men class into parent container and set position:relative to .container class and position:absolute to image.
.container{
position:relative;
}
.mymap {
background-image: url("https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg?auto=compress&cs=tinysrgb&h=350");
background-repeat: no-repeat;
-webkit-clip-path: polygon(100% 0, 100% 80%, 0 80%, 0 23%);
clip-path: polygon(100% 0, 100% 80%, 0 80%, 0 23%);
}
.mymap {
height: 220px;
}
.men img {
width: 20%;
}
.men img {
z-index: 999;
position: absolute;
top:0;
}
<div class="container">
<div class="mymap"></div>
<div class="men">
<img src="https://i.pinimg.com/originals/1c/01/27/1c0127d19cdd75efb5a3eca4384658d5.png">
</div>
</div>
Related
I have two DIVs over the top of a single background image. I want to darken all areas around the two DIVs and keep the image unaffected within the two DIVS, creating a kind of spotlight effect.
I tried using shadows around the DIVs but both cast a shadow over each other.
Is there any way to darken all areas outside of the 2 DIVS?
E.g.
<div class="background-image">
<div class="light-area-1"></div>
<div class="light-area-2"></div>
</div>
If there are just two 'spotlights' and the effect is to be purely visual you could use pseudo elements and clip-paths to overlay the spotlights:
.spotlit {
--bg: url(https://picsum.photos/id/1015/200/300);
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), var(--bg);
background-size: cover;
width: 80vmin;
height: 70vmin;
position: relative;
}
.spotlit::before,
.spotlit::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
display: inline-block;
top: 0;
left: 0;
background-image: var(--bg);
background-size: cover;
}
.spotlit::before {
clip-path: polygon(20% 20%, 50% 20%, 50% 40%, 20% 40%);
}
.spotlit::after {
clip-path: polygon(70% 60%, 90% 60%, 90% 95%, 70% 95%);
}
<div class="spotlit">
</div>
However, if the spotlights are needed as actual elements a similar approach lays them above the main, shadowed element using clip-path as above. This way you can have as many spotlights as required.
.background-image {
--bg: url(https://picsum.photos/id/1015/200/300);
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), var(--bg);
background-size: cover;
width: 80vmin;
height: 70vmin;
position: relative;
}
.light-area-1,
.light-area-2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: var(--bg);
background-size: cover;
}
.light-area-1 {
clip-path: polygon(20% 20%, 50% 20%, 50% 40%, 20% 40%);
}
.light-area-2 {
clip-path: polygon(70% 60%, 90% 60%, 90% 95%, 70% 95%);
}
<div class="background-image">
<div class="light-area-1"></div>
<div class="light-area-2"></div>
</div>
The shapes can be changed given clip-path's various options such as circle which may be useful to make them look more like an actual spotlight.
This question already has answers here:
position:relative leaves an empty space
(13 answers)
Closed 2 years ago.
I have a page with an angled DIV at the top and a DIV immediately below that which is angled. I've had to offset the position of both top DIVs so that they join together. The only issue is that the next DIV below these has a space the size of the 120px offset.
I could apply this to every DIV but doing this to the footer means that there's empty white space at the bottom of the page.
.top {
min-width: 100%;
min-height: 400px;
background: linear-gradient(45deg, #FF0000, #00FF00);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
}
.main {
min-width: 100%;
min-height: 600px;
background: #0000FF;
clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
position: relative;
top: -120px;
}
.next {
min-width: 100%;
min-height: 600px;
background: #000000;
}
<div class="top"></div>
<div class="main"></div>
<div class="next"></div>
Any ideas to make the black DIV begin at the bottom of the blue one and the rest of the page not be affected would be appreciated, you can't simply use top: -120px; on every DIV because then there's 120px of empty space at the bottom of the page.
You can change top by margin-top, it will have the same effect for the element, and the normal flow after it will be the same
.top {
min-width: 100%;
min-height: 400px;
background: linear-gradient(45deg, #FF0000, #00FF00);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
}
.main {
min-width: 100%;
min-height: 600px;
background: #0000FF;
clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
position: relative;
margin-top: -120px;
}
.next {
min-width: 100%;
min-height: 600px;
background: #000000;
}
<div class="top"></div>
<div class="main"></div>
<div class="next"></div>
There's a lot of questions similar to this but they're for edges or have answers incompatible with some browsers. I'd thought of using a gradient image for the background but can achieve the same effect using a background gradient and I'd guess this may be easier to implement with minimal code.
I currently have this, which has flat edges;
.top {
min-width: 100%;
min-height: 400px;
background: linear-gradient(45deg, #FF0000, #00FF00);
}
.main {
min-width: 100%;
min-height: 600px;
background: #0000FF;
}
<div class="top"></div>
<div class="main"></div>
It uses minimal code but I'd be aiming for an angled edge either on the bottom of one and on the top of the other or just the bottom of the top one so that the DIVs match up.
I'd be aiming for something like this…
Of course I could rotate the DIV but then there's overflow. I want something clean so that both DIVs match up. Something using clip-path: polygon could work but I can't figure out the angles or implementation. Any ideas or resources for where to start would be apprecited.
UPDATE
I've figured out how to angle both so that they match up but the DIVs need to be touching for it to look proper.
.top {
min-width: 100%;
min-height: 400px;
background: linear-gradient(45deg, #FF0000, #00FF00);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
}
.main {
min-width: 100%;
min-height: 600px;
background: #0000FF;
clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
}
<div class="top"></div>
<div class="main"></div>
UPDATE 1
Would this work? I added position: relative; and top: -150px; to move it up.
.top {
min-width: 100%;
min-height: 400px;
background: linear-gradient(45deg, #FF0000, #00FF00);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
}
.main {
min-width: 100%;
min-height: 600px;
background: #0000FF;
clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
position: relative;
top: -120px;
}
<div class="top"></div>
<div class="main"></div>
hi guys i have two differents div with background image, as you see in the picture. They are symetrics. i achieved that with clip-path, but as know it's not well supported by all browsers, could you guys give me an alternative to achieve that to be more compatible. Your help would be appreciated. Thx!
body {
margin: 0;
/* background: red; */
padding: 100px 0;
}
.container_first {
clip-path: polygon(0 0, 100% 14%, 100% 90%, 0% 100%);
background-image: url(images/img12.jpg);
min-height: 500px;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.container_second {
margin-top: -54px;
clip-path: polygon(0% 10%, 100% 0, 100% 100%, 0 86%);
background-image: url(images/img22.jpg);
min-height: 500px;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
Use skew transformation:
.first,
.second {
height:300px;
transform-origin:left;
overflow:hidden;
}
.first {
transform:skewY(4deg);
}
.first > div {
height:100%;
background:url(https://picsum.photos/id/10/800/800) center/cover;
transform:skewY(-4deg);
transform-origin:left;
}
.second {
transform:skewY(-4deg);
}
.second > div {
height:100%;
background:url(https://picsum.photos/id/1045/800/800) center/cover;
transform:skewY(8deg); /* twice the skew here so you may need another skew for the content*/
transform-origin:right;
}
<div class="first">
<div></div>
</div>
<div class="second">
<div></div>
</div>
This question already has answers here:
Why does z-index not work?
(10 answers)
Closed 4 years ago.
I am trying to make my middle div under my background_top div. This is my first time using clip-path, and it seems like it ignores the z-index(?). Down below I have added a codepen.
The background_top div does have a clip-path, giving it a slanted bottom, and I am trying to get it ontop of the middle div.
I have given my background_top a z-index of -100, and my middle a z-index of -250
Here is my code:
<div class="background_top">
<h1>we build<span>futures.<span></h1>
<div class="top_quote">
<h2>“</h2>
</div>
<div class="top_p">
<p></p>
</div>
</div>
<div class="middle">
</div>
</body>
<footer>
<div class="footer">
<div class="">
<p></p>
</div>
</div>
</footer>
.middle {
margin-top: -45vh;
height: 150vh;
width: 100vw;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
background-color: #B2DFEE;
z-index: -250;
}
.background_top {
height: 95vh;
width: 100vw;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 60%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 60%, 0 100%);
z-index: -100;
background: #232323;
background-image: url("images/placeholder.jpg");
background-size: cover;
}
.footer {
width: 100vw;
background-color: #232323;
height: 100vh;
position: fixed;
bottom: 0;
z-index: -230;
}
you need to set the position for z-index to work
Just add position:relative;
.middle {
margin-top: -45vh;
height: 150vh;
width: 100vw;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
background-color: #B2DFEE;
z-index: 1;
position: relative;
}
.background_top {
height: 95vh;
width: 100vw;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 60%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 60%, 0 100%);
z-index: 2;
background: #232323;
background-image: url("images/placeholder.jpg");
background-size: cover;
position: relative;
}
.footer {
width: 100vw;
background-color: #232323;
height: 100vh;
position: fixed;
bottom: 0;
z-index: -230;
}
<div class="background_top">
<h1>we build<span>futures.</span></h1>
<div class="top_quote">
<h2>“</h2>
</div>
<div class="top_p">
<p></p>
</div>
</div>
<div class="middle">
</div>
<footer>
<div class="footer">
<div class="">
<p></p>
</div>
</div>
</footer>