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...]
}
Related
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>
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'm going straight to the point here.
I want to create a simple window within an image.
outside the window will have a opacity like on the sample picture.
I'm not really good when it comes to css so please bear with me.
.section2{
}
.section2 .row{
margin: 0;
}
.the-container{
position: relative;
width: 100%;
height: 450px;
}
.the-container .text-center{
background: #fff;
opacity: .9;
}
.img-canvas{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
height: 100%;
background-image: url(https://www.aman.com/sites/default/files/styles/1371x706/public/amanpulo-location-1200-x-825.jpg?itok=4BQy9j-X);
background-size: 100% 100%;
background-position: 50% 50%;
background-attachment: scroll;
z-index: -1;
}
.window{
position:absolute;
width:50%;
height:50%;
background-size: cover;
top:0;
left:25%;
z-index: -1;
opacity: 1;
}
<section class="section2" style="height:100vh;">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="the-container">
<div class="img-canvas"></div>
<div class="window"></div>
</div>
</div>
</div>
</section>
something like this:
and here's a fiddle for you to manipulate the code:
https://jsfiddle.net/Lk21vL01/
thanks in advance.
You were very close, you just needed to apply similar styling to your .window element and use background-attachment:fixed
see this updated jsfiddle
.section2{
}
.section2 .row{
margin: 0;
}
.the-container{
position: relative;
width: 100%;
height: 450px;
}
.the-container .text-center{
background: #fff;
opacity: .9;
}
.window,
.img-canvas{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
height: 100%;
background-image: url(https://www.aman.com/sites/default/files/styles/1371x706/public/amanpulo-location-1200-x-825.jpg?itok=4BQy9j-X);
background-size: 100% 100%;
background-position: 50% 50%;
background-attachment:fixed;
z-index: -1;
opacity: 0.5;
}
.window{
position:absolute;
width:50%;
height:50%;
top:0;
left:25%;
z-index: -1;
opacity: 1;
}
Not the most proper way to achieve this, but you could use a box-shadow "hack" to create the effect you're looking for. Just set a box shadow around the window with 0 blur and a spread that will always bigger than the background (something like 1000, or even 5000 pixels).
#background {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: linear-gradient(to bottom, slategray, #333);
overflow: hidden;
}
#window {
position: absolute;
width: 250px;
height: 100px;
top: 25%;
left: 25%;
box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.75);
}
<div id="background">
<div id="window">
</div>
</div>
I have the following HTML + CSS:
.item {
position: relative;
width: 400px;
height: 400px;
background: url('http://i.imgur.com/FOmRt87.jpg') no-repeat;
}
.item .gradient {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
background: url('http://i.imgur.com/oSpOTeK.png') repeat-x center bottom;
}
<div class="item">
<div class="gradient">
</div>
</div>
It's rendered in the browser properly. But on mobile (see the attached screenshot) there's a one thick line across the gradient, I have no idea why is that.
Here's also I js fiddle: https://jsfiddle.net/tcxka242/1/
First I thought that is repeated vertically as well, but the inspector says that the rule I've set: background: url(...) repeat-x center bottom; is expanded to :
background-image: url("http://i.imgur.com/oSpOTeK.png");
background-position-x: 50%;
background-position-y: 100%;
background-size: initial;
background-repeat-x: repeat;
background-repeat-y: no-repeat;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: initial;
That's on Android Phone with Google Chrome.
Sorry but i cannot properly verify this , but i have an idea for you .
.item .gradient {
width:100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
outline: 0;
border: none;
background: url('http://i.imgur.com/oSpOTeK.png') repeat-x center bottom;
}
As you can see i have set the outline to 0 and the border to none . There's a possibility that there is an outline from the div or a hidden border .
Specifying border-top: 0px; and box-shadow: none; will work for you
.item .gradient {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
box-shadow: none;
left: 0;
background: url('http://i.imgur.com/oSpOTeK.png') repeat-x center bottom;
border-top: 0px;
}
I think this is caused on screens with high DPI. Therefore I am providing a CSS-only alternative.
https://jsfiddle.net/tcxka242/6/
.item {
position: relative;
width: 400px;
height: 400px;
background: url('http://i.imgur.com/FOmRt87.jpg') no-repeat;
}
.item:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.6) 100%);
}
I am trying to put a background image in a content div and make only the image blur but failed so far. I managed to get the background-image to show up when the code for the image is in the content div itself (code below). In other words without making an additional div for the image. But in this case the whole content obviously becomes blur if, for example, I put filter: blur(...);
The second method was to make a background-image div. But I managed either to push the content right under the image or put the image somewhere behind the content so It's not visible.
How would you propose to do a background-image and fix my issue? My codepen - http://codepen.io/anon/pen/hGBjA
CSS
h2 {
font-family: Open Sans;
color: #0099F1;
padding-left: 20px;
text-align: left;
}
#bizpartners ul {
list-style-image: url ("http://www.peopletraining.co.uk/people_training_april_2012002002.jpg");
}
.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);
border: 1px solid #000000;
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);
background-repeat: no-repeat;
}
.right p {
margin-left: 30px;
margin-top: 20px;
text-align: center;
}
I made it really quick, i hope it's ok!
FIDDLE: http://jsfiddle.net/81yawoxg/
HTML
<div class="container">
<div class="background"></div>
<div class="text">CONTENT HERE</div>
CSS
.container{
position: relative;
width: 1280px;
height: 700px;
}
.background{
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
z-index: 100;
background-image: url("http://www.worldswallpapers.org/wp-content/uploads/2014/02/Nature-Wallpapers-2014-2.jpg");
filter: blur(5px);
-webkit-filter: blur(5px);
background-repeat: no-repeat;
}
.text{
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
z-index: 200;
padding: 20px;
}