This question already has answers here:
Three horizontal stripes in CSS
(1 answer)
Body background with 3 background colors
(2 answers)
Closed 1 year ago.
Is there a way to have 3 different horizontal colors of different sizes on a webpage using CSS?
I am creating a webpage for a club and am hoping to make it stand out more with a contrasting white and black background.
I want it to look like this with no fading between colors:
I have tried this code. However, the height of the color only covers a small amount of the page.
body {
height: 100vh
width: 100vw;
background-image: linear-gradient(white 10%, black 50%, white 40%);
background-size: 100% 100%;
background-repeat: no-repeat;
margin: 0px;
}
From the image you've provided, it seems to be working as expected. The first section of the gradient is white, the middle is black and the third section is white. If you want to make sure the gradient fills the entire page and flows with the viewport, you can use background-attachment.
Give the <body> a background-attachment value of fixed. This will make the background-image position fixed within the viewport. I updated the linear-gradient usage so the colors don't fade between sections by utilizing color-stop points. This is achieved by defining a starting and ending position for the gradient line. Each section in the gradient doesn't flow into it's neighboring color but shows a sharp distinction between colors.
body {
min-height: 100vh;
height: 100%;
width: 100vw;
background-image: linear-gradient(to bottom, red 10%, green 10% 60%, blue 60%);
background-size: 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
margin: 0px;
}
<body>
<div></div>
</body>
Here you go:
html {
height: 100vh;
background-repeat: no-repeat;
background-attachment: fixed;
background: rgb(255, 255, 255);
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 1) 65%, rgba(255, 255, 255, 1) 65%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gradient</title>
</head>
<body>
</body>
</html>
The solution is to mitigate the gradient effect, which is pretty weird since that's what they are used for. We need to tell linear-gradient that the black starts exactly after the white ends, and it ends exactly before the white starts.
I usually use this site to design gradients: https://cssgradient.io
It's super neat and contains well-written references and samples.
Add steps to remove color escalation
body {
height: 100vh;
width: 100vw;
margin: 0px;
background: linear-gradient(
to bottom,
white 0,
white 10%,
black 10%,
black 60%,
white 60%,
white 100%
);
}
<body>
</body>
Related
How can I create a CSS background consisting of an image covering the top x pixels of the body and a solid color or gradient below (also spanning behind the top bg picture if it is transparent)?
A gradient can be stacked placed on top of a solid color, so that the gradient fills the entire height of the screen. How can I change the gradient to a picture and only make it x pixels high?
background: linear-gradient(0deg, rgba(239,237,224,1) 30%, rgba(255,255,255,1) 100%) top/100% 100vh no-repeat rgba(239,237,224,1);
Use a pseudo element for the image:
body {
min-height:100vh;
margin:0;
position:relative;
background:linear-gradient(red,blue);
}
body::before {
content:"";
position:absolute;
height:100px; /* update this */
inset: 0 0 auto;
background:url(https://picsum.photos/id/1069/800/600) center/cover;
}
You can have multiple background images - with a mixture of actual images and gradient images.
The first image in the list is rendered on top of the others and so on down the list. You can set the size and positioning and repetition of each separately or together.
In this snippet the individual settings are separated out to make it clearer what is going on:
.bg {
width: 100vw;
height: 100vh;
background-image: url(https://i.stack.imgur.com/ew6J2.png), linear-gradient(to bottom, red,blue);
background-size: 30vw auto, 100% 100%;
background-position: center top, 0 0;
background-repeat: no-repeat;
}
<div class="bg"></div>
I have the following code my background so that the image is slightly opaque.
div#home {
background-size: cover;
color: #404040;
background-image: linear-gradient(to bottom, rgba(0,0,0, 0.45) 0%,rgba(0,0,0, 0.45) 100%), url(/images/sp-bg.jpg);
}
However I want it to be fixed. I tried using background-attachment but that doesn't work on iOS Safari so i was looking for alternatives and come across:
background: url(/img.png) no-repeat center center fixed
I am trying to implement that so it works with my opacity bit like:
div#home {
background-size: cover;
color: #404040;
background: linear-gradient(to bottom, rgba(0,0,0, 0.45) 0%,rgba(0,0,0, 0.45) 100%), url(/images/sp-bg.jpg) no-repeat center center fixed;
}
However that zooms my image in a lot more than it should be.
The site is accessible at: http://www.shivampaw.com/
Thanks
Note, it is best to set background-size after background-image.
You have also to reset it when background-image is reset or updated elsewhere (via a class or id )
From your question, I was not too sure i understand your issue, but if with the gradient you had an issue and not without it, you may use an inset shadow instead :
html {
height:100%;
background:url(http://www.shivampaw.com/images/sp-bg.jpg) center center fixed;
background-size:cover;
/*box-shadow:inset 0 0 0 3000px rgba(0,0,0,0.225);*/
box-shadow:inset 50vh 100vw rgba(0,0,0,0.45);
}
body {/* make html scroll */
height:200%;
}
or set background-size for both bg :
html {
height: 100%;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.45) 100%) 0 0 scroll no-repeat, url(http://www.shivampaw.com/images/sp-bg.jpg) center center fixed;
background-size:cover, cover;
}
body {
/* make html scroll */
height: 200%;
}
Just add background-size: cover; at the end(after the background is set) and your code should work fine.
By default you have background-size:initial. The initial keyword is used to set a CSS property to its default value.
cover - Scale the background image to be as large as possible so that the background area is completely covered by the background image.
Is there a way to use linear-gradient background which is starting from the center / middle of the screen?
This is my current css:
body {
display: table;
width: 100%;
height: 100%;
margin: 0 auto;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
background-size: 800px;
background: blue;
background: -webkit-linear-gradient(to left, black, blue, blue, black 800px);
background: linear-gradient(to left, black, blue, blue, black 800px);
}
Gradient bg is stopping after 800px (what I want), but it is on the right side of the screen, instead of behind the content of the webpage. I cannot move it to anywhere else. Also it is appearing at different distances from the content, depending of the window size. I need it to be fixed to the center, behind my content.
Maybe something like the next line exists?
background: linear-gradient(to sides, blue, black 400px);
So I'd need to be able to set the starting position of the linear-gradient to the center and let the browser run it to both sides.
400px from center is where it should stop (and after that use the last color) - so a total of 800px wide the gradient should be.
If i understand your request correctly, this is what you want:
body, html {
width: 100%;
height: 100%;
margin: 0px;
}
body {
background-image: linear-gradient(to right, black, blue 400px, black 800px);
background-size: 800px 100%;
background-position: 50% 100%;
background-repeat: no-repeat;
}
Try something like this
background: linear-gradient(to left, black, blue 25%, blue 75%, black 100%);
Using percentages ensures your page will scale, and you'll have the left and right quarters of your screen black with the middle half solid blue!
I'm trying to create a grid in pure CSS using background-image and -webkit-linear-gradient. I have the spacing and the tiling working fine, but for a reason I can't figure out, the vertical lines are coming out as #B8B8B9 instead of #E3E4E5 like I specify. Any ideas?
JSFiddle: http://jsfiddle.net/2faSt/
CSS:
.grid {
position: absolute;
width: 100%;
height: 500px;
background-image: -webkit-linear-gradient(0deg, #e3e4e5 0px, transparent 1px, transparent 15px, #e3e4e5 16px, transparent 16px, transparent 99px, #e3e4e5 100px, #ffffff 100px), -webkit-linear-gradient(90deg, transparent 20px, #e3e4e5 20px);
background-size: 111px 21px;
}
If you want to get really the color that you specify, you should set 2 color stops with the same color, separated by at least 1 px.
Otherwise, you set only the point of gradient change, but it is already changing to transparent, even in the same pixel
And, even it is non intuitive, transparent if black transparent (rgba (0,0,0,1))
See this fiddle
There, you have this CSS:
#one {
background: linear-gradient(90deg, #e3e4e5, transparent);
}
#two {
background: linear-gradient(90deg, #e3e4e5, rgba(255, 255, 255, 1));
}
In the first div (The same color stops that in your question), you can see that in the middle of the transition the color is darker than at the beginning.
As a comparison, in the second you can see what probably you intended, make the transition to white transparent.
-moz-radial-gradient(center -200px , ellipse farthest-corner, #323C49 0%, #718299 65%) no-repeat scroll 0 0 transparent;
I have this code above and i just realized that this gradient goes from top to bottom. Is there any way to make it stop the whole gradient after 30px. I can make adjustments as necessary, but how do you get the gradients to complete itself after 30px?
You can use the background-size property together.
like this:
div {
height: 100px;
width: 100px;
border: 1px solid black;
background: radial-gradient(ellipse farthest-corner, #323C49 0%, #718299 65%) no-repeat;
background-size: auto 30px;
background-position: top;
}
<div></div>
In CSS3:
radial-gradient(ellipse at center center,
rgb(30, 87, 153) 0%, rgb(41, 137, 216) 100px,
rgba(255, 255, 255, 0) 101px, rgba(255, 255, 255, 0) 100%)
You can have multiple stops in the gradient. You can also specify length in pixels rather than percentages. You can also use rgba to make transparent colours.
You start with your first colour at 0%, the center.
Then you have the second colour at x pixels (I'm using x=100 pixels here).
Then you go to transparent white at x+1 pixels.
And stay transparent all the way until 100%.
this should work in browsers that support CSS3.
css3 gradients are background images so they will fill the entire height and width of the block element, just as if it were a solid color.
In order to limit the height of the gradient, limit the height of the element. A "clean" way to do this might be to use a pseudo element. Something like...
div {height: 500px; width: 500px; position: relative}
div:before {
content: " ";
width: 100%;
height: 30px;
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: block;
background-image: [your-gradient-here]
}
Well, as long as the rest of the gradient (after your set number of pixels) can be a fixed color, just use three color stops as follows (this e.g. stops at 30px - notice the last entry is identical to the second):
background: linear-gradient(to bottom, rgba(90,90,90,0.75) 0%,rgba(0,0,0,0.75) 30px,rgba(0,0,0,0.75) 100%);