In Chrome right now, the background style spec:
background: color position/size repeat origin clip attachment image|initial|inherit;
But I cannot get the position/size fragment to work;
I should be able to say red top left 100% 100% no-repeat url() or red top left contain url() or even red contain url() -- but none of these render results.
Of course I can do it by specifying the individual background-* attributes. Is the spec broken or Chrome?? O_o
CSS background attribute syntax is like this:
background: [ <background-color> || <background-image> ||
<background-repeat> || <background-attachment> ||
<background-position>
] | inherit ;
example:
background: red url("../images/image.jpg") no-repeat scroll top left;
As for background-size attribute, it's from CSS3. You should use it separately.
The answer is in your question. You are missing the / between position and size:
background: #FFF url("/image/path/img.jpg) no-repeat scroll top left / 100% 100%;
^
Example:
html, body {
height: 100%;
min-height: 100%;
}
body {
background: #FFF url(http://placehold.it/400x400) no-repeat scroll top left / 100% 100%;
}
Related
This question already has answers here:
CSS3 gradient background set on body doesn't stretch but instead repeats?
(13 answers)
Closed 4 years ago.
When using linear-gradient CSS property, the background appears without stripes when using left and right as direction value. But when direction value is given as top or bottom, stripes appears in the background. Is there any way that we can remove the stripes?
Here is the code:
body {
background: linear-gradient(to top, red, yellow);
}
You are facing a complex background propagation that you can read about here. I will try to explain it with simple words.
Your body has a height equal to 0; thus the background won't be visible on it but by default it has 8px of margin which create a height of 8px on the html element.
Why not 16px of height (8px for top + 8px for bottom)?
Since the height of body is 0 we are facing a margin collpasing and both margin will collapse into only one and we have a height of 8px.
Then we have a background propagation from body to html and the linear-gradient will cover the 8px height.
Finally, the background of the html is propagated to the canvas element in order to cover the whole area which explain why the linear gradient is repeating each 8px.
body {
background: linear-gradient(to top, red, yellow);
}
It's also repeated when using left or right direction but you won't see it visually which is logical since it's the same pattern:
body {
background: linear-gradient(to right, red, yellow);
}
You can also remove the repeating and you will see it's covering only 8px
body {
background: linear-gradient(to right, red, yellow) no-repeat;
}
In order to avoid this behavior you can simply set height:100% (or min-height:100%) to the html
html {
height: 100%;
}
body {
background: linear-gradient(to top, red, yellow);
}
It will also work with no-repeat since by default a linear-gradient will cover the whole are:
html {
min-height: 100%;
}
body {
background: linear-gradient(to top, red, yellow) no-repeat;
}
That's because the calculated height of <body> is resulting from the height of its content. When smaller than viewport's height, the background will repeat itself:
body {
background: linear-gradient(to top, red, yellow);
}
To make sure it stretches itself (and the background gradient) across the entire height of the viewport, you need to give <body> a min-height equal with viewport's height (100vw):
body {
background: linear-gradient(to top, red, yellow);
min-height: 100vh;
}
body {
background: linear-gradient(to top, red, yellow);
min-height: 100vh;
margin: 0;
}
As #TemaniAfif pointed out in comments, the technical reason for the above is: there is a difference between the root element, which covers the entire viewport and inherits its background from <body>, and the <body> element, which, as specified, can be smaller than the viewport. As per W3C Recommendation:
The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for 'background-position') at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.
How to increase my background's width
Given below is my code.
#introSection {
color: white;
background: center / contain no-repeat url("/static/bg.jpg");
height: 300px;
background-color: red;
}
In order to make the basckgroud cover the div, simply change the line to this:
background: center / cover no-repeat url("/static/bg.jpg");
See MDN for more info on the various options you have for sizing a background.
I'm attempting to create a background for a webpage that takes advantage of the gradient options in CSS3. What I want it to do is use a gradient that fills the full height of the screen, and then if the screen is scrolled beyond that, to just use the final color.
Unfortunately, all of my attempts end up with either the gradient repeating or staying fixed. Neither of these are acceptable for what I have in mind.
Could any of you help me? The closest I could get so far can be found below, but obviously it stays fixed. Everything else I've tried has pretty much had a repeating issue, even with no-repeat thrown into the mix.
html {
height: 100%
}
body {
background: gold no-repeat linear-gradient(silver, orange, gold);
background-attachment: fixed;
min-height: 100%;
margin: 0px;
}
You could make use of multiple backgrounds and stack them like in the below snippet where the first background is your linear-gradient and the second one is a solid color (which is same as the linear gradient's end color).
By not repeating the gradient (using the no-repeat), we can limit the gradient to be present only for the screen's height whereas the solid color background would by default run through the full size.
Here is what MDN says about multiple background stacking: link
These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color.
(emphasis is mine)
html {
height: 100%;
}
body {
background: linear-gradient(silver, orange, gold, red) no-repeat, gold;
margin: 0px;
}
/* Just for demo */
div {
min-height: 200vh;
}
<!-- Library included just to avoid prefixes so that users with older browser can view -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>
Some content....
</div>
Note: I have added a red end color to the linear-gradient just to show how the solid color takes over from the point where the gradient ends.
Actually, it would look like this:
html {
height: 100%;
}
body {
background: linear-gradient(red, orange, gold) no-repeat, gold;
background-size: 100%;
margin: 0px;
}
div {
min-height: 200vh;
}
Here is a fiddle https://jsfiddle.net/v14m59pq/163/
Hope this help you man.
If you want that effect, you need two layers, back layer with the final color and the top layer with the gradient.
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
background-color: gold;
}
body {
height: 100%;
background: gold no-repeat linear-gradient(silver, orange, gold);
}
I use the html with a gold color and the body with the gradient, simply means, the parent the main color and the children the gradient with the full viewport height.
Check link to see the result :)
http://codepen.io/TibicenasDesign/pen/VLywpL
I'm stuck on a CSS problem.
I would like to get a CSS stripe as background of my page like i did here, except that i want the stripe to be located on the bottom right corner of the page.
Moreover i want it to be a fixed background attachment.
I tried what is suggested here : How to position background image in bottom right corner? (CSS) but it seems to work only for background images and not for background gradients.
I tried changing offsets in the gradient definition but it's still relative to the top left corner, and the result would differ if the window size changes.
Here's my current code :
body
{
background: linear-gradient(
150deg,
rgba(180,214,14,0.0) ,
rgba(180,214,14,0.0) 70px,
rgba(180,214,14,0.4) 80px,
rgba(152,197,10,0.5) 150px,
rgba(0,0,0,0.4) 151px,
rgba(0,0,0,0) 160px
), no-repeat 0 0 !important;
background-attachment: fixed !important;
/* background-position: 80% 80% !important; */
background-repeat: no-repeat !important;
}
Any advice is welcomed !
I think you are correct, in that the background-position property only works for images and not gradients. At least that's what I'm finding by playing around with it.
So this isn't an answer to "how to make background-position work for gradients", but rather a suggestion to put your gradient on a different element and position IT to the bottom right.
Like:
div {
position: absolute;
right: 0;
bottom: 0;
width: 160px;
height: 160px;
background: linear-gradient(
150deg,
rgba(180,214,14,0.0) ,
rgba(180,214,14,0.0) 70px,
rgba(180,214,14,0.4) 80px,
rgba(152,197,10,0.5) 150px,
rgba(0,0,0,0.4) 151px,
rgba(0,0,0,0) 160px
), no-repeat 0 0;
background-position: center;
}
Granted, you'll probably have to change the gradient to fit better within that element, but I think this might be the only way to achieve what you're trying to do.
Also, you'll want to make sure that body has position: relative (or whatever the containing element is).
In CSS declaration for a selector is given as:
background-attachment: scroll;
background-color: transparent;
background-image: url(/images/ucc/green/btn-part2.gif);
background-repeat: no-repeat;
background-position: right top;
I want to optimize the code and change it to:
background: scroll transparent url(/images/ucc/green/btn-part2.gif) no-repeat right top;
My question is, Is this correct way and does it work in IE7/8, Firefox, Safari?
Yes it works. Take a look at point 6 here - http://www.domedia.org/oveklykken/css-shorthands.php
http://www.w3schools.com/css/css_background.asp
When using the shorthand property the
order of the property values are:
* background-color
* background-image
* background-repeat
* background-attachment
* background-position
background
{
background: transparent url(/images/ucc/green/btn-part2.gif) no-repeat scroll right top;
}
Yes, this is the correct way and it works in all major browsers. You can read more about the CSS background property which can be used to set all background-* properties together.
Update: Yes, the following rule will work:
background
{
background: transparent url(/images/ucc/green/btn-part2.gif) no-repeat scroll 20px 40px;
}
Except the browser will attempt to apply this rule to an <background> element in the DOM. And since there's no such element in HTML, the rule will never be applied to anything. :-) So you have to change the rule selector to select the container element you want to apply the background property to:
div#myDivIWantToSetBackgroundTo
{
background: transparent url(/images/ucc/green/btn-part2.gif) no-repeat scroll 20px 40px;
}
Btw, you can play with various values for the background property on the W3School site.