Currently I'm trying to make it so that my content from .wrap-artist
displays above the background image with a blur.
CSS
.wrap-artwork {
left: 0;
right: 0;
z-index: 1;
display: block;
background-image: url('https://i1.sndcdn.com/artworks-000183268921-teibnr-t500x500.jpg');
background-size: cover;
background-position:center;
height: 150px;
margin-bottom: 20px;
margin-top: -1px;
margin-right: -16px;
margin-left: -16px;
-webkit-filter: blur(8px);
-moz-filter: blur(8px);
-o-filter: blur(8px);
-ms-filter: blur(8px);
filter: blur(8px);
}
.wrap-artist {
position: relative;
left: 0;
right: 0;
z-index: 9999;
margin-left: 20px;
margin-right: 20px;
}
.container {
margin-top: 25px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
border: 1px solid #ddd;
width: 1080px;
overflow: hidden;
padding-bottom: 25px;
}
I've tried messing around with the positions but with the structure I'm using it doesn't seem to be working at all.
HTML
<div class="container">
<div class="wrap-artwork"></div>
<div class="wrap-artist">
this is our image content
</div>
<div class="col-md-8">
some other content here
</div>
<div class="col-md-4">
finally some sidebar content here
</div>
</div>
Hopefully someone can help me, I used this question for guiding me but must have miss understood something in the first answer.
.wrap-artwork {
left: 0;
right: 0;
z-index: 1;
display: block;
background-image: url('https://i1.sndcdn.com/artworks-000183268921-teibnr-t500x500.jpg');
background-size: cover;
background-position:center;
height: 150px;
margin-bottom: 20px;
margin-top: -1px;
margin-right: -16px;
margin-left: -16px;
-webkit-filter: blur(8px);
-moz-filter: blur(8px);
-o-filter: blur(8px);
-ms-filter: blur(8px);
filter: blur(8px);
}
.wrap-artist {
position: relative;
left: 0;
right: 0;
z-index: 9999;
margin-left: 20px;
margin-right: 20px;
}
.container {
margin-top: 25px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
border: 1px solid #ddd;
width: 1080px;
overflow: hidden;
padding-bottom: 25px;
}
<div class="container">
<div class="wrap-artwork"></div>
<div class="wrap-artist">
this is our image content
</div>
<div class="col-md-8">
some other content here
</div>
<div class="col-md-4">
finally some sidebar content here
</div>
</div>
You want something like that ? : See this fiddle
If so, you have to add relative
position to the .container
parent and replace relative
position to absolute
with top
property on .wrap-artist
class.
.wrap-artist {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 9999;
margin-left: 20px;
margin-right: 20px;
}
.container {
margin-top: 25px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
border: 1px solid #ddd;
width: 1080px;
overflow: hidden;
padding-bottom: 25px;
position: relative;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments