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;
}
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 create a CSS gradiant based vertical progress bar as shown in the figure.
Sample Image
I want to achieve the followings:
It should only have two colors.
The gradient should be a dotted one (similar to dotted border).
I should be able to set the height of each color. For example, if I want the 30% of the height of the gradient to be gray, the rest of the 70% should be set to green. And there shouldn't be a spread of the color(not sure of the right term).
Any clues on how this can be achieved via CSS only.
I have tried the following code with no success, just pasting it for reference.
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 700px;
width: 10px;
background-image: linear-gradient(180deg, transparent, transparent 50%, #fff 50%, #fff 50%), linear-gradient(180deg, orange 25%, black 75%);
background-size: 100% 20px, 100% 700px;
}
</style>
</head>
<body>
<h1>Linear Gradient - Top to Bottom</h1>
<p>This linear gradient starts red at the top, transitioning to yellow at the bottom:</p>
<div id="grad1"></div>
</body>
</html>
You could paint the vertical line n% in lime and then 100% - n% in gray.
Then overlay that with a repeating linear gradient of transparent and white.
.line {
height: 700px;
width: 10px;
background-image: linear-gradient(transparent 0 50%, white 50% 100%), linear-gradient(lime 0 71%, gray 71% 100%);
background-size: 100% 10%, 100% 100%;
}
<div class="line"></div>
You can use mask and gradient like below:
.line {
height: 300px;
width: 20px;
-webkit-mask: radial-gradient(circle closest-side, #000 96%, #0000) 0 0/100% 10%;
background: linear-gradient(red 60%, blue 0);
}
<div class="line"></div>
I'm struggling to find a nice way to fade a vertical gradient at its left and right sides. Basically a top-bottom gradient with the left-right ends faded to 0% opacity.
I need it to be a Transparent fade out so that it can be on top of images/videos.
Here is a quick visual of what I am aiming for:
Any suggestions?
Pretty Simple, You just need to add transparent in a linear gradient.
div {
background:linear-gradient(to right, transparent, #00F5CB, transparent);
width: 100%;
height:64px;
}
<div></div>
Use multiple backgrounds. The first one is on top.
div {
width: 100%;
height: 100px;
background-image: linear-gradient( to right, white 0%, transparent 30%, transparent 70%, white 100%),
linear-gradient( to bottom, Lightgreen, Aquamarine);
}
<div></div>
You can try multiple background like this:
.box {
width: 500px;
height: 80px;
margin:auto;
background:
radial-gradient(ellipse at top, #7ff5b0 20%, transparent 70%) top center/80% 100%,
linear-gradient( to right, transparent 0%, #19d9ef 30%, #19d9ef 70%, transparent 100%);
background-repeat:no-repeat;
color: ;
color: ;
}
body {
background:pink
}
<div class="box"></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>
I have fixed a similar problems with diagonal gradient.
Now it's difficult with linear.
I was able to create a gradiet with a cross
background: linear-gradient(to right, transparent 40%,#f00 50%,transparent 60%),
linear-gradient(to bottom, #fff 20%,#f00 50%,#fff 80%);
I can't create a gradient that have in the left half a gradient to bottom WHITE-RED and in the right half an inverse gradient RED-WHITE.
The below is the way I had tried to create it:
background: linear-gradient(to bottom, transparent 50%,#ff0 100%),
linear-gradient(to right, transparent 50%,#f00 100%);
But the yellow part is full! How can I fix this situation?
This is what I want:
It is very much possible to achieve this using a single element and a single background rule. Just give each of the gradients 50% size of the container in the X-axis, position one gradient on the left side and the other on right side using background-position and stop the gradient from repeating by setting the value for background-repeat as no-repeat.
div {
height: 100px;
background: linear-gradient(to top, red 10%, yellow 50%), linear-gradient(to bottom, red 10%, yellow 50%);
/* background-size: 50% 100%; Ideally this should be enough but it leaves a white line in the middle in snippet for some reason and so use below setting */
background-size: 50% 100%, calc(50% + 1px) 100%;
background-position: 0% 0%, 100% 0%;
background-repeat: no-repeat;
}
<div></div>
Edit: It is possible with one background, see Harry's answer.
It's not directly possible with a single background rule on your element, but you can utilize the ::before and ::after pseudo elements.
div {
width: 100%;
height: 50px;
border: 1px solid black;
position: relative;
background: linear-gradient(to bottom, red 0%, #ff0 100%);
}
div::before {
content: "";
position: absolute;
left: 50%;
right: 0;
top: 0;
bottom: 0;
background: linear-gradient(to top, red 0%, #ff0 100%);
}
<div></div>