This question already has answers here:
How to apply a CSS filter to a background image
(22 answers)
Closed 2 years ago.
I am making a background image, making it darker and blurry. I also need to keep the texts all clear and unaffected by blurriness. I've written so many text already, and I am trying to figure out to bring them all back to clarity.
So far I have:
In HTML:
<body>
<div class="bg">
</div>
</body>
In CSS:
body, html {height: 100%; width:100%;}
.bg {
background-image: url("https://www.worldofhanszimmer.com/wp-content/uploads/2018/10/03_HansZimmer_Frank_Embacher_Berlin_print_klein-87.jpg");
filter: blur(3px);
-webkit-filter: blur(3px);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Help would be much appreciated.
I think that this would be what you were looking for:
https://css-tricks.com/apply-a-filter-to-a-background-image/
I have also provided a runnable code snippet for your convenience:
body {
height: 100vh;
padding: 0;
display: grid;
align-content: center;
justify-content: center;
}
.bg {
width: 300px;
height: 300px;
display: grid;
place-items: center;
color: white;
position: relative;
}
.bg::before {
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
background-image: url(https://www.worldofhanszimmer.com/wp-content/uploads/2018/10/03_HansZimmer_Frank_Embacher_Berlin_print_klein-87.jpg);
background-size: cover;
filter: blur(3px);
}
.module-inside {
position: relative;
font: bold 42px sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title>Title of the page</title>
</head>
<body>
<div class="bg">
<div class="module-inside">Content</div>
</div>
</body>
</html>
This will work:
Working example: https://jsbin.com/coduvusova/edit?html,css,output
HTML:
<div class="wrapper">
<div class="bg">
</div>
<div class="content">
<p>
This is the text...
</p>
</div>
</div>
CSS:
body,
html {
height: 100%;
width: 100%;
}
.wrapper {
position: relative;
}
.bg {
position: absolute;
min-height: 500px;
width: 100%;
background-image: url("https://www.worldofhanszimmer.com/wp-content/uploads/2018/10/03_HansZimmer_Frank_Embacher_Berlin_print_klein-87.jpg");
filter: blur(3px);
-webkit-filter: blur(3px);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.content {
min-height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
p {
background-color: red;
color: white;
padding: 5px 10px;
z-index: 2;
}
This might help
body, html {
height: 100%; margin: 0;font-family: Arial, Helvetica, sans-serif;}
.bg {
background-image: url("https://www.worldofhanszimmer.com/wp-content/uploads/2018/10/03_HansZimmer_Frank_Embacher_Berlin_print_klein-87.jpg");
filter: blur(8px);
-webkit-filter: blur(8px);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bg-text {
color: white;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80%;
padding: 20px;
text-align: center;
}
<div class="bg"></div>
<div class="bg-text">
<h1>Your text</h1>
</div>
Related
This question already has answers here:
How to apply a CSS filter to a background image
(22 answers)
Closed 5 months ago.
Is there any possible way to make text not blur (not changing the html code)
I want to make only background blurry and text not blurry.
My code looks like this
.background {
height: 400px;
background-image: url(photo);
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
filter: blur(1px);
}
<div class="background">
Home
</div>
I moved the background image to an absolutely positioned pseudo element and gave it a negative z-index. I set the inset to 0 as a shorthand to cover the entire parent's dimensions. This allows the text to still be visible but not be part of the blur effect.
.background {
height: 400px;
position: relative;
}
.background:before {
content: '';
position: absolute;
inset: 0;
background-image: url("https://images.unsplash.com/photo-1659536002780-73275f63f11c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=900&q=60");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
filter: blur(2px);
z-index: -1;
}
#something {
color: white;
font-size: 2rem;
}
html, body {
margin: 0;
}
<div class="background">
Home
</div>
This is an approach to follow, especially if you don't want to change the html code as it is (code: https://jsfiddle.net/)
.background {
align-items: center;
display: flex;
justify-content: center;
height: 100%;
width: 100%;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 5px;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
max-width: 50%;
max-height: 50%;
padding: 20px 40px;
}
html,
body {
height: 100%;
width: 100%;
}
body {
background-image: url(https://picsum.photos/id/1080/6858/4574), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
<div class="background">
Home
</div>
So what I currently have is a parallax effect that works fine, but I can't figure out how to make one section "slide up" and reveal the next section, making it look like a smooth section transition. Currently my content on the second section just keeps scrolling down until it's in its place, and I can't seem to make it appear behind the first section. I currently have this: https://jsfiddle.net/165pw4ks/3/.
index.html:
<div class="parallax-wrapper">
<div class="frame-top"></div>
<section class="parallax-section part1">
<div class="frame-bottom"></div>
<div class="part1-sticky-container">
<div class="part1-sticky">
</div>
</div>
</section>
<section class="parallax-section part2">
<div class="part2-content">
<h1 class="part2-text">
Some text here
</h1>
</div>
</section>
</div>
style.css:
body {
margin: 0;
}
.parallax-wrapper {
top: 100vh;
}
.parallax-section {
position: relative;
}
.part1 {
background: url("https://place-hold.it/1920x1080") no-repeat;
width: 100vw;
height: 100vh;
background-size: cover;
z-index: 4;
}
.frame-bottom {
position: sticky;
z-index: 100;
top: calc(100vh - 40px);
height: 40px;
width: 100%;
background-color: #111;
}
.part2 {
margin: 0;
background: url("https://place-hold.it/1920x1080") no-repeat;
background-size: 100vw;
width: 100vw;
height: 100vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index: 1;
}
.part2-content {
position: sticky;
width: 30rem;
height: 5rem;
z-index: 1;
background-attachment: scroll;
background-color: transparent;
margin-left: calc(50% - 15rem);
top: calc(50% - 2.5rem);
}
.part2-text {
margin: 0;
color: white;
font-size: 32px;
text-align: center;
}
What I am attempting to make is something like on this picture:
Any help would be appreciated.
So I needed to darken the background on my web app, but need the foreground to still have 100% brightness. Currently my CSS is as follows:
.background {
background-image: url(./background.jpg);
background-size: cover;
background-position: center;
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
filter: grayscale(30%) brightness(30%);
font-family: Oswald, sans serif;
text-align: center;
color: #FFF;
}
.name {
margin: 10px;
font-size: 120px;
}
.foreground {
margin: auto;
filter: unset;
}
<div className="background">
<div className="foreground">
<h1 className="name">
Hello World!
</h1>
</div>
</div>
My title (in the foreground div, with the class "name") is appearing darkened like the background still, how can I make sure it doesn't follow the same filters as the background?
I'm pretty sure any of the content you throw in as a child to that outer background is going to inherit the filter - you were on the right track with absolute positioning as a workaround. Place the foreground on top of the background instead of it inheriting that position through box model logic.
See here:
CodePen
body {
margin:0;
padding:0;
}
.background {
background-image: url("https://picsum.photos/200/300");
background-size: cover;
background-position: center;
height: 100vh;
width: 100vw;
filter: grayscale(30%) brightness(30%);
font-family: Oswald, sans serif;
text-align: center;
position:relative;
}
.foreground {
width:100vw;
height: 100vh;
text-align:center;
position:absolute;
z-index:500;
top:0;
}
.name {
font-size: 120px;
color:white !important;
}
<div class="background">
</div>
<div class="foreground">
<div class="name">
Hello World!
</div>
</div>
Try something like adding one extra div for background image will give you desire result.
.img {
background: url('https://c.ndtvimg.com/qqdl3rn8_15-august_625x300_13_August_18.jpg');
background-size: cover;
background-position: center;
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
filter: grayscale(30%) brightness(30%);
font-family: Oswald, sans serif;
text-align: center;
color: #FFF;
}
.name {
margin: 10px;
font-size: 120px;
color: #ff0000;
}
.foreground {
margin: auto;
z-index: 1;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
<div class="background">
<div class="img">test</div>
<div class="foreground">
<h1 class="name">
Hello World!
</h1>
</div>
</div>
I am trying to make a parallax for the first time and am having troubles.
I'm following this tutorial and then trying to work backwards. The code isn't working however and I'm not sure where I made the mistake, I jumped around to a few other tutorials and tried to adjust the names of different divs and CSS blocks so the code is a bit messy right now.
.html {
height: 100%;
overflow: hidden;
}
.body {
max-width: 30px color: #fff;
margin: 0;
padding: 0;
perspective: 1px;
transform-style: preserve-3d;
height: 100% overflow-y: scroll;
overflow-x: "Luna"
}
header {
box-sizing: border-box;
min-height: 100vh;
padding 30vw 0 5vw;
position: relative;
transform-style: inherit;
width: 100vw;
}
header h1 {
margin-top: -100px;
}
header,
header:before {
background: 50% 50% / cover;
}
header::before {
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
display: block;
background-image: url(picture1.jpg);
background-size: cover;
transform-origin: center center 0;
transform: tranlasteZ(-1px) scale(2);
z-index: -1;
min-height: 100vh;
}
header * {
font-weight: normal;
letter-spacing: 0.2em;
text-align: center;
margin: 0;
padding: 1em 0;
}
.image1 {
background: url('img/(picture1.jpg') no-repeat center;
background-size: cover;
background-attachment: fixed;
height: 500px
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Schade's Parralax</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<p>Hi My name is schade I wrote this so I could have a test of my program.</p>
<div class="image1"> </div>
</div>
</body>
</html>
In first use a container element and add a background image to the container with a specific height. Then use the background-attachment: fixed to create the actual parallax effect.
body,
html {
height: 100%;
}
h1 {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
text-transform: uppercase;
text-align: center;
font-family: Helvetica;
font-size: 75px;
}
.parallax {
background-image: url('https://images.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
height: 100%;
/* Parallax scrolling effect */
background-attachment: fixed; // Try to remove this property
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.content {
height: 300px;
line-height: 300px;
background: #ededed;
position: relative;
z-index: 1;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="parallax"></div>
<div class="content">
<h1>content</h1>
</div>
<div class="parallax"></div>
</body>
</html>
Some mobile devices have a problem with background-attachment: fixed. You can use media queries to turn off the parallax effect:
#media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
More info about fixed property.
I am trying to darken images using transparency (opacity) so that the foreground text can be better read.
Here is my header HTML:
.header-image {
display: block;
width: 100%;
text-align: center;
/* image must be 1900 x 500 */
background: url('back.1.jpg') no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
opacity: 1.0;
}
.headline {
padding: 120px 0;
}
.headline h1 {
font-size: 50px;
font-weight: 500;
background: #24292E;
background: rgba(36, 41, 46, 0.7);
color: #FCFCFC;
}
<header class="header-image" style="background: url(' URL TO IMAGE') center no-repeat; background-size: cover;">
<div class="headline">
<div class="container">
<h1>Headline</h1>
</div>
</div>
</header>
You will see that I added 'opacity: 1.0;' on the last line of 'header-image' but it didn't work.
Any idea where I am going wrong here?
Thanks
Well you don't want to change transition of whole div, just an image I guess. You should place it using ::before pseudo-element. Now all css attributes will apply only to ::before:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header class="header-image">
<div class="headline">
<div class="container">
<h1>Headlines</h1>
</div>
</div>
</header>
</body>
</html>
CSS:
.header-image {
position: relative;
overflow: hidden;
height: 180px;
}
.header-image:before {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.5;
background-image: url('http://placekitten.com/1500/1000');
background-repeat: no-repeat;
background-position: 50% 0;
-ms-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}
.headline {
}
.headline h1 {
position: relative;
z-index: 1;
font-size: 50px;
font-weight: 500;
background: #24292E;
background: rgba(36, 41, 46, 0.3);
color: #FCFCFC;
margin: 0;
}
https://jsbin.com/lisakez/edit?html,css,output
You can't apply opacity to a background image.
One way to get around this is to place the image you want as the background directly over the top of the container, which gives the impression it is set as the background. Then place any text directly over the top of the image by applying a higher z-index to the text.
.header-image {
position: relative;
overflow: hidden;
text-align: center;
}
.header-image img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
opacity: 0.6;
}
.headline h1 {
position: relative;
z-index: 2;
font-size: 50px;
font-weight: 500;
background: #24292E;
background: rgba(36, 41, 46, 0.7);
color: #FCFCFC;
}
<header class="header-image">
<div class="headline">
<div class="container">
<h1>Headline</h1>
<img src="your-image.jpg">
</div>
</div>
</header>
See fiddle