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>
Related
I have a card with image, text and overlay gradient.
The image is much bigger than its parent div. The image is made responsive to the size of parent div. I need to position the image inside div a certain way, so I use object-position for it.
However, when I try to position it, I get white space between the image and parent container, even though the image is bigger than the div..
I used position values from Figma which are :
position: absolute;
width: 386px;
height: 458px;
left: -33px;
top: -94px;
On the screenshot you can see how it should look like (on the left) and how it's done with the code below (on the right):
DEMO
https://github.com/meri-maki/stackoverflow-demo-ingrad
https://meri-maki.github.io/stackoverflow-demo-ingrad
.card {
border-radius: 24px;
width: 100%;
height: auto;
min-height: 328px;
max-height: 534px;
position: relative;
display: inline-block;
overflow: hidden;
}
.card img {
display: block;
vertical-align: bottom;
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
/* ----------IMAGE POSITIONING---------- */
object-position: top -94px left -33px;
}
/* ----------gradient---------- */
.card:after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
min-width: 100%;
height: 66%;
background: linear-gradient(0deg, #181818 0%, rgba(25, 23, 29, 0.447294) 48.44%, rgba(24, 24, 24, 0) 100%);
opacity: 0.9;
}
/* ----------caption---------- */
.caption {
z-index: 10;
position: absolute;
left: 4.27%;
right: 8.54%;
top: 63.41%;
bottom: 7.32%;
}
<div class="card">
<img src="https://picsum.photos/1200" alt="">
<div class="caption">
<h4>Caption</h4>
</div>
</div>
I tried using transform: translate but got same result. What could be wrong?
You're shifting the image with negative position values. I'm not sure why, but you'd need to compensate by adding the reciprocal value to increase the size of the image accordingly.
Alternatively, set position to zero or center and eliminate those negative values.
.card {
border-radius: 24px;
width: 100%;
height: auto;
min-height: 328px;
max-height: 534px;
position: relative;
display: inline-block;
overflow: hidden;
}
.card img {
display: block;
vertical-align: bottom;
position: absolute;
object-fit: cover;
object-position: top -94px left -33px;
width: calc(100% + 33px); /* <------------- HERE */
height: calc(100% + 94px); /* <-------- AND HERE */
}
.card:after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
min-width: 100%;
height: 66%;
background: linear-gradient(0deg, #181818 0%, rgba(25, 23, 29, 0.447294) 48.44%, rgba(24, 24, 24, 0) 100%);
opacity: 0.9;
}
.caption {
z-index: 10;
position: absolute;
left: 4.27%;
right: 8.54%;
top: 63.41%;
bottom: 7.32%;
color: #fff;
}
<div class="card">
<img src="https://picsum.photos/1200" alt="">
<div class="caption">
<h4>Caption</h4>
</div>
</div>
I am working on a new page for my website, and i got a great image for the background, but i would like to use an overlay to make the image darker. But the overlay doesn't take the full page !
I have already tried a lot of things but nothing worked, and this is my html and css code :
/* //////////////////////// [ Background ] //////////////////////// */
body, html
{
height: 100%;
background-color: #fff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.bg-img
{
background-image: url("../../images/background/bg.jpg");
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.overlay
{
position: relative;
z-index: 1;
width: 100%;
min-height: 100vh;
}
.overlay::before
{
content: "";
display: block;
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.8);
}
<div class="bg-img"></div>
<div class="overlay"></div>
I think you understood what i would like. That's could be very nice if someone could help me to make this overlay on the full page.
Add margin: 0 to the body:
body,
html {
height: 100%;
background-color: #fff;
box-sizing: border-box;
}
body {
margin: 0;
}
.bg-img {
background-image: url("https://picsum.photos/id/446/3200/3200");
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.overlay {
position: relative;
z-index: 1;
width: 100%;
min-height: 100vh;
}
.overlay::before {
content: "";
display: block;
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
}
<div class="bg-img"></div>
<div class="overlay"></div>
EDIT: added codepen links
I'm currently attempting to get a frosted glass effect using CSS however everything I've tried has just resulted in a slight tint.
This is being tested in Chrome.
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background: url("https://i.imgur.com/ht1etAo.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.frost {
color: #ffffff;
width: 400px;
height: 200px;
position: absolute;
background: inherit;
overflow: hidden;
margin: 0 auto;
padding: 2rem;
}
.frost:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: inherit;
filter: blur(20px);
box-shadow: inset 0 0 3000px rgba(255, 255, 255, 0.5);
margin: -20px;
}
<section id="frontImage">
<div class="container">
<div class="frost">
<h3>Testing Glass</h3>
</div>
</div>
</section>
It doesn't actually seem like the filter property is working, as changing it doesn't actually effect the div.
Here's my code: I'm attempting to blur the frost div
Aiming for this kind of effect: https://codepen.io/AmJustSam/full/ModORY/
What I've got: https://codepen.io/anon/pen/PxWEde
I've attempted using webkit-blur too but that hasn't worked either.
Any advice is greatly appreciated. If further info is needed, please ask.
body {
padding: 0;
margin: 0;
background: url("https://i.imgur.com/ht1etAo.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
display: flex;
justify-content: center;
}
.frost {
width: 400px;
height: 200px;
position: absolute;
background: inherit;
}
.frost:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
filter: blur(2px);
background: inherit;
}
.content {
position: absolute;
width: 340px;
height: 140px;
top: 30px;
left: 30px;
}
<div class="frost">
<div class="content">
<h3>Testing Glass</h3>
<p>lipsum</p>
</div>
</div>
I think the best way to get a realistic glass effect by using the blurred version of the original image.
Ps: Take it easy guys had an issue with HTML widget.
Here is the code hope that's help
html,
body {
padding: 0;
margin: 0;
}
h2 {
text-align:center;
color:white;
}
.glass-effect--bg-inner {
position:relative;
z-index:1;
padding-top:20px;
}
.container {
width: 100%;
height: 100%;
min-height: 500px;
}
.large-hero--bg {
background: url(https://cdn-std.dprcdn.net/files/acc_609131/p6BW2C) no-repeat fixed;
background-size: cover;
background-position: 50% 0;
}
.glass-effect {
position: relative;
height: 250px;
}
.glass-effect--bg:after {
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
background: url("https://cdn-std.dprcdn.net/files/acc_609131/EElxHZ") repeat fixed;
background-size: cover;
background-position: 50% 0;
content: "";
filter: url("https://cdn-std.dprcdn.net/files/acc_609131/EElxHZ") repeat fixed;
-webkit-filter: blur(5px);
filter: blur(5px);
}
<div class="container large-hero--bg ">
<div class="glass-effect glass-effect--bg">
<div class="glass-effect--bg-inner">
<h2>Lorem ispsum dolor</h2>
</div>
</div>
</div>
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>
I want to put the background image right under .right div but it positions itself just above .right div. How can the problem be solved?
Here's the pen: http://codepen.io/anon/pen/Hilfd
.background-image {
background-image: url("http://www.worldswallpapers.org/wp-content/uploads/2014/02/Nature-Wallpapers-2014-2.jpg");
background-size: cover;
display: block;
filter: blur(5px);
-webkit-filter: blur(5px);
height: 800px;
position: relative;
left: 0;
right: 0;
z-index: 1;
}
.right {
position: relative;
float: left;
margin-top: 50px;
width: 100%;
min-height: 400px;
max-height: auto;
z-index: 5;
margin-bottom: 5px;
background: rgba (255, 255, 255, 0.3);
}
It's not just the missing semicolon. ;)
I think that this is desired result:
The HTML part:
<div class="wrap">
<div class="background-image"></div>
<div class="right"></div>
</div>
CSS Styles
.wrap { position: relative; }
.background-image {
background-image: url("http://www.worldswallpapers.org/wp-content/uploads/2014/02/Nature-Wallpapers-2014-2.jpg");
background-size: cover;
filter: blur(5px);
-webkit-filter: blur(5px);
height: auto;
min-height: 100%;
min-width: 100%;
position: absolute;
left: 0;
right: 0;
}
.right {
box-sizing: border-box;
position: relative;
padding: 50px 20px;
width: 100%;
min-height: 400px;
max-height: auto;
margin-bottom: 5px;
background: rgba(255, 255, 255, 0.3);
}
End here's the working pen: http://codepen.io/madcorp/pen/jgptv
You are missing the semicolon after the background image url:
.background-image {
background-image: url("http://www.worldswallpapers.org/wp-content/uploads/2014/02/Nature-Wallpapers-2014-2.jpg");
[other rules...]
}