Is there a way to scroll only the image in a fixed container? Or is there a way to scroll only the background image of an element?
body {
margin: 0;
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 40px;
overflow: hidden;
background-color: white;
}
.header .image {
transform: scale(1.03);
opacity: 0.5;
}
.header .image img {
filter: blur(5px);
}
.header .content {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 100;
}
.main {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/tree.jpg');
width: 100%;
height: 150vh;
}
<div class="header">
<div class="image">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/tree.jpg">
</div>
<div class="content">This header is fixed, but the image behind should scroll</div>
</div>
<div class="main"></div>
The goal is to have a frosted glass effect on the fixed bar. Since backdrop filters are currently not supported by most browsers, I am looking for an alternative.
In the end result, there will be a blurred image instead of a blur filter, to optimize performance (blur lags on mobile devices).
Since it's the same image as in the content below it, you can simply erase the background-image and use an rgba color (including opacity) as a background color for that element:
body {
margin: 0;
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 40px;
overflow: hidden;
background-color: rgba(256, 256, 256, 0.5);
}
.header .image {
transform: scale(1.03);
opacity: 0.5;
}
.header .image img {
filter: blur(5px);
}
.header .content {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 100;
}
.main {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/tree.jpg');
width: 100%;
height: 150vh;
}
<div class="header">
<div class="content">This header is fixed, but the image behind should scroll</div>
</div>
<div class="main"></div>
Related
I am trying to add an image on top of another image, but I want the background image to be blurry and the second to be normal
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.60)), url(img.jpg);
height: 85vh;
background-size: cover;
background-position: center;
filter: blur(8px);
}
img {
width: 500px;
height: auto;
margin-left: 50%;
margin-top: 10%;
}
<header>
<img src="img.jpg" alt="img">
</header>
You can use :before pseudo class for the blurred background and Flexbox for the center align of image
Stack Snippet
body {
margin: 0;
}
header {
height: 85vh;
display: flex;
overflow: hidden;
position: relative;
}
header:before {
content: "";
filter: blur(8px);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-image: url(http://www.planwallpaper.com/static/images/general-night-golden-gate-bridge-hd-wallpapers-golden-gate-bridge-wallpaper.jpg);
z-index: -1;
}
img {
max-width: 100%;
height: auto;
margin: auto;
}
<header>
<img src="http://via.placeholder.com/350x150" alt="img">
</header>
I have an overlay which should fill an entire div.
HTML:
<div class="phone">
<div class="overlay"></div>
</div>
CSS:
.phone {
position: relative;
width: 300px;
height: 500px;
padding: 15px;
background: #F2F4F5;
overflow: hidden;
cursor: default;
}
.overlay {
display: none;
background: rgba(27, 35, 41, 0.5);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
I have some JS adding content to the .phone div and when content is added, it automatically scrolls to the bottom of the .phone div. However, the overlay only stretches to fit the 300x500 original size. So when it scrolls down the overlay no longer covers the entire div.
If I add position: fixed to the overlay, it fills the whole screen instead of the .phone div only.
Place the overlay outside of the .phone div so that it is a child of the body element. Then set the Body to position relative.
HTML
<body>
<div class="overlay"></div>
<div class="phone"></div>
</body>
CSS:
body {
position:relative;
}
.overlay {
display: none;
background: rgba(27, 35, 41, 0.5);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.phone {
width: 300px;
height: 500px;
padding: 15px;
background: #F2F4F5;
overflow: hidden;
cursor: default;
}
If you give him position fixed he will be :
top: 0;
bottom: 0;
left: 0;
right: 0;
To the body and not your div if you want him to take the full size of his parent you give him
height:100%;
width:100%;
.phone {
position: relative;
width: 300px;
height: 500px;
padding: 15px;
background: red;
overflow: hidden;
cursor: default;
}
.overlay {
/* display: none;*/
background: pink;
position: absolute;
/*top: 0;
bottom: 0;
left: 0;
right: 0;*/
height:100%;
width:100%;
z-index: 1;
}
<div class="phone">
<div class="overlay"></div>
</div>
This is what I'm looking for:
I have cropped an image with my html and css but have no idea how to place rectangle in it. I guess for animation I should use :hover option for my crop class in div.
My code: http://jsfiddle.net/8t2hmxmn/
I guess this will fit your needs, to adjust the height of the details element, just edit the height: value inside .details
html * {
box-sizing: border-box;
}
.crop {
background-image: url('http://cs628119.vk.me/v628119319/10059/Ag3oy3YU6wY.jpg');
width: 200px;
height: 150px;
background-position: center;
background-size: cover;
position: relative;
overflow: hidden;
}
.shape {
width: 200px;
height: 50px;
color: black;
}
.details {
position: absolute;
bottom: -100%;
left: 0;
right: 0;
height: 100%;
background: rgba(0, 0, 0, 0.5);
padding: 5px 10px;
transition: all 1s;
color: white;
}
.crop:hover > .details {
bottom: 0;
}
<div class="shape">
<div class="crop">
<div class="details">
Yes, this is cat!
</div>
</div>
</div>
I want an element (div) to be layered under its fixed parent (header):
header {
position: fixed;
width: 100%;
height: 100px;
background-color: #ccc;
}
header > div {
position: absolute;
height: 100%;
width: 100px;
z-index: -1;
transform: translateY(50%);
background-color: #aaa;
}
<header>
<div>
</div>
</header>
This works in Firefox but not in Chrome. To fix it you need to do this:
header {
position: fixed;
width: 100%;
height: 100px;
}
header > div {
position: relative;
width: 100%;
height: 100%;
background-color: #ccc;
}
header > div > div {
position: absolute;
height: 100%;
width: 100px;
z-index: -1;
transform: translateY(50%);
background-color: #aaa;
}
<header>
<div>
<div>
</div>
</div>
</header>
But this sucks! Who is wrong according to the specification Firefox or Chrome? And is there a better approach to get this done across browsers?
Try this,
header {
position: fixed;
width: 100%;
height: 100px;
background-color: #ccc;
overflow: hidden;
}
header > div {
height: 100%;
z-index: -1;
transform: translateY(50%);
background-color: #aaa;
overflow: hidden;
}
<header>
<div></div>
</header>
Seems like I have misunderstand your question. Anyway the answer is chrome is correct. I think the better solution for do this is, using same level two DIVs(If possible).
header {
position: fixed;
width: 100%;
overflow: hidden;
}
header .header-inner {
position: relative;
height: 100px;
width: 100%;
z-index: 1;
background-color: #ccc;
}
header .under-layer {
position: absolute;
height: 100%;
z-index: -1;
transform: translateY(50%);
background-color: #aaa;
overflow: hidden;
top: 0px;
width: 100%;
}
<header>
<div class="header-inner"></div>
<div class="under-layer"></div>
</header>
When an element has position: a new context is created, which means that the div
is relative to the window context. So your div can not be z-indexly placed regarding to the header.
You will have to use a workaround for this.
If you need to "position fix" your header, you can wrap it in a div :
<div class="test">
<header>
<div>
</div>
</header>
</div>
Apply position: fixed; to this div instead. This will create a stacking context for the div.
.test {
position: fixed;
width: 100%;
height: 100px;
}
You can then apply z-index: -1; to header > div as it will share the stacking context of div.test with its parent (header).
header {
width: 100%;
height: 100%;
background-color: #ccc;
}
header > div {
position: absolute;
height: 100%;
width: 100px;
z-index: -1;
transform: translateY(50%);
background-color: #aaa;
}
.test {
position: fixed;
width: 100%;
height: 100px;
}
header {
width: 100%;
height: 100%;
background-color: #ccc;
}
header>div {
position: absolute;
height: 100%;
width: 100px;
z-index: -1;
transform: translateY(50%);
background-color: #aaa;
}
<div class="test">
<header>
<div>
</div>
</header>
</div>
From this jsfiddle: http://jsfiddle.net/vbaWK/3/, how can I make the fixed overlayed black rectangle appear over the blue rectangle, where they both overlap while scrolling the body. There is an added rule though, whereever there is no overlap, it should be over everything, including the overlay. Thanks.
html:
<div class="black"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="overlay"></div>
css:
.black
{
background: black;
width: 100px;
height: 100px;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
.blue
{
background: blue;
width: 100px;
height: 2000px;
z-index: 4;
position: relative;
}
.green
{
background: green;
width:100px;
height: 2000px;
z-index: 2;
position: relative;
}
.overlay
{
background: white;
opacity: 0.8;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index:3;
}
Thanks for any help.
Sorry I forgot to mention that when the blue rectangle is not overlapping, it should be over the overlay. There is a conflict.
Give the black rectangle the highest possible z-index, something like this:
.black
{
background: black;
width: 100px;
height: 100px;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}