I want the div to appear like it is blurring the background image of the page. Should work when div position is changed. Consider window resizing.
I was able to come up with a neat solution that requires no js. The technique was to use the same backgroud with specific common settings
JSFIDDLE
HTML:
<div class="mydiv">
<div class='bgblur'></div>
</div>
CSS:
body {
background: url('/etc/bg.jpg') no-repeat center center fixed;
background-size: cover;
}
.bgblur {
background: url('/etc/bg.jpg') no-repeat center center fixed;
background-size: cover;
-webkit-filter: blur(26px);
-moz-filter: blur(26px);
position: absolute;
height: 100%;
width: 100%;
z-index: -1;
}
.mydiv {
position: relative;
overflow: hidden;
// not necessary
border: 2px solid black;
height: 200px;
width: 200px;
}
Related
i am trying to create a frosted glass (blurred) background with a circle shape section of it unblurred with no success
this is what i got so far in sandbox editor, but there is a problem with this implementation
the area of the circle is staying blurred
https://codesandbox.io/s/frosted-glass-background-with-spotlight-fwdhd
note: the sandbox has been created with vue 2 but it is a simple problem to reproduce in vanilla
i think that it can be done with canvas html tag but i am not sure on the way to implement it.
can some one please help?
You can do this in CSS by using mask-image and CSS filter.
The example below uses a transparent PNG with a circle as the mask, and the filter property to blur the image below.
img {
max-width: 100%;
display: block;
}
.container {
width: 400px;
height: 300px;
margin: 1em auto;
position: relative;
}
.container img {
height: 100%;
width: 100%;
object-fit: cover;
-webkit-mask-size: cover;
mask-size: cover;
position: absolute;
top: 0;
left: 0;
}
.container img.overlay {
filter: blur(10px);
}
.container img.underlay {
-webkit-mask-image: url(https://i.imgur.com/l4o4AkX.png);
mask-image: url(https://i.imgur.com/l4o4AkX.png);
z-index: 2;
}
<div class="container">
<img class="underlay" src="https://cdn.glitch.com/04eadd2b-7dd4-43fc-af3d-cff948811986%2Fballoons.jpg?v=1597755892826" alt="Balloons">
<img class="overlay" src="https://cdn.glitch.com/04eadd2b-7dd4-43fc-af3d-cff948811986%2Fballoons.jpg?v=1597755892826" alt="Balloons">
</div>
Is it possible to use CSS to make the background of the top 5% of a page a solid color, and two different background images for the remaining 65% and 30%?
This is how I need it to look:
Edit 2: So there are numerous ways to accomplish this.
Pseudo elements: I think this is the best method, as it avoids extra elements in the markup and allows good control of scaling/cropping. Example below.
Multiple containers: Works just like pseudo elements, but with the added disadvantage of extra elements in the markup. The best support across older browsers, but these days, pseudo elements are quite well supported. Example below.
Multiple backgrounds: This may be suitable for solid colors or gradients, but for most images scaling and cropping will be problematic if using percentages for size. Example below.
1. Pseudo Elements
Just add ::before and ::after pseudo elements to the pagewrapper, supply background images, and position accordingly.
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.pagewrap {
position: relative;
height: 100%;
background-color: green;
}
.pagewrap::before {
content: "";
position: absolute;
top: 5%;
left: 0;
height: 65%;
width: 100%;
background-image: url("https://i.postimg.cc/nckTrT6T/21.jpg");
background-size: cover;
background-position: center;
}
.pagewrap::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 30%;
width: 100%;
background-image: url("https://i.postimg.cc/qvDLXqB3/Optical-Illusion-Brain-washer-27.jpg");
background-size: cover;
background-position: center;
}
<div class="pagewrap">
</div>
2. Multiple Containers
Just replace the pseudo elements in above example with container divs in the html.
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.pagewrap {
position: relative;
height: 100%;
background-color: green;
}
.mid65 {
position: absolute;
top: 5%;
left: 0;
height: 65%;
width: 100%;
background-image: url("https://i.postimg.cc/nckTrT6T/21.jpg");
background-size: cover;
background-position: center;
}
.btm30 {
position: absolute;
bottom: 0;
left: 0;
height: 30%;
width: 100%;
background-image: url("https://i.postimg.cc/qvDLXqB3/Optical-Illusion-Brain-washer-27.jpg");
background-size: cover;
background-position: center;
}
<div class="pagewrap">
<div class="mid65"></div>
<div class="btm30"></div>
</div>
3. Multiple Background Images
Use multiple background images:
background-image: url("image1.jpg"), url(image2.jpg);
then use the same comma separated syntax
for background-repeat: no-repeat, no-repeat; (same value need not repeat)
and background-size: 100% 30%, 100% 65%;,
etc..
The background position is the tricky part though, because it doesn't seem to work as one might expect (Temani Afif kindly provided a very informative link in the comments below ). But this seems to achieve the desired result of 5% 65% 30%:
background-position: bottom left, 0% 15%;
Edit: Replaced gradients with actual images so you can see how image stretching may be an issue with this method. More suitable for solid colors or gradients.
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.pagewrap {
position: fixed;
width: 100%;
height: 100%;
background-color: blue;
background-image: url("https://i.postimg.cc/qvDLXqB3/Optical-Illusion-Brain-washer-27.jpg"), url("https://i.postimg.cc/nckTrT6T/21.jpg");
background-size: 100% 30%, 100% 65%;
background-position: bottom left, 0% 15%;
background-repeat: no-repeat;
}
<div class="pagewrap"></div>
In the photo above where the gray container is set I want to add a high contrast black and white photo filter.
Iv tried scaling the opacity and using the filter css3 property but have had no success.
The body is the background image and the child container is the gray box. I want to just have the child show the black and white.
body{
background: url('../images/wtc.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.profile-box{
background-color: grey;
width: 80%;
height: 60%;
margin-top: 180px;
margin-bottom: 100px;
}
Easiest solution, but least supported: backdrop-filter
The most straight-forward way, is to actually use the rather new backdrop-filter property. Unfortunately it is only supported in Safari (and Chrome Canary) so far.
body{
background: url('https://i.imgur.com/uh5YLj5.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0;
padding: 0;
}
.profile-box{
width: 80%;
height: 60%;
/* Backdrop filter */
-webkit-backdrop-filter: grayscale(100%);
backdrop-filter: grayscale(100%);
/* Additional styles for positioning */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="profile-box"></div>
The code snippet above will render something similar to this on Safari:
Complicated solutions, but more cross-browser compatible
Using the deprecated clip:
An alternative solution that will see more support across browser is to use the clip: rect(...) property. This property has been, however, deprecated in favour of clip-path (see next section for the updated solution). Since you have specified on your code that you wanted a grayscale area that is 80% in width and 60% in height (relative to viewport, so that is equivalent to 80vw and 60vh), we can tune the arguments passed into clip: rect(...) as such:
clip: rect(30vh, 90vw, 70vh, 10vw);
The coordinates represent offset from the top/left corners of the page of the top, right, bottom, left edges of the clip rectangle. To center a 80vw horizontally, we need 10vw on left and right (adding up to 20vw). To center a 60vh vertically, we need 20vh on top and bottom (adding up to 40vh). This computes to:
20vh from the top (this is the TOP border measured from top)
90vw from the left (this is the RIGHT border measured from left)
80vh from the top (this is the BOTTOM border measured from top)
10vw from the left (this is the LEFT border measured from left)
The image below will help you explain the calculations more:
body{
background: url('https://i.imgur.com/uh5YLj5.jpg') no-repeat center center fixed;
background-size: cover;
margin: 0;
padding: 0;
}
.profile-box {
background: url('https://i.imgur.com/uh5YLj5.jpg') no-repeat center center fixed;
background-size: cover;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
filter: grayscale(100%);
clip: rect(20vh, 90vw, 80vh, 10vw);
}
<div class="profile-box"></div>
Using the new property, clip-path:
Even though it is a more modern standard compared to clip, it still suffers from non-support in IE or Edge. The arguments of clip-path: inset(...) are not comma-separated, unlike that of clip: rect(...), and it is slightly more intuitive to use because each edge is measure relative to the corresponding edge of the browser. In that case, using the same calculation logic we have established above, the arguments will be:
20vh from the top
10vw from the right
20vh from the bottom
10vw from the left
In other words, something like this:
clip-path: inset(20vh 10vw 20vh 10vw);
body{
background: url('https://i.imgur.com/uh5YLj5.jpg') no-repeat center center fixed;
background-size: cover;
margin: 0;
padding: 0;
}
.profile-box {
background: url('https://i.imgur.com/uh5YLj5.jpg') no-repeat center center fixed;
background-size: cover;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
filter: grayscale(100%);
clip-path: inset(20vh 10vw 20vh 10vw);
}
<div class="profile-box"></div>
What you are trying to do is usually a pretty hard thing to achieve with css but it is possible. I think this answer will help you:
TAKEN FROM https://stackoverflow.com/a/19382357/8312881
written by edensource
If it has to be dynamic, you should have some trouble, but you can
have somewhere to start with this :
HTML
<div class="background"></div>
<div class="mask">
<div class="bluredBackground"></div>
</div>
<div class="content"></div>
CSS
.content {
width: 70%;
height: 70%;
border:2px solid;
border-radius:20px;
position: fixed;
top: 15%;
left: 15%;
z-index:10;
background-color: rgba(168, 235, 255, 0.2);
}
.background {
width:100%;
height:100%;
background-image:url('http://www.travel.com.hk/region/time_95.jpg');
z-index:2;
position:fixed;
}
.bluredBackground {
width:100%;
height:100%;
display:block;
background-image:url('http://www.travel.com.hk/region/time_95.jpg');
z-index:1;
position:absolute;
top:-20%;
left:-20%;
padding-left:20%;
padding-top:20%;
-webkit-filter: blur(2px);
}
.mask {
width: 70%;
height: 70%;
border:2px solid;
border-radius:20px;
position: fixed;
top: 15%;
left: 15%;
z-index:10;
overflow:hidden;
}
FIDDLE
http://jsfiddle.net/sE4Fv/
FIDDLE with greyscale filter
http://jsfiddle.net/sE4Fv/926/
(you did not respond to my question in comments, so i still go with an average answer untill feedback shows ;) )
you can use an rgba() color if the matter is to darken your image.
A simple example with background or image to show the idea, a third example showing the use of the grayscale(X%) filter if the matter is turn blac & white the image:
.filter {
position: relative;
float: left;
width: 50%;
}
.filter:before {
content: '';
position: absolute;
top: 15%;
right: 5%;
bottom: 15%;
left: 5%;
background: rgba(0, 0, 0, 0.5);
}
.filter img {
display: block;
width: 100%;
}
.filter.bg {
box-sizing: border-box;
padding: 1.5% 2.5%;
background: url(http://lorempixel.com/1200/250/city/5) center / 100% auto;
}
.bg:before {
display: none;
}
.content {
min-height: 7.45vw;
height: 100%;
background: rgba(0, 0, 0, 0.5)
}
.grayscale .content {
background: url(http://lorempixel.com/1200/250/city/5) center / 50vw auto;
filter: grayscale(100%);
}
body {
margin: 0;
}
<div class="filter">
<img src="http://lorempixel.com/1200/250/city/5" alt="my nice City" /></div>
<div class="filter bg ">
<div class="content">Some content hover the bg </div>
</div>
<div class="filter bg grayscale ">
<div class="content">Some content hover the bg </div>
</div>
Your body is ok, just the .profile-box needs some fixes:
div.profile-box {
background: url('https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg') no-repeat center center fixed;
background-size: cover;
filter: grayscale(100%);
// width & height etc...
}
Attach your background in the box as well and add filter: grayscale(100%)
Demo
On the website of Nintendo Online is a post image, which has little dots on it due to CSS. I would like to do this too, but without using a div container around the image.
Here is my current code:
.image {
background: url(http://nintendo-online.de/img/bg-game-header-cover.png) repeat;
}
<img class="image" src="http://media2.giga.de/2013/06/osx_hero_2x.jpg" height="250" width="500px">
What do I have to change to make it visible? If I set z-index to 1 the image goes one stage up either. Is it even possible?
use :before or :after
http://jsfiddle.net/omjo21mk/
div {
background: url(http://media2.giga.de/2013/06/osx_hero_2x.jpg) repeat;
position: relative;
min-height: 200px;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
div:before{
content: '';
position: absolute; top: 0; left: 0;
width: 100%;
height: 100%;
background: url(http://nintendo-online.de/img/bg-game-header-cover.png) repeat;
}
<div></div>
Just use multiple urls in the background css
.image {
background: url(http://nintendo-online.de/img/bg-game-header-cover.png) repeat, url(http://media2.giga.de/2013/06/osx_hero_2x.jpg) no-repeat;
}
See it here
Lets assume I have a div with a Gradient applied as a background-property.
I now want to overlay a black PNG (of smaller size) and set the PNG to have a background-blend-mode of overlay. Unfortunately I have no idea on how to achieve this.
I know I can have a working background-blend-mode when I render the Gradient into the CSS of the Div with the PNG image like:
background: url(../img/plus.png), linear-gradient(to bottom, #24cae4 0%, #1f81e3 100%);
background-blend-mode: overlay;
This however results in the Gradient being as small as the actual PNG, which is not a desired effect, like this:
What I want to achieve is this with pure CSS (if possible):
Here a Codepen to illustrate what I'm trying to do: http://codepen.io/anon/pen/zxOXGP
Notice the Black Icon. I wanna overlay this.
Try using mix-blend-mode instead of background-blend-mode and switch to simple text for the plus-sign or a webfont for more custom figures.
Example Codepen of the below:
.placeholder {
position: relative;
width: 400px;
height: 300px;
background-image: -moz-linear-gradient(#ff0000, #0000ff);
background-image: -webkit-linear-gradient(#ff0000, #0000ff);
background-image: linear-gradient(#ff0000, #0000ff);
}
.center {
position: absolute;
top: 25%;
width: 100%;
font-size: 120px;
}
.center span {
display: block;
text-align: center;
color: red;
mix-blend-mode: screen;
}
<div class="placeholder">
<div class="center"><span>+</span>
</div>
</div>
The gradient sandwich
Ingredients
The :before forms the bottom z-layer with z-index: 1, it is full opacity
The .content div forms the filling, central z-layer, with z-index: 2. It needs position: relative to take its z-index.
The :after forms the top z-layer with z-index: 3 and completes our lunch item. It is half opacity.
This is the tasty result:
Full Example
I have removed all but the standard CSS3 gradient for simplicity. View in a supporting browser.
.gradient {
position: relative;
height: 200px;
padding: 20px;
}
.gradient:before,
.gradient:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
display: block;
background-size: 100%;
background-image: linear-gradient(to bottom, #24cae4 0%, #1f81e3 100%);
opacity: 0.5;
}
.gradient:before {
opacity: 1;
z-index: 1;
}
.gradient:after {
z-index: 3;
}
.overlayed_image {
position: relative;
width: 64px;
height: 64px;
display: block;
margin: auto;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
background-image: url(http://cdn.flaticon.com/png/256/9029.png);
}
.content {
position: relative;
z-index: 2;
}
<div class="gradient">
<div class="content">
You can see me!
<div class="overlayed_image"></div>
</div>
</div>