without blur . with blur
I'm a beginners for html,css. I'm trying to blur the background-images for each of my divs, but instead it shrinks it down. How do I go about blurring without it shrinking?
.parallax {
/*height: 500px;*/
height: 100vh;
font-size: 200%;
overflow-x: hidden;
overflow-y: auto;
perspective: 300px;
perspective-origin-x: 100%;
}
.parallax .title {
font-family: 'Lato', sans-serif;
font-weight: bold;
color: #424242 black;
position: absolute;
left: 50%;
top: 50%;
text-align: center;
transform: translate(-50%, -50%);
}
/* below trying to blur */
.parallax .group2 .back {
background: #ffdfba;
background-image: url("image/bubble.png");
background-size:contain;
-webkit-filter: blur(5px);
filter: blur(5px);
height: 500px;
height: 100vh;
}
<div class="group group2">
<div class="layer base">
<div class="title">
Blowing Bubbles are fun! They help calm yourself and give you qualities to breath.
</div>
</div>
<div class="layer back">
<div class="title">
</div>
</div>
</div>
Use background-size: cover for .parallax .group2 .back. The background image will cover the whole div area.
Hope it will help you
Related
I Have a problem with css filter.
I have an <img> element that is for my posts background image, this is css code for that element:
.post-background
{
height: 190px;
margin-bottom: -190px;
object-fit: cover;
object-position: 0 -90px;
width: 100%;
z-index: -1;
}
Now, I want to make that image darker with filter: brightness(50%); but when I set this property, my post content (called .post-front) disappears from the page.
You have to hover .post-background image when you hover post-item
just add following class and modify .post-front
.post-item:hover .post-background {
filter: brightness(50%);
}
.post-front {
position: absolute;
width: 100%;
display: grid;
grid-template-columns: 190px 1fr 100px;
}
remove following changes:
.post-background:hover {
filter: brightness(50%);
}
I think this is what you want. I don't know your whole code, so It is hard to guess what went wrong in your code. this is an example of how to use hover with filter.
.mybox{
height:150px;
width:250px;
border:1px solid;
position: relative;
}
.img{
width: 100%;
height:150px;
object-fit: cover;
}
.middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.textbox{
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
.mybox:hover .img{
-webkit-filter: brightness(50%) !important;
filter: brightness(50%) !important;
}
<div class="mybox">
<img class="img" src="https://www.hd-freewallpapers.com/latest-wallpapers/desktop-image-of-a-parrot-wallpaper.jpg" alt="Card image">
<div class="middle">
<div class="textbox">anyThing</div>
</div>
</div>
So I really like this kind of special effect here https://www.w3schools.com/howto/howto_css_blurred_background.asp where you can blur out a background and have the text show up. The problem that I am currently having right now is that I want to add in another wallpaper for my second content below my first content. The first content is good. Now I want my second content to be in the second wallpaper as you scroll. Kind of like creating a parallax effect, but instead I am am creating my own unique website.
This time I want a blurring background (wallpaper number two) while having the stuff where I already want it placed and have it focus.
Is there a way to achieve that?
Starting where the bg-image2, I want the h1, and the p, inside bg-image2 to focus over the blurring background image.
NOTE: The wallpaper will not show in the snippet below because I already got the pictures I need in my folder which is located in my computer.
body,
html {
height: 100%;
}
* {
box-sizing: border-box;
}
.bg-image {
/* The image used */
background-image: url("images/wallpaper1.jpg");
/* Add the blur effect */
filter: blur(8px);
-webkit-filter: blur(8px);
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Position text in the middle of the page/image */
.bg-text {
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/opacity/see-through */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80%;
padding: 20px;
text-align: center;
}
.bg-image2 {
/* The image used */
background-image: url("images/wallpaper2.jpg");
/* Add the blur effect */
filter: blur(8px);
-webkit-filter: blur(8px);
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.profilePicture {
position: absolute;
left: 50%;
margin: 200px auto;
transform: translate(-50%, -50%);
}
<div class="bg-image"></div>
<div class="bg-text">
<h1>My name is Stackoverflow</h1>
<p>And I am a website</p>
</div>
<div class="bg-image2">
<!-- This is the part where I want my stuff to not be blurred and focus -->
<div class="profilePicture">
<img src="images/profilePic.jpg" style="width: 170px; height: 170px; border-radius:50%;">
<h1>This is a title</h1>
<p>This is just a paragraph</p>
</div>
</div>
Is that the result you are looking for?
https://codepen.io/anon/pen/exVRyy
All i did was to create a div around the bg-image2 and profilePicture, so that the blur on bg-image2 doesn't affect profilePicture, then set that div to position:relative; , so that the profilePicture can be placed in the middle like you did.
Here is your HTML edited:
<div class="bg-image"></div>
<div class="bg-text">
<h1>My name is Stackoverflow</h1>
<p>And I am a website</p>
</div>
<div class="bg-test">
<div class="bg-image2">
<!-- This is the part where I want my stuff to not be blurred and focus -->
</div>
<div class="profilePicture">
<img src="https://images.pexels.com/photos/1253661/pexels-photo-1253661.jpeg?cs=srgb&dl=android-wallpaper-bluhen-blume-1253661.jpg&fm=jpg" style="width: 170px; height: 170px; border-radius:50%;">
<h1>This is a title</h1>
<p>This is just a paragraph</p>
</div>
</div>
And the CSS:
body,
html {
height: 100%;
}
* {
box-sizing: border-box;
}
.bg-image {
/* The image used */
background-image: url("https://images.unsplash.com/photo-1507608616759-54f48f0af0ee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80");
/* Add the blur effect */
filter: blur(8px);
-webkit-filter: blur(8px);
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Position text in the middle of the page/image */
.bg-test {
position:relative;
}
.bg-text {
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/opacity/see-through */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80%;
padding: 20px;
text-align: center;
}
.bg-image2 {
/* The image used */
background-image: url("https://whatthenewsblog.files.wordpress.com/2015/03/ecl-ann.jpg");
/* Add the blur effect */
filter: blur(8px);
-webkit-filter: blur(8px);
/* Full height */
height: 100vh;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.profilePicture {
position: absolute;
left: 50%;
top:50%;
margin: 0 auto;
transform: translate(-50%, -50%);
}
I was facing a similar issue. After a lot of searches, I found the perfect solution.
You can use backdrop-filter.
Your code:
body,
html {
height: 100%;
}
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.bg-image {
/* The image used */
background-image: url("https://images.unsplash.com/photo-1507608616759-54f48f0af0ee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80");
/* Add the blur effect */
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Position text in the middle of the page/image */
.bg-test {
position:relative;
}
.bg-text {
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/opacity/see-through */
color: white;
font-weight: bold;
backdrop-filter: blur(8px);
border: 3px solid #f1f1f1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80%;
padding: 20px;
text-align: center;
}
.bg-image2 {
/* The image used */
background-image: url("https://blog.prezi.com/wp-content/uploads/2019/03/patrick-tomasso-208114-unsplash-1024x768.jpg");
/* Add the blur effect */
/* Full height */
height: 100vh;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.profilePicture {
backdrop-filter: blur(8px);
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
left: 50%;
color: white;
top:50%;
margin: 0 auto;
transform: translate(-50%, -50%);
}
<div class="bg-image">
<div class="bg-text">
<h1>My name is Stackoverflow</h1>
<p>And I am a website</p>
</div>
</div>
<div class="bg-test">
<div class="bg-image2">
<!-- This is the part where I want my stuff to not be blurred and focus -->
<div class="profilePicture">
<img src="https://images.pexels.com/photos/1253661/pexels-photo-1253661.jpeg?cs=srgb&dl=android-wallpaper-bluhen-blume-1253661.jpg&fm=jpg" style="width: 170px; height: 170px; border-radius:50%;">
<h1>This is a title</h1>
<p>This is just a paragraph</p>
</div>
</div>
</div>
I know its been so long since you asked and you got the answers.
Hope this will be helpful for someone else :)
I modified code from cryptomothy
I'm trying to figure out how to blur the background image of a div. The goal is to only blur the background image of the div and not the background of the page itself or the div contents.
Here is an example div:
<header class="intro">
<div class="background-image"></div>
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="brand-heading">Grayscale</h1>
<p class="intro-text">A free, responsive, one page Bootstrap theme.
<br>Created by Start Bootstrap.</p>
<a href="#about" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</div>
</div>
</header>
The CSS:
body {
width: 100%;
height: 100%;
font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: white;
background-color: black;
}
.intro {
display: table;
width: 100%;
height: auto;
padding: 100px 0;
text-align: center;
color: white;
}
.intro .background-image {
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
background-image: url(https://previews.123rf.com/images/denisovd/denisovd1203/denisovd120301652/12705959-wall-of-wooden-barrels-Stock-Photo-barrels-whiskey-cellar.jpg) no-repeat bottom center scroll;
background-color: black;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
.intro .intro-body {
z-index: 9999;
display: table-cell;
vertical-align: middle;
}
Here is the JS fiddle containing the CSS I've tried:
http://jsfiddle.net/80jzdvqp/
I would high appreciate some help!
Here is the solution
<body><header class="intro">
<div class="background-image"></div>
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="brand-heading">Grayscale</h1>
<p class="intro-text">A free, responsive, one page Bootstrap theme.
<br>Created by Start Bootstrap.</p>
<a href="#about" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</div>
</div>
</header>
</body>
Css :
body {
width: 100%;
height: 100%;
font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: white;
background-color: black;
margin: 0;
padding: 0;
}
.intro {
display: table;
width: 100%;
height: auto;
padding: 100px 0;
text-align: center;
color: white;
}
.intro .background-image {
z-index: -1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url(https://wallpaperbrowse.com/media/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg);
-webkit-filter: blur(10px);
filter: blur(10px);
}
.intro .intro-body {
z-index: 9999;
display: table-cell;
vertical-align: middle;
}
I have created a example using div, this includes a parent div,image and text. Now if I don't apply any position to elements present inside then they will align one after another, but to make image as background of div I have set it's position as absolute and using filter you can apply blur to the image and then using z-index align them i.e text and image. Hope this helps.
The filter property provides graphical effects like blurring,
sharpening, or color shifting an element. Filters are commonly used to
adjust the rendering of images, backgrounds, and borders.
div{
width:200px;
height:200px;
overflow:hidden;
position:relative;
}
div > img{
width:auto;
height:100%;
z-index:1;
top:0;
left:0;
position:absolute;
filter:blur(10px);
}
div > p{
text-align:center;
top:60px;
z-index:9;
position:relative;
}
<div>
<p>Demo text.Demo text.Demo text.Demo text.Demo text.</p>
<img src="https://previews.123rf.com/images/denisovd/denisovd1203/denisovd120301652/12705959-wall-of-wooden-barrels-Stock-Photo-barrels-whiskey-cellar.jpg">
</div>
Hello take a look at this picture of the comp I am trying to mimic through html and css.
The top div is a regular div with a white background.
The bottom div will have a background video.
The html structure is simple and will look something like this:
<div class="top-div">
<!-- stuff -->
</div>
<div class="bottom-div">
<video autoplay="" loop="">
<source src="myvideo.mp4" type="video/mp4">
<source src="myvideo.ogg" type="video/ogg">
</video>
</div>
CSS:
.top-div {
height: 500px;
width: 100%
}
.bottom-div {
height: 500px;
width: 100%;
position: relative;
}
.banner video {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
background: url() no-repeat;
background-size: cover;
filter: brightness(30%);
-webkit-filter: brightness(30%);
}
I know how to properly set up the video, but I am unsure how to go about making the slanted effect.
I was thinking I could use a psuedo element to create a triangle and place it on top of the div and have it z indexed over the video div, but that seems a little hacky.
Is there a best practice to do this? I didnt write this question for someone to give me full code. I just need someone to point me in the right direction and I can do it myself.
Thanks!
Easy and simple way is use CSS transform: skew. Add this inside your div where you want to be slanted then adjust the degrees.
transform: skew(0deg,-5deg);
Above skew style means (0deg(x), -5deg(y)) axis.
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin:0;
}
.headerimage {
background-color:#003a6f;
height:300px;
width:100%;
background-size:cover;
position:relative;
z-index:-1;
}
#backshape {
z-index:1;
display:block;
float:left;
margin-top:-100px;
width:100%;
background:white;
transform:skew(0deg,10deg);
-ms-transform:skew(0deg,10deg); /* IE 9 */
-webkit-transform: skew(0deg,-5deg);
}
.full-image {
width: 100%;
height: 200px;
}
.footer {
height: 100px;
background: rgb(253, 253, 253);
width: 100%;
margin-top: 425px;
z-index: 500;
position: relative;
}
<div class="headerimage">
</div>
<div id="backshape">
<img src="http://placehold.it/540x500" class="full-image">
</div>
<div class="footer">
</div>
I've put together a pen using skew as #adam suggested.
http://codepen.io/anon/pen/XNMPWG
The HTML
<header class="header" id="header">
<div class="skew">
<div class="header-inner">
<h1 class="logo">White space</h1>
</div>
</div>
</header>
<div class="container">
<main class="main">
<div class="main-container">
<section>
<h1>Video</h1>
<p></p>
</section>
</div>
</main>
</div>
The CSS
html {
font-family: 'Roboto Condensed';
color: #fff;
background: #fafafa;
}
body {
padding: 0em 0em;
}
.header {
z-index: 1;
position: relative;
}
.header .skew:before {
content: '';
position: absolute;
left: 0;
bottom: 0;
overflow: visible;
width: 100%;
height: 250px;
background: #00bcd4;
z-index: -1;
-webkit-transform: skewY(-10deg);
-moz-transform: skewY(-10deg);
-ms-transform: skewY(-10deg);
-o-transform: skewY(-10deg);
transform: skewY(-10deg);
-webkit-backface-visibility: hidden;
backface-visibility: initial;
}
.header .skew .header-inner {
padding: 20px;
margin-left: auto;
margin-right: auto;
}
.logo {
margin: 0;
}
section
{
text-align:center;
color: white;
background-color: red;
height: 100vh;
width: 100%;
position: absolute;
top: 0;
}
section h1 {
text-align: center;
color: white;
padding-top: 150px;
}
skewY() skews an element along the Y-axis by the given angle.
transform: skewY(-10deg);
The section has a background image with content on top.
I want to decrease the brightness of only the background image in the section and not the content.
I have tried the below, however, the brightness still applies to all and not just the image.
<!-- Section -->
<div id="section1">
<div id="content">
<h1 class="heading">headline text</h1>
<h4 class="subHeading"> Sub-headline text</h4>
<!-- Call to action button -->
<br><br>
<button> Join our wait list </button>
</div>
#section1 {
background: url('../images/headerimage1.jpg') center center no-repeat;
background-size: cover;
-webkit-filter: brightness(0.5);
filter: brightness(0.5);
padding-top: 100px;
padding-bottom: 100px;
padding-left: 10%;
padding-right: 10%;
color: white;
text-align: center;
}
#content {
-webkit-filter: brightness(1);
filter: brightness(1);
}
You can add a new element of transparent black that overlays just the background, with the contents of your div sitting in front of it.
<div id="section1">
<div id="content">
</div>
</div>
CSS:
#section1 {
background: url('../images/headerimage1.jpg') center center no-repeat;
background-size: cover;
position: relative;
}
#content {
position: absolute;
}
#section1::before {
content: '';
display: block;
position: absolute;
background-color: #000;
opacity: 0.5;
width: 100%;
height: 100%;
}