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;
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.
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
Here is what I want to make, somehow:
1- A gradient background from top and down. There should be 2 colors, lets call them color1 and color2.
2- I want the gradient to be about one page, so it starts on top with color1, and then ends about one page down with color2.
3- Then I want color2 to continue all the way down for whatever size the page is.
Is this possible with css maybe?
Thanks
You can create an image that is a couple pixels wide and whatever vertical length you want for your "page size".
In CSS, there's a way to control the repeating of an image. So, you could do a repeat-x, to get the image to repeat left to right. Then, just set the background color of your site to whatever the second color is, so that if your content extends further, the user will only see Color2.
e.g. CSS
body {
background-color: #b5b5b5; /*gray*/
background-image: url(./images/body_bg_gray_1380px.gif); /*path to wherever your bg img is...*/
background-repeat: repeat-x;
}
Use short-hand notation:
body {background:url(images/body_bg_gray_1380px.gif) repeat-x #b5b5b5}