I have been trying to implement a linear gradient as my background, however, a persistent issue seems to appear when I use background-attachment: fixed. It seems that on mobile devices, when you attempt to scroll down the page quickly, the page will lag and the gradient will attempt to fill whitespace.
I've looked at multiple options that attempt to transform the background, but none have worked thus far.
Issue on android
Here is how my body css looks like:
body {
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 100vh;
}
CSS that references the background:
body, nav, #footer {
background: linear-gradient(45deg, hsla(216, 100%, 17%, 1) 0%, hsla(206, 80%, 29%, 1) 47%, hsla(206, 80%, 29%, 1) 83%);
background: -moz-linear-gradient(45deg, hsla(216, 100%, 17%, 1) 0%, hsla(206, 80%, 29%, 1) 47%, hsla(206, 80%, 29%, 1) 83%);
background: -webkit-linear-gradient(45deg, hsla(216, 100%, 17%, 1) 0%, hsla(206, 80%, 29%, 1) 47%, hsla(206, 80%, 29%, 1) 83%);
background-attachment: fixed;
}
The HTML is formatted as follows:
<body>
<nav>Navbar</nav>
<div class="container">
Page content
</div>
<div id="footer">
<p>Developed</p>
</div>
</body>
The footer doesn't seem to have an effect on the situation at hand, but when I remove it, the whitespace narrowly reduces in size.
When I changed the background to a solid colour, the issue had resolved itself. So I am quite certain the issue relies on the linear background attempting to cover the space in a negative way.
Is there any setting that can combat the fixed attachment causing the scroll? I cannot remove it as of now as there will be a horrible change in colour.
I can't replicate your page because there's missing code/content. However, you should only apply the background to the "body" because "nav" and "footer" are inside the body.
In the example below, I only applied the background gradient to the body. Also, changed body height and removed the overflow for testing purposes only. I tested this on a mobile device using dev tool and works.
body {
//overflow: hidden;
display: flex;
flex-direction: column;
min-height: 1920px;
position: relative;
background: linear-gradient(45deg, hsla(216, 100%, 17%, 1) 0%, hsla(206, 80%, 29%, 1) 47%, hsla(206, 80%, 29%, 1) 83%);
background: -moz-linear-gradient(45deg, hsla(216, 100%, 17%, 1) 0%, hsla(206, 80%, 29%, 1) 47%, hsla(206, 80%, 29%, 1) 83%);
background: -webkit-linear-gradient(45deg, hsla(216, 100%, 17%, 1) 0%, hsla(206, 80%, 29%, 1) 47%, hsla(206, 80%, 29%, 1) 83%);
background-attachment: fixed;
}
<body>
<nav>Navbar</nav>
<div class="container">
Page content
</div>
<div id="footer">
<p>Developed</p>
</div>
</body>
I was able to successfully overcome my issue after playing around with some of the height settings with the html and body styles.
html {
overflow: auto;
}
body {
overflow: hidden;
display: flex;
flex-direction: column;
background-image: linear-gradient(to top, #051937, #001b49, #001b5a, #00196a, #0a1378);
background-repeat: no-repeat;
min-height: 100vh;
}
Originally I had the height set to 100vh on the html style, when I removed that, it and added the no-repeat style to body, everything seemed to work brilliantly.
Related
This question already has answers here:
CSS: Z-index of multiple backgrounds
(3 answers)
Closed 7 months ago.
I'm doing CSS, but I have no idea how to use the z-index function. Here is what I have so far:
body {
background-image: url("design1.jpg"), url("northpole2.jpg"), url("chessbackground.jpg"), url("clipart3102234.png"), url("grassblock.jpg"), url("photoborder.jpg"), url("website\ background\ color.jpg");
z-index: 1, 1, 1, 2, 1, 1;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 700px 290px, 700px 290px, 250px 250px, 200px 200px, 250px 250px,850px 300px, 200px 200px;
background-position-x: 0%, 100%, 0%, 98%, 100%, 50%, 50%;
background-position-y: 0%, 0%, 24%, 24%, 24%, 24%, 24%;
background-color: rgb(170, 154, 154);
}
I'm doing this so I can layer some of the images inside of the background. Help with this would be greatly appreciated. Edit: I have made some changes to the code but it still won't work:
body {
background-image: url("design1.jpg"), url("northpole2.jpg"), url("chessbackground.jpg"), url("clipart3102234.png"), url("grassblock.jpg"), url("photoborder.jpg"), url("website\ background\ color.jpg");
z-index: 1, 1, 1, 2, 1, 1, 2;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 700px 290px, 700px 290px, 250px 250px, 200px 200px, 250px 250px,850px 300px, 10px 10px;
background-position-x: 0%, 100%, 0%, 98%, 100%, 50%, 50%;
background-position-y: 0%, 0%, 24%, 24%, 24%, 24%, 24%;
background-color: rgb(170, 154, 154);
}
Edit: I have found the solution for this issue, it is to declare the one you want top most as the first closest to the background-image function like this:
body {
background-image: url("paperbackground.jpg"), url("design1.jpg"), url("northpole2.jpg"), url("chessbackground.jpg"), url("clipart3102234.png"), url("grassblock.jpg"), url("photoborder.jpg");
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 650px 200px, 700px 290px, 700px 290px, 250px 250px, 200px 200px, 250px 250px, 835px 365px;
background-position-x: 50%, 0%, 100%, 0%, 98%, 100%, 50%, 50%;
background-position-y: 30%, 0%, 0%, 24%, 24%, 24%, 24%, 24%;
background-color: rgb(170, 154, 154);
}
There is no z-index for background images as z-index is element based.
For more info :-
CSS: Z-index of multiple backgrounds
You cant use z-index like this..Z-index helps to move elements or layers from front to back back to front or anyhow order you want.and also i think it's not possible to use z-index for background.how ever please try with different values.don't use same values..bigger z-index value means it comes front!
I am trying to apply a radial-gradient circle with dimensions on top of a background image in css. Whenever I apply the gradient line, it doesn't do anything - my layers appear to be out of order.
/* HTML Styles */
html {
background-image: url("image1.jpg");
background-attachment: fixed;
}
/* Body Styles */
body {
background-image: url("image2.jpg");
background: radial-gradient(circle closest-corner at 40% 70%, white 15%,
rgba(151, 151, 151, 0.5) 50%);
}
You need to append them in the same background property as with your code you are overriding the first background-image and only the gradient is considered. Also be sure you respect the order, the first one will be the top layer.
body {
margin:0;
height:100vh;
background:
radial-gradient(circle closest-corner at 40% 70%, white 15%, rgba(151, 151, 151, 0.5) 50%),
url("https://lorempixel.com/400/200/") center/cover;
}
You can also use this syntax (the above one is the shorthand):
body {
margin:0;
height: 100vh;
background-image:
radial-gradient(circle closest-corner at 40% 70%, white 15%, rgba(151, 151, 151, 0.5) 50%),
url("https://lorempixel.com/400/200/");
background-size: auto, cover;
background-position:center;
}
I have two divs on top of each other. I need the bottom div to have a slanted angle like this:
I only need help with slant of the top of the blue div, I can handle to bottom slant myself.
I could create a psuedo element and skew it, but the issue is that the blue div has a gradient and making a psuedo element with the same gradient makes the two elements not flow together with their gradients.
I think my only solution is to create a transparent div, skew it and place it on top of the blue div. I was wondering if this is even possible to create a skewed transparent div and have it cut into the blue div, slanting the blue div while showing the image in the background.
I'm open to any other ideas to achieve this slanted div.
Ive created a simple jsfiddle with the divs for anyone to mess around with.
Here is the basic mark up:
<div class="main">
<div class="main-top">
</div>
<div class="main-bottom">
</div>
</div>
.main-top {
background: url("http://stock-wallpapers.com/wp-content/uploads/2015/01/Huawei_P7_home_wallpaper_02_.jpg") center center no-repeat;
background-size: cover;
height: 300px;
width: 600px;
}
.main-bottom {
height: 300px;
width: 600px;
background-image: -moz-linear-gradient( -51deg, rgb(28,35,80) 0%, rgb(27,31,71) 41%, rgb(25,26,62) 100%);
background-image: -webkit-linear-gradient( -51deg, rgb(28,35,80) 0%, rgb(27,31,71) 41%, rgb(25,26,62) 100%);
position: relative;
top: -150px;
}
Thanks
It is in fact very easy if you use this site
http://bennettfeely.com/clippy/
.main-top {
background: url("http://stock-wallpapers.com/wp-content/uploads/2015/01/Huawei_P7_home_wallpaper_02_.jpg") center center no-repeat;
background-size: cover;
height: 300px;
width: 600px;
}
.main-bottom {
height: 300px;
width: 600px;
background-image: -moz-linear-gradient( -51deg, rgb(28, 35, 80) 0%, rgb(27, 31, 71) 41%, rgb(25, 26, 62) 100%);
background-image: -webkit-linear-gradient( -51deg, rgb(28, 35, 80) 0%, rgb(27, 31, 71) 41%, rgb(25, 26, 62) 100%);
position: relative;
top: -150px;
-webkit-clip-path: polygon(0 0, 100% 32%, 100% 100%, 0 68%);
clip-path: polygon(0 0, 100% 32%, 100% 100%, 0 68%);
}
<div class="main">
<div class="main-top">
</div>
<div class="main-bottom">
</div>
</div>
These are the Divs
I tried to use :
`clip-path:polygon()`
But the shapes have more than 12 Edges, I promise that I've been trying to figure it out for a long period of time and I'm Stuck ..
You can use SVG
https://www.w3schools.com/graphics/svg_polygon.asp
I would recommend using SVG's. They are sharp and also endless scale able because they are vector based.
You can use create polygon using this link: http://bennettfeely.com/clippy/
Create simple triangle and try to understand the % values following the colour dots and percentage and then you can change % values later on to create any polygon.
div {
width: 280px;
height: 280px;
background: #1e90ff;
-webkit-clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
}
/* Center the demo */
html, body { height: 100%; }
body {
display: flex;
justify-content: center;
align-items: center;
}
<div></div>
I've got this working using a static black background on my games splash screen:
[
If too small: http://i.imgur.com/VzLViDB.png
As you can see it works on a black background, but when we are on any other background, we simply see black instead of the actual background.
This makes sense, because I'm using a gradient like:
#waves::before {
left:0;
background: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 35%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 75%);
}
#waves::after {
right:0;
background: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 35%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 75%);
}
Soo... technically it's working as intended. I just can't figure out how to do it like I want it to work.
My goal: fade out the div so that the waveform corners appear to fade out.
How i attempted it: waves is a div, so I leveraged before and after psuedo-elements, and gave it a width LARGER than required (so there is some overlap), and then used a gradient to fade.
If anyone knows how to do this, that would be great!
I did search, which is where I got the idea of a gradient from. I couldn't find anything that would suit this use case (multiple backgrounds)
To clarify, this is my goal:
Since your image is mostly black, You can use a mix mode to overlay it over the background.
And keep the way you mask it with black on the sides
.bkg {
width: 100%;
height: 300px;
background-image: url(http://lorempixel.com/400/200);
background-size: cover;
}
.overlay {
width: 100%;
height: 100px;
position: absolute;
top: 200px;
background-image: linear-gradient(to right, black, transparent), linear-gradient(to left, black, transparent), url(https://i.stack.imgur.com/hhk0G.png);
background-size: 20% 100%, 20% 100%, cover;
background-position: left center, right center, center center;
background-repeat: no-repeat;
mix-blend-mode: screen;
}
<div class="bkg"></div>
<div class="overlay"></div>