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!
Related
.a {
/* you can change this variable */
--arrow-width: 30px;
width: 100%;
height: 300px;
--mask: linear-gradient(#000, #000) 0 0/100% calc(100% - var(--arrow-width)) no-repeat,
linear-gradient(to top right, transparent 0 50%, #000 50.1% 100%) calc(50% - var(--arrow-width) / 2) 100% / var(--arrow-width) var(--arrow-width) no-repeat,
linear-gradient(to top left, transparent 0 50%, #000 50.1% 100%) calc(50% + var(--arrow-width) / 2) 100% / var(--arrow-width) var(--arrow-width) no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
background: url(https://picsum.photos/id/600/360) 50% 50% / cover;
}
<div class="a"></div>
Does anybody tell me what changes need to be done here if I want a triangle at the top not bottom?
Basically you need to change the positions of the various gradients.
The first one's vertical position should start at the "arrow width" var.
Both the others vertical positions should be set to 0 instead of 100%.
You also need to change the direction of the last two gradients from "to top" to "to bottom" so the arrow will be pointing up.
Lastly, you should also add "padding-top" with the height of the "arrow width" var as to not lose that much of the image size.
.a {
/* you can change this variable */
--arrow-width: 30px;
padding-top: var(--arrow-width);
margin-top: calc(var(--arrow-width) * -1); /* added to make the image aligned to the top */
width: 100%;
height: 300px;
--mask: linear-gradient(#000, #000) 0 var(--arrow-width)/100% calc(100% - var(--arrow-width)) no-repeat,
linear-gradient(to bottom right, transparent 0 50%, #000 50.1% 100%) calc(50% - var(--arrow-width) / 2) 0 / var(--arrow-width) var(--arrow-width) no-repeat,
linear-gradient(to bottom left, transparent 0 50%, #000 50.1% 100%) calc(50% + var(--arrow-width) / 2) 0 / var(--arrow-width) var(--arrow-width) no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
background: url(https://picsum.photos/id/600/360) 50% 50% / cover;
}
<div class="a"></div>
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.
I am running into an issue with css linear-gradients. I am looking to make clean color breaks at certain percentages. But it seems to start blurring the colors when I add more than a certain number:
This is the example of the css gradient with "too many" color breaks - and blurs where it should not:
div {
height: 100px;
background-color: red;
background-image: linear-gradient(to right, #ffffff 25%, #042750 25% 28%, #ffffff 28% 29%, #03aeef 29% 31%, #ffffff 31% 32%, #042750 32% 90%, #ffffff 90% 91%, #03aeef 91% 93%, #ffffff 93% 94%, #ffd900 94% 96%, #ffffff 96% 97%, #042750 97% 100%);
}
<div></div>
This is an example of it with it enough color breaks so it doesn't blur:
div {
height: 100px;
background-color: red;
background-image: linear-gradient(to right, #ffffff 25%, #042750 25% 28%, #ffffff 28% 29%, #03aeef 29% 31%, #ffffff 31% 32%, #042750 32% 90%, #ffffff 90% 91%, #03aeef 91% 100%)
}
<div></div>
In such case it's better to use multiple gradient:
div {
height: 100px;
background:
/* Color position /width height */
linear-gradient(#03aeef,#03aeef) 50% 0 / 5% 100%, /* top layer */
linear-gradient(#fff,#fff) 50% 0 / 10% 100%,
linear-gradient(#03aeef,#03aeef) 87% 0 / 5% 100%,
linear-gradient(#ffd900 ,#ffd900) 94% 0 / 5% 100%,
linear-gradient(#fff,#fff) 95% 0 / 15% 100%,
linear-gradient(#042750,#042750) right / 60% 100%; /* bottom layer */
background-repeat:no-repeat;
}
<div></div>
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 am trying to put a bottom bar to the bottom of the screen. I have piece of CSS code which creates the bar for me. But I haven't be able to fix the bar to the bottom.
CSS
.top_bar
{
display:block;
height:18px;
margin-bottom:10px;
margin-top:10px;
background-image: linear-gradient(left bottom, rgb(135,30,51) 15%, rgb(90,115,183) 58%, rgb(90,116,183) 79%);
background-image: -o-linear-gradient(left bottom, rgb(135,30,51) 15%, rgb(90,115,183) 58%, rgb(90,116,183) 79%);
background-image: -moz-linear-gradient(left bottom, rgb(135,30,51) 15%, rgb(90,115,183) 58%, rgb(90,116,183) 79%);
background-image: -webkit-linear-gradient(left bottom, rgb(135,30,51) 15%, rgb(90,115,183) 58%, rgb(90,116,183) 79%);
background-image: -ms-linear-gradient(left bottom, rgb(135,30,51) 15%, rgb(90,115,183) 58%, rgb(90,116,183) 79%);
background-image: -webkit-gradient(
linear,
left bottom,
right 0,
color-stop(0.15, rgb(135,30,51)),
color-stop(0.58, rgb(90,115,183)),
color-stop(0.79, rgb(90,116,183))
);
}
How can I fix this to the bottom?
I have tried this code below but I didn't work. It fixes the bar to the bottom but gradient bar shrinks...
position: fixed;
bottom: 30px;
Just add these 3 to your rule, fixed positioning needs the element's width to be mentioned, because it is just a specialized form of absolute positioning:
position: fixed;
width: 100%;
bottom: 30px;
Fiddle
If the element is positioned using absolute or fixed, the element's width won't automatically grow to 100% the way it does otherwise. If you want the width to be 100%, you need to set that manually.
Code:
.top_bar {
position: fixed;
bottom: 30px;
display:block;
height:18px;
width: 100%; //Manually set width to 100%
margin-bottom:10px;
margin-top:10px;
//Gradient stuff
}
Example: http://codepen.io/skimberk1/pen/4eca8e6d6f9b899458cfa4ccfea38877
http://jsfiddle.net/Y7UKv/1/
When the position type is changed it no longer has a width of 100%. You'll need to add
left: 0;
right: 0;
or
width:100%;