According to QuirksMode, defining multiple backgrounds works in (at least) IE9, Chrome and Firefox 3.6.
I have the following CSS:
background: #190110 url("http://static.pokefarm.org/_img/gradients/dark_sky.png") repeat-x fixed left top;
background: url("http://static.pokefarm.org/_img/gradients/dark_edge.png") no-repeat fixed -16px bottom, url("http://static.pokefarm.org/_img/gradients/dark_edge.png") no-repeat fixed right -16px bottom, url("http://static.pokefarm.org/_img/gradients/dark_ground1.png") repeat-x fixed left bottom, url("http://static.pokefarm.org/_img/gradients/dark_ground2.png") repeat-x fixed left 50px bottom 50px, url("http://static.pokefarm.org/_img/gradients/dark_ground3.png") repeat-x fixed left bottom 200px, url("http://static.pokefarm.org/_img/gradients/dark_lightning.png") no-repeat fixed right -100px top -150px, #190110 url("http://static.pokefarm.org/_img/gradients/dark_sky.png") repeat-x fixed left top;
That's quite a complex background, but it's to make a "Dark World" background effect for my online game. Essentially it's three different "ground" layers, a gradient sky, two "edges" to sort of fade out the ground near the sides of the screen, and lightning. Older browsers should see only the "dark sky" gradient background.
The resulting effect should be: Screenshot.
Now on to the problem: IE9 displays this effect perfectly, and can even do the optional "animated background" effect where the ground layers scroll in parallax fashion and the lightning flashes and distorts with CSS transforms. Firefox 6 and Chrome 13, however, display only the fallback gradient-only background.
Does anyone have any idea why this happens?
To answer my own question, neither Chrome nor Firefox support more than two values in background-position. Makes me wonder how they would place a background image relative to the lower-right corner...
The original answer is quite old, so I thought I'd add a solution for anybody coming to this page. You can set multiple background positions, just like you can set multiple backgrounds.
Although I'm not sure if support existed when the question was first asked.
It appears that support is pretty stable now. http://caniuse.com/#feat=multibackgrounds
background-image: url(image1.png), url(image2.png);
background-position: center bottom, left top;
You separate the background positions by comma, in the order they are defined in background-image
Related
So I'm trying to get my webpage to have a two tone look, one side plain and the other with a radial gradient.
I currently tried making it into an SVG and that failed horrible but I am not entirely sure how to get a triangle that goes from the top left, bottom left, and top right of the page, while also scaling to the browser size.
When I use the SVG as a background, there is a large white block around the top and bottom, and when I just simply don't use a background and just put in the svg code into the HTML it's so giant and I can't manage to get it to scale.
This photo was something I made in sketch but I am new to frontend and I've just had a rough time getting the angles color.
I can get everything else if I could just get the background to do that :c
No need SVG you can do this with CSS and multiple background:
body {
margin:0;
height:100vh;
background:
linear-gradient(to bottom right,transparent 49.8%,grey 50%),
radial-gradient(circle at top,yellow,black);
}
Is it possible to set a linear gradient to the part of the background of <html> element that is typically off screen and out of viewport, but can be "brought in to view" momentarily by trying to scroll past the limit in any of the 4 directions?
I am trying to make the color outside the viewport match my site color. This way, when the user is at top of page and tries to scroll higher, on some browsers, the space that is shown and is typically white will match the color of my site.
I want to do the same thing for the bottom of site if user tries to scroll past bottom.
If I set element's background-color to red, this works perfectly, and all the white color outside viewport, top f page, bottom of page, as well as left and right, will now be painted red instead of default white.
Problem is, my header and footer are different colors, so I need to use a linear-gradient. When I use a gradient, for example:
background: -webkit-gradient(linear, left top, left bottom, from(#f8593a), to(#000));
background: linear-gradient(#f8593a, #000) no-repeat;
it simply doesn't show up.
Am I doing something wrong, or is this simply not possible?
UPDATE
Test Case jsFiddle
Best I can do in a jsFiddle. (PS: if someone knows of a way to create a fiddle like this without jsFiddle's panels, so the actual Chrome pulling down can be tested, please suggest.)
The difference between this example and live behavior is that in the example, you can't drag the iFrame window past its boundary, thereby revealing that `out of viewport part of .' However, the blue background-color here should represent that same area here. And as can be seen, the color goes to that area without any extra work, while the linear-gradient is treated as an image and stays within some bounds.
What the difference between background: no-repeat center center;
and background-size: cover; ?
Both achieve basically the same effect as a background image on my website. No difference as far as I can tell in results.
background: no-repeat centre centre;
is saying place a background image in the element, but only show one instance of it (no-repeat), try looking at thebackground-repeat property to see other options.
The CSS then says place the image in the vertical centre, and horizontal centre of the element. This is related to the background-position property.
It might be worth you trying to reducing the image size to something small 10px x 10px to see the effect of no-repeat, vs repeat-x, repeat-y and repeat.
background-size: declares how big you want the background image to be (this allows dynamic resizing of the image much like height and width in the html img tag), this is a property introduced in CSS3.
By default this is the background-image's default/native resolution. By using the be cover value you are saying scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
I have put links on each of the properties so you can see the possible values for each. I recommend you look at all of the background-* attributes on w3schools. Look on the left hand side and they are all listed ;)
Alternatively if you're new to CSS, I would recommend this free course by Udacity which has plenty of video tutorials and guides you through HTML & CSS web development.
I have one picture that is 50px width and 340px height. The picture should be repeat to the left side, but not down. Then i have a streak with this picture in the top of my page. And the rest of the page(down) should be an other picture.
Here is my statement:
background: url("images/bg.png") repeat-x scroll left top #2C9E2E;
But now i want to change the last piece #2C9E2 to url("images/bg-body.gif"), but it wont work.
I tried this code:
body{
background: url("images/bg.png") repeat-x scroll left top url("images/bg-body.gif");
}
background is shorthand for multiple declarations, and the url("images/bg.png") and #2C9E2E pieces specify background-image and background-color, respectively.
To display multiple, layered, backgrounds you need to separate multiple declarations with a comma (background: <top background>, <bottom background>). Also, the color declaration can only appear on the last background layer.
So, if you want bg.png to appear on top of bg-body.png with a flat colour behind both, you would use:
background: url("images/bg.png") repeat-x scroll left top, url("images/bg-body.gif") #2C9E2E;
Add additional properties to the second background as needed (e.g. repeat/scroll/position), and remove the color value if you don't want it behind both of your images.
Also note that multiple backgrounds are not supported by IE8 (http://caniuse.com/#feat=multibackgrounds). If you need to support IE8 or older, you will need to specify a single background fallback.
background: url("images/bg.png") repeat-x scroll left top #2C9E2E;
background: url("images/bg.png") repeat-x scroll left top, url("images/bg-body.gif") #2C9E2E;
In trying to finalize the layout for my blog, I am having one issue I cant seem to get past. I have two different backgrounds that I want to use for my blog. One of the backgrounds is used just for the header of the blog. The other background I want to add is for the rest. I have been trying to find a way to get my body background to repeat after so much spacing with little luck.
If there is a way to have a background repeat-y after a certain position that would be perfect. But that doesn't seem possible from my searches. If there is another way to accomplish this, it would be very helpful.
This is the site I am trying to edit.
As you can see, the header has the proper background, but I cant figure a way to get that background everywhere else. For clarification, the background header has a blue background under the home/search buttons, so that is why I cant just have one repeating header.
I just made a few edits to my site, and I got to to look very close to how I want. I did more of a quick fix that is "good enough". I just made the header background repeat, and it looks pretty good for the most part. The only problem with it now is that the blue bar that is part of the header sometimes shows up at the bottom of the screen, which is okay I guess. If anyone has a better solution I would love to hear it.
When you specify "repeat-y" then there is no posibility as far as I know to make the background begin repeating after some coordinate.
However, since you have 2 different backgrounds, you don't need to.
Just specify the non repeating background first, and with the adequate dimensions; it will hide the other
This CSS
.test1 {
background-image: linear-gradient(90deg, black, red), linear-gradient(0deg, white, yellow);
background-position: 0px 0px, 0px 0px;
background-size: 100% 100px, 100% 50px;
background-repeat: no-repeat, repeat-y;
}
produces a black & red top, followed by a repeating pattern of yellow stripes
demo
It is not clear from your example if this is enough; if not you would need another background, between the first and the second, to hide the amount of the repeating background needed