This question already has answers here:
How to remove the stripes that appears when using linear gradient property [duplicate]
(2 answers)
Closed 9 months ago.
As the title says I am trying to add a gradient background to the one page on my website. I am currently doing this in CSS:
body {
background: rgb(85,205,252);
background: linear-gradient(45deg, rgba(85,205,252,1) 0%, rgba(255,255,255,1) 35%, rgba(247,168,184,1) 100%);
}
But doing it this way makes the gradient jagged and not very smooth.
View on JSFiddle
It should be looking like this
This is because the gradient is repeating over and over. It is doing this as it is the same size as <body>, which is actually very small as there is only that one .intro element taking up space within it.
You can fix this by stopping the background from repeating, and making the body the full height of the window at minimum, like so:
body {
min-height: 100vh;
background-repeat: no-repeat;
}
Edit: technically the 'no-repeat' is redundant when using a gradient background, as it will always fill the height provided the height is at or above 100vh.
However I would leave it there anyway as good practice just in case the background ever changes to an image; or for edge cases where the min-height may get overridden.
Related
This question already has answers here:
Using percentage values with background-position on a linear-gradient
(2 answers)
Closed 3 years ago.
I'm trying to hide a background-image (that is scaled with background-size) using background-position.
I'm purposely not using visibility or anything that will cause a relayout as such has been causing minor fluctuations in the rendered output when toggling back into view. Additionally, my current application limits me from using pseudo-elements as a hack/workaround.
div {
background: url(image.png) no-repeat 200% 200%/100%;
height: 100px; /* half height of image */
width: 250px; /* half width of image */
}
Unfortunately, the image is not getting positioned. If the /100% is removed, the positioning works correctly.
jsfiddle: http://jsfiddle.net/prometh/60jtpust/
Update:
Curiously, it works when the background-size is 50%: http://jsfiddle.net/60jtpust/8/
The problem is that
3.9. Sizing Images: the ‘background-size’ property
A percentage is relative to the background positioning area.
And
3.6. Positioning Images: the ‘background-position’ property
Percentages: refer to size of background positioning area minus
size of background image, [...] where the size of the image is the
size given by ‘background-size’.
Therefore, if you use a background-size of 100%, the percentage is background-position will refer to 0. So it will be 0.
Percentage values for background-position have funky behavior with relation to background-size, which I explain in depth, complete with a sliding puzzle analogy, in this answer. Unfortunately, because the background image fits the box exactly due to background-size: 100%, you won't be able to position it using percentage values. From the final paragraph of my answer:
If you want to position a background image whose size is 100% of the background area, you won't be able to use a percentage, since you can't move a tile that fits its frame perfectly (which incidentally would make for either the most boring puzzle or the perfect prank). This applies whether the intrinsic dimensions of the background image match the dimensions of the element, or you explicitly set background-size: 100%. So, to position the image, you will need to use use an absolute value instead (forgoing the sliding-puzzle analogy altogether).
The reason it works with background-size: 50% is because the image is now given space to move around. At the same time, the sliding puzzle analogy now falls flat because the percentage values you've set for background-position are greater than 100%...
Anyway, in your specific example, the absolute values are equal to your element's width and height properties respectively (note: not the actual image dimensions):
div {
background: url(image.png) no-repeat 250px 100px/100%;
height: 100px; /* half height of image */
width: 250px; /* half width of image */
}
Updated fiddle
If you cannot hardcode these values, e.g. if you need this effect to apply across elements of different sizes, then unfortunately you will not be able to use background-position to hide the image.
How do I add a url background image to the gradient and position it specifically?
Because the gradient is treated as an image in itself
CSS
background: linear-gradient(to bottom, #98cb01 2%,#60a822
100%)!important;
http://css-tricks.com/stacking-order-of-multiple-backgrounds/
Multiple background images is a cool feature of CSS3. The syntax is
easy, you just comma separate them. I find it's easiest/best to use
the background shorthand property so you can declare the position and
repeating and whatnot and keep them all grouped together. What isn't
obvious while looking at the syntax is which image is on top in the
vertical stacking order when those images overlap. The spec is clear
in this regard and browser implimentations follow. The first is on top
and they go down from there.
CSS
background:
url(number.png) 600px 10px no-repeat, /* On top, like z-index: 4; */
url(thingy.png) 10px 10px no-repeat, /* like z-index: 3; */
url(Paper-4.png); /* On bottom, like z-index: 1; */
It's like z-index but this isn't z-index, it's parts of one single
element.
I think it's slightly confusing, since it's the opposite of how HTML
works naturally. If all elements have the same z-index (and are
positioned in some way and overlap) the last element will be on top,
not the first. Not that big of a deal though, just need to learn it
once.
The big thing to remember is that if you were to use one of the
background for a fully opaque / fully repeating image, list that one
last not first, otherwise it will cover all the others up.
Also remember that while multiple backgrounds is totally radical, the
fallback for browsers that don't support it is that it displays
nothing at all for the background, so be careful there. The best way
to handle it, as always, is Modernizr. They even use it as the demo
right on the homepage of their site (adjusted for clarity):
CSS
.multiplebgs body
{
/*
Awesome multiple BG declarations that
transcend reality and impress chicks
*/
}
.no-multiplebgs body
{
/* laaaaaame fallback */
}
So for your example, you could do:
background:
url(number.png) 600px 10px no-repeat,
linear-gradient(to bottom, #98cb01 2%,#60a822 100%)!important;
background: -webkit-linear-gradient(#FFFFFF, #EAEAEA);
background: -o-linear-gradient(#FFFFFF, #EAEAEA);
background: -moz-linear-gradient(#FFFFFF, #EAEAEA);
background: linear-gradient(#FFFFFF, #EAEAEA);
What I basically want to do, is to have some sort of minimum and maximum gradient length (for instance, the gradient can't be smaller than 500px, even if the background is, and neither can it be bigger than 500px, even if the background is). I have tried using this method:
background-size:500px;
(aswell as combining it with background-repeat:y-repeat), but that doesn't work, since the gradient later on repeats itself from top (and what I would like is for it to maintain its ending-color through the rest of the element).
So shortly, I'm wondering if there's a way to stop a gradient after a certain height, only allowing it to cover a part of the element (hence, preventing it from looking different on all pages, with different sized elements), without using images as background. However, I'd also like to know if using this method is worth it, both when it comes to compatibility and effort.
Thanks!
You just need to add color stops to your gradient, like so:
Working Example
body, html {
height:200%;
}
body {
background: -moz-linear-gradient(top, red 0px, white 500px, white 100%) no-repeat;
background: -webkit-linear-gradient(top, red 0px, white 500px, white 100%) no-repeat;
}
MDN Documentation for Linear-gradient
So I made the following test fiddle, and it seems that if you specify a background-size then the gradient will be resized to that size regardless of the element dimensions (note that you have to explicitly define a width and a hight for background-size to work properly in Firefox).
http://jsfiddle.net/myajouri/y4b3Z/
I have checked this in latest Chrome, Safari and Firefox and looks the same in all three borwsers.
How can I create a programmatic horizontal gradient that starts at a prescribed location (in pixles on the x-axis)?
Here's the issue- I've got an image set as background-image - ideally, what I'd like to do is declare a CSS gradient that starts close to the edge of the image (~1800 pixels) and fades gracefully to full black.
So far, the best solution I have is to have two div elements- one with the photo background and the other with a 1px tall gradient image repeated along the y-axis with a background-position that starts at 1780px.
This works, but I really want to get away from the 1px image trick. Any ideas?
<div id="photobg">
<div id="gradientbg">
</div>
</div>
#photobg {
background-image:url('photourl.jpg');
}
#gradientbg {
background-image:url('1pxgradient.jpg');
background-repeat: repeat-y;
background-position: 1780px 0;
height: 100%;
}
What I'd like to do, in theory, is use color stops at 1780 px for a CSS gradient but as I understand it, CSS only supports % values as color stops.
Reference:
CSS 3 Gradient n pixels from bottom - Webkit/Safari
No, you can use pixels with linear gradient:
background-image: linear-gradient(transparent 1780px, black 100%);
You can also combine this gradient with multiple background images on one div.
You might want to check out this jsbin, I've made for you:
http://jsbin.com/sonewa/1/edit
This block of css will do what you want
background: -moz-linear-gradient(center top , #00AFF0, #53D4FE); //this is for mozilla
background-image: -webkit-linear-gradient(top, #00AFF0, #53D4FE); //this is for chrome and safari
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00AFF0', endColorstr='#53D4FE', GradientType=0); //this is for IE
while the gradient is from color #00AFF0 to #53D4FE (top to bottom)
When I use gradients, with little content, the gradient repeats, how can I prevent that?
http://jsfiddle.net/mcqpP/1/
I can try using html { height: 100%; }, but when my content requires scrolling ... the gradient repeats
http://jsfiddle.net/mcqpP/3/
How can I fix this
You need to set percentages on the CSS gradients, not absolute pixels. And as long as you only care about modern browsers (i.e. you don't care about IE6) then I suggest you stay away from images, the CSS works fine.
I'm pulling my answer from the answer to this question that I wish I could upvote 100 times:
How to get a vertical gradient background to work in all browsers? That accepted answer has everything you need with full cross browser compatibility.
Here's where I took your example and made it work: http://jsfiddle.net/HJvpf/1/
body {
background: -moz-linear-gradient(top, red 0%, blue 100%);
background: -webkit-gradient(linear, left top, left 100%, from(red), to(blue));
}
Oh and in your 2nd jsFiddle link, the reason it was repeating the gradient is because you set height 100% on html but the gradient was on body. You move that height: 100%; to the body and it works fairly well, but as you can see in my solution you don't need to specify height at all.
Edit: So you don't want it to repeat, but you also don't want it to take up the entire height. Just set repeat-x. http://www.w3schools.com/css/pr_background-repeat.asp
body {
background: -moz-linear-gradient(top, red, blue) repeat-x;
background: -webkit-gradient(linear, left top, left bottom, from(red), to(blue)) repeat-x;
}
To have the bottom gradient color fill the rest of the space:
body {
background: blue -moz-linear-gradient(top, red, blue) repeat-x;
background: blue -webkit-gradient(linear, left top, left bottom, from(red), to(blue)) repeat-x;
}
Why not render your gradient out as an 1px-wide image and use something like the following:
body {
background-color: #fff;
background-image: url("images/background.jpg");
background-position: center top;
background-repeat: repeat-x;
}
Setting the background-repeat value will help you control how the background... repeats. In this case it would be rendered as a solid band across the top.
http://www.w3schools.com/css/pr_background-repeat.asp
Also, using an image should work across all browsers, whereas the moz-gradients could be problematic. The image method above should render very predictable results across all browsers.
I had the same problem but realised that it made sense and so just accepted the scrolling / repeating gradient. You could set a fixed height, not %, but to ensure that the gradient didn't repeat you would need to set the height as bigger than anybody's screen who wants to view it. And you don't know what resolutions people have. My advice is to just leave it.