I am trying to make a simple parallax effect, however I also want to add a custom semi-transparent color to the background image.
I tried many solutions, this one seemed to work however the color is applied on top of the children elements, even if I am using the ::before selector.
.spannerBg {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
background-color: rgba(255, 150, 0, 0.5);
min-height: 300px;
}
.spannerBg::before {
content: "";
display: block !important;
background-color: inherit;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
p {
font-size: x-large;
}
<div class="spannerBg" style="
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
background-image:url(https://images.pexels.com/photos/1051075/pexels-photo-1051075.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)">
<p>Somecontent</p>
</div>
<div>
beiwrfa<br>ewnifiebfia<br>fbjwqbfwebfj<br>
</div>
<div class="spannerBg" style="
background-image:url(https://images.pexels.com/photos/865711/pexels-photo-865711.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)">
<p>Somecontent</p>
</div>
<div>
<p>somecontent</p>
</div>
I saw something about using semi-transparent pngs or fake div but I would like it to be 100% css.
I also saw this question, but all answers seem to either be not css or have the same problem
You can give your .spannerBg::before a z-index: -1 and .spannerBg a z-index: 1
The before element is now moving behind its siblings.
.spannerBg {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
background-color: rgba(255, 150, 0, 0.5);
min-height: 300px;
z-index: 1;
}
.spannerBg::before {
content: "";
display: block !important;
background-color: inherit;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
p {
font-size: x-large;
}
<div class="spannerBg" style="
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
background-image:url(https://images.pexels.com/photos/1051075/pexels-photo-1051075.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)">
<p>Somecontent</p>
</div>
<div>
beiwrfa<br>ewnifiebfia<br>fbjwqbfwebfj<br>
</div>
<div class="spannerBg" style="
background-image:url(https://images.pexels.com/photos/865711/pexels-photo-865711.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)">
<p>Somecontent</p>
</div>
<div>
<p>somecontent</p>
</div>
I hope this helps:
.spannerBg {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
min-height: 300px;
}
.spannerBg::before {
content: "";
display: block !important;
background-color: inherit;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="spannerBg" style="
background-image: linear-gradient( rgba(255, 150, 0, 0.5), rgba(255, 150, 0, 0.5) ), url(https://images.pexels.com/photos/865711/pexels-photo-865711.jpeg);
">
<p>Somecontent</p>
</div>
Related
I made the "glass" (blur) effect on a div with background-img, but I don't want the background to move when scrolling.
CodePen: https://codepen.io/metsuge/pen/gOaZzzM
Any ideas?
HTML
<div class="each-img">
<div class="text-container-glass"></div>
</div>
<div class="each-img">
<div class="text-container-glass"></div>
</div>
CSS
.each-img {
overflow: hidden;
width: 600px;
height:400px;
background-image: url("https://images2.minutemediacdn.com/image/upload/c_crop,h_1414,w_2101,x_10,y_0/v1554702738/shape/mentalfloss/49786-istock_0.jpg?itok=C4VA9VSs");
background-repeat: no-repeat;
background-size: cover;
margin: 10px;
border: 5px solid transparent;
position: relative;
background-attachment: fixed;
}
.text-container-glass{
background: inherit;
width: 50%;
height: 120px;
position: absolute;
bottom: 0px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
.text-container-glass{
background: inherit;
width: 50%;
height: 120px;
position: absolute;
bottom: 0px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
.text-container-glass:before{
content: '';
position: absolute;
background: inherit;
top:0;
left:0;
right:0;
bottom:0;
filter: blur(12px);
}
It seems that the background-image is fixed to the screen itself, not the div each-img
set background-attachment: scroll; on .each-img
I have a simple page in which I want particle js animation at the background and have a button and few anchors for user to click. However, when I add particle js to a particular div, which is parent, I am not able to click the button or the anchors. I did try changing the z-index of them to higher number(z-index:2000), that didn't help either.
This is the code:
https://plnkr.co/edit/JMYVXu6I3G7kdKUWN7tc?p=preview
/* Styles go here */
body{
color:white;
}
#home {
color:white;
padding-bottom: 2em;
min-height: 100vh;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-image: url("http://www.melbourne.vic.gov.au/SiteCollectionImages/1200-buildings-898x381.jpg");
/* fallback */
background-image: linear-gradient(to bottom, rgba(0, 67, 105, 0.5) 0%, rgba(0, 67, 105, 0.5) 100%), url("http://www.melbourne.vic.gov.au/SiteCollectionImages/1200-buildings-898x381.jpg"g);
}
.home-icon {
width: 2em;
height: 2em;
text-align: center;
margin: 0.5em;
font-size: 2em;
color: #f5f5f5;
border: 2px solid #f5f5f5;
border-radius: 50%;
padding: 0.5em;
transition: all .5s ease;
z-index:1040
}
.home-icon:hover {
border: 2px solid #00B9DA;
color: #00B9DA;
}
.particles-js-canvas-el {
top: -200px;
position: relative;
height: 200px;
}
This should resolve your issue:
HTML:
<!-- particles.js container -->
<div id="particles-js">
<div class="test">AAA</div>
</div>
CSS:
canvas {
index: 0;
display: block;
vertical-align: bottom;
}
.test {
index: 50;
top: 100px;
position: absolute;
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-color: #b61924;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}}
Need help to create this background blur without blurring the text.
I have tried the css filter property, but couldn't make it look like this.
I'm not a CSS shark, so i hope someone can give me an easy solution :D
Adobe XD Background Blur:
Since you haven't provided any code so this will help you.
You can make a div with blur background using filter: blur(13px); in css and the content can't be inside the blurred div, so we will use a sibling element instead like this
body {
background: url('https://www.w3schools.com/html/img_girl.jpg') no-repeat center center fixed;
background-size: cover;
}
.blur {
background: url('https://www.w3schools.com/html/img_girl.jpg') no-repeat center center fixed;
background-size: cover;
overflow: hidden;
filter: blur(13px);
position: absolute;
height: 300px;
top: -50px;
left: -50px;
right: -50px;
bottom: -50px;
}
.widget {
border-top: 2px solid rgba(255, 255, 255, .5);
border-bottom: 2px solid rgba(255, 255, 255, .5);
height: 200px;
width: 100%;
overflow: hidden;
}
.center {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.text h1 {
text-align: center;
color: #ffffff;
margin-top: 57px;
font-family: 'Lora', serif;
font-weight: 700;
font-size: 38px;
}
<div class="widget center">
<div class="blur"></div>
<div class="text center">
<h1 class="">I am blurred div</h1>
</div>
</div>
I have an element with a background image and some text in it.
For various good reasons the element is positioned absolute.
I added an overlay to the image with a pseudo :before.
The problem now is that the overlay also darkens the text in the element.
How would I fix that? I want my text to remain nicely white!
JSFiddle: https://jsfiddle.net/xvdk95st/
.text {
position: absolute;
background-image: url('https://i.gyazo.com/1e88fee290bda821ba823a76a1e01c04.png');
background-size: cover;
background-repeat: no-repeat;
width: 400px;
line-height: 25px;
color: #fff;
min-height: 400px;
}
.text::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: " ";
background-color: rgba(0, 0, 0, 0.4);
z-index: 2;
}
<div class="text">
<p>
Hi, I'm some text!
</p>
</div>
Use z-index with position on <p> (because z-index always works with position), like:
.text p {
z-index: 10;
position: relative;
}
Have a look at the snippet below:
.text {
position: absolute;
background-image: url('https://i.gyazo.com/1e88fee290bda821ba823a76a1e01c04.png');
background-size: cover;
background-repeat: no-repeat;
width: 400px;
line-height: 25px;
color: #fff;
min-height: 400px;
}
.text::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: " ";
background-color: rgba(0, 0, 0, 0.4);
z-index: 2;
}
.text p {
z-index: 10;
position: relative;
}
<div class="text">
<p>
Hi, I'm some text!
</p>
</div>
Hope this helps!
If you want to darken background only, you can use multiple backgrounds:
.text {
position: absolute;
background-image:
linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url('https://i.gyazo.com/1e88fee290bda821ba823a76a1e01c04.png');
background-size: cover;
background-repeat: no-repeat;
width: 400px;
line-height: 25px;
color: #fff;
min-height: 400px;
}
<div class="text">
<p>
Hi, I'm some text!
</p>
</div>
I am totally new to this html/css I am trying to do float a text with background as image .Yes I did that but the problem is the text is floating on top of the image.If use margin-top to adjust the image,it just simple pull down the whole div.Here down i gave a pictorial representation of what I want.
html
<div class="maincon">
<div class="picon" style="background-image: linear-gradient(to bottom, rgba(0, 0, 0, .02), rgba(0, 0, 0, .8)), url('img/apple.jpg') "><p>Hi</p>
</div>
</div>
Css
.maincon {
margin-top: 95px;
width: 80%;
margin-left: auto;
margin-right: auto;
height: 100%;
}
.picon {
width: 100%;
height: 80%;
background: none center/cover #f2f2f2;
}
.picon p {
}
You can use position: absolute
.element {
height: 100vh;
background:linear-gradient(to bottom, rgba(0, 0, 0, .02), rgba(0, 0, 0, .8)), url('http://cdn2.macworld.co.uk/cmsdata/features/3598128/iphone_6s_review_20.jpg');
background-size: cover;
position: relative;
}
p {
position: absolute;
color: white;
font-size: 25px;
margin: 10px;
bottom: 0;
}
<div class="element">
<p>Apple iphone</p>
</div>
wihtout position absolute and relative .you can use flexbox module.it supports all latest browsers.
.element {
height: 80vh;
background: linear-gradient(to bottom, rgba(0, 0, 0, .02), rgba(0, 0, 0, .8)), url('http://cdn2.macworld.co.uk/cmsdata/features/3598128/iphone_6s_review_20.jpg');
background-size: cover;
align-items: flex-end;
display: flex;
}
p {
color: white;
font-size: 25px;
margin: 10px;
}
<div class="element">
<p>Apple iphone</p>
</div>
.maincon {
margin-top: 95px;
width: 80%;
margin-left: auto;
margin-right: auto;
height: 100%;
}
.picon {
width: 100%;
height: 80%;
background: none center/cover #f2f2f2;
position: relative;
}
.picon p {
position: absolute;
bottom: 0;
}