This question already has answers here:
Weird effect when applying transparent border over an element with a gradient background
(7 answers)
Closed 7 years ago.
I'm using linear-gradients with semi-transparent borders for creating modules and buttons etc. Using (for example) rgba(0,0,0,0.1) as the border colour is convenient, because I can set any background colour on my elements without having to worry about the border colour again.
However I've noticed a very odd effect - when combined with a linear-gradient background, browsers use the height of the element's padding box to calculate the height of the gradient, which means it repeats over the top and bottom margins, creating a very odd effect:
Here is the CSS that generates the "Actual" box:
.box {
box-sizing: border-box;
height: 100px;
width: 100px;
border: 25px solid rgba(0,0,0,0.1);
background-color: #eee;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
margin-bottom: 20px;
}
Now I've already found a workaround that allows me to achieve the desired effect, by forcing the background-size to be 100% + the border size. This is what generated the "Desired" box (.box2):
.box2 {
background-position: 0 center;
background-size: auto calc(100% + 50px);
}
However that seems a bit hacky.
So my question is: Can anyone explain why this is - I can't find it documented anywhere, and does anyone have a neater solution?
Here's the JS Fiddle that I used to create the examples, and it also includes a box with an actual image background for comparison: http://jsfiddle.net/29rgksgx/4/
You can choose which of the boxes is used as a reference for the background
Choose border-box and it will work as desired
You can choose between border content and padding box
.box {
box-sizing: border-box;
height: 100px;
width: 100px;
border: 25px solid rgba(0,0,0,0.1);
background-color: #eee;
margin-bottom: 20px;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
background-origin: border-box; /* the trick */
}
<div class="box"></div>
Related
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>
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.
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.
I have a contact form in my page and i am trying to increase the size of the background and change its position to no avail.
CSS:
.w2_ajax_contact_form {
width: 30%;
margin: auto;
font-family: Arial;
font-size: 12px;
background: rgba(0, 0, 0, 0.8);
background-position: 0% 20%;
}
I tried a few ways like:
background: rgba(0, 0, 0, 0.8) center center;
and
background-position: 10px;
What am i doing wrong?
background-position is meant to position a background image, not a background color. It is mostly used for working with sprites. I am not sure what you are trying to achieve, but i think you may just want to add some padding to your form.
You cannot move the color. It works only with images. try to increase the height, width or add some kind of padding to the box
-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%);