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
Related
I want to repeat my image Horizontally. However, it's not repeating
My index.html page
body {
margin: 0;
background-image: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%);
overflow: hidden;
/** Scroll bar right side in your screen **/
}
.night {
height: 80vh;
width: 70vw;
border: 1px solid black;
margin: 5rem auto;
background: url(http://placekitten.com/5/5);
background-size: cover;
position: relative;
box-shadow: 1px 2px 60px rgba(0, 0, 0, 0.4);
overflow-x: hidden;
}
.surface {
height: 140px;
width: 200px; /* 500px; */
background: url(http://placekitten.com/10/10);
display: block;
position: absolute;
bottom: 0%;
left: 0%;
background-repeat: repeat-x;
/*animation: moveRight 6s linear infinite;*/
}
.car {
position: absolute;
bottom: 8%;
}
<div class="night">
<div class="surface"></div>
<div class="car">
<img src="http://placekitten.com/100/75" alt="Car">
</div>
</div>
This is how it currently looks
What is the fault? I checked articles on w3schools but as I see there are no syntax errors.
How the correct image looks like
You had width: 200px; on that element (in your snippet). If you change that to width: 100%;, the background repeats until the right border of its parent:
body {
margin: 0;
background-image: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%);
overflow: hidden;
/** Scroll bar right side in your screen **/
}
.night {
height: 80vh;
width: 70vw;
border: 1px solid black;
margin: 5rem auto;
background: url(http://placekitten.com/5/5);
background-size: cover;
position: relative;
box-shadow: 1px 2px 60px rgba(0, 0, 0, 0.4);
overflow-x: hidden;
}
.surface {
height: 140px;
width: 100%;
background: url(http://placekitten.com/10/10);
display: block;
position: absolute;
bottom: 0%;
left: 0%;
background-repeat: repeat-x;
/*animation: moveRight 6s linear infinite;*/
}
.car {
position: absolute;
bottom: 8%;
}
<div class="night">
<div class="surface"></div>
<div class="car">
<img src="http://placekitten.com/100/75" alt="Car">
</div>
</div>
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>
I made a fiddle here.
Why does dice-canvas-container use the full width of the window and not stop at the start of attack-canvas-container?
Is it because both columns are positioned absolute?
<div id="attack-container">
<div id="dice-canvas-container">
<div id="plyra-dice-canvas"></div>
<div id="plyrb-dice-canvas"></div>
</div>
<div id="attack-canvas-container">
..................
</div>
</div>
If suitable with your requirement then you can go with flex css instead of position: absolute
#attack-container {
padding: 0;
text-align: center;
/* position: absolute; */
max-width: 1728px;
max-height: 1080px;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 1047;
/* float:left; */
display:flex;
}
#dice-canvas-container {
padding: 0;
text-align: center;
max-width: 1428px !important;
max-height: 1080px;
width: 100%;
height: 100%;
/* position: absolute; */
left: 0;
top: 0;
opacity: 0.8;
z-index: 1048;
/* display: block; */
/* float:left; */
background-color: red;
min-height:150px;
}
#attack-canvas-container {
#extend %background-gradient;
max-width: 300px;
max-height: 1080px;
font-size: 90%;
width: 100%;
height: 100%;
z-index: 1048;
/* position: absolute; */
right: 0;
top: 0;
box-sizing: border-box;
text-align: left;
-webkit-box-shadow: -4px 0px 5px 0px rgba(50, 50, 50, 0.3);
-moz-box-shadow: -4px 0px 5px 0px rgba(50, 50, 50, 0.3);
box-shadow: -4px 0px 5px 0px rgba(50, 50, 50, 0.3);
min-height: 150px;
}
#plyra-dice-canvas,
#plyrb-dice-canvas {
padding: 0;
text-align: left;
position: absolute;
max-width: 1428px;
max-height: 540px;
width: 100%;
height: 50%;
z-index: 1049;
}
#plyra-dice-canvas {
left: 0;
top: 0;
height: 50%;
}
#plyrb-dice-canvas {
left: 0;
top: 50%;
height: 50%;
border-top: 1px solid $brand-primary;
}
<div id="attack-container">
<div id="dice-canvas-container">
<div id="plyra-dice-canvas"></div>
<div id="plyrb-dice-canvas"></div>
</div>
<div id="attack-canvas-container">
</div>
</div>
Check the updated Fiddle.
Because you are using position: absolute (1) with width: 100% (2) for both containers in combination with z-index (3).
(1) : because of this, both container are absolutely positioned, not relatively.
(2) : since both have 100% width, they will overlap the other one.
(3) : the one with the higher z-index wins the upper hand.
You need to change the absolute positioning and give proper widths to the divs.
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%);
}
The sample div hovers fine however the background image doesn't move.
The div hovers fine but the image in the background stays at the same position.
What I am trying to achieve is when you hover over the div it moves like it clicks, but the background image in the div doesn't seems to move at all. I want the div and the background to move like real button click.
Fiddle link: http://jsfiddle.net/jackJoe/YhDXm/.
.sample {
width: 220px;
height: 220px;
position: absolute;
overflow: hidden;
margin: 180px;
border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
-webkit-border-radius: 10px;
background: url(http://static.adzerk.net/Advertisers/2362.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 188px 188px;
}
.sample > header {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px 10px;
background: inherit;
background-attachment: fixed;
overflow: hidden;
}
.sample > header::before {
content: "";
position: absolute;
top: -20px;
left: 0;
width: 200%;
height: 200%;
background: inherit;
background-attachment: fixed;
-webkit-filter: blur(4px);
filter: blur(4px);
}
.sample > header::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25)
}
.sample > header p a {
margin: 0;
color: white;
position: relative;
z-index: 0;
}
.sample:hover {
background-color: #f0eade;
box-shadow: 1px 1px 5px #363024;
-webkit-box-shadow: 1px 1px 5px #363024;
-moz-box-shadow: 1px 1px 5px #363024;
position: relative;
top: 10px;
margin: 180px;
}
<div class="sample">
<header>
<p><a>
Skyscraper
</a>
</p>
</header>
</div>
Your background image stays still because you have background-attachment: fixed; enabled.
From MDN on background-attachment: fixed
This keyword means that the background is fixed with regard to the viewport. Even if an element has a scrolling mechanism, a ‘fixed’ background doesn't move with the element.
Remove your background-attachment statement entirely and change your background-position to 0 0 (or top left) and then you will need to tinker the child elements appropriately.
Fiddle here with adjustments made.
Now that I'm done with that, some supplemental advice:
You should most certainly not do this using top or any other positional properties. These will cause a layout re-calculation on every single hover event (even with position: absolute;) and a paint, at a minimum. If you have a lot of stuff on that page your users may become frustrated or displeased with the stuttering on the page.
Instead, use transform: translate(X, Y); for a very cheap and equally effective move. Here is the fiddle with this incorporated
I found the answer for my question, thanks everyone for the help,
This is fiddle linke: http://jsfiddle.net/YhDXm/1186/
.sample {
width: 220px;
height: 220px;
position: absolute;
overflow: hidden;
margin: 180px;
border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
-webkit-border-radius: 10px;
background: url(http://static.adzerk.net/Advertisers/2362.jpg);
background-repeat: no-repeat;
background-position: 0 0;
}
.sample > header {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px 10px;
background: inherit;
background-attachment: fixed;
overflow: hidden;
}
.sample > header::before {
content: "";
position: absolute;
top: -20px;
left: 0;
width: 100%;
background: inherit;
background-attachment: fixed;
-webkit-filter: blur(4px);
filter: blur(4px);
}
.sample > header::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25)
}
.sample > header p a {
margin: 0;
color: white;
position: relative;
z-index: 0;
}
.sample:hover {
box-shadow: 1px 1px 5px #363024;
-webkit-box-shadow: 1px 1px 5px #363024;
-moz-box-shadow: 1px 1px 5px #363024;
position: relative;
top: 10px;
margin: 180px;
}
<div class="sample">
<header>
<p><a>
Skyscraper
</a>
</p>
</header>
</div>