I have a couple background images here:
html{
background: top left no-repeat url(http://wallpapers.pupazzo.org/animals/Peek-a-Boo_%20Red%20Fox%20Kit.jpg),
top right no-repeat url(http://www.dcwild.com/images/Fox-Kit-Riverfarm.jpg);
background-size: 50% 400px, 50% 400px;
}
The issue is when I try to set the y to 100% it doesn't seem to work. The images seem to be getting the 100% measurement from something other than the entire page. Is there a way that I can have two images as the background and use CSS to position the images as 100%?
Here is a fiddle for further example.
Live Demo
Thank you in advance!
I think (though I'm not 100% certain!) you're saying that this doesn't work:
html{
background: top left no-repeat url(http://wallpapers.pupazzo.org/animals/Peek-a-Boo_%20Red%20Fox%20Kit.jpg),
top right no-repeat url(http://www.dcwild.com/images/Fox-Kit-Riverfarm.jpg);
background-size: 50% 100%, 50% 100%;
}
This has a result that looks like this.
If you set the height of html to 100%, however, it works fine:
html {
background: top left no-repeat url(http://wallpapers.pupazzo.org/animals/Peek-a-Boo_%20Red%20Fox%20Kit.jpg), top right no-repeat url(http://www.dcwild.com/images/Fox-Kit-Riverfarm.jpg);
background-size: 50% 100%, 50% 100%;
height: 100%;
}
This has a result that looks like this.
Related
.news-header {
background-image: url(maureske_green_left.gif), url(maureske_green_body.gif), url(maureske_green_right.gif);
background-position: left, center, right;
background-repeat: no-repeat, repeat-x, no-repeat;
height: 31px;
}
This works good but the repeat-x of maureske_green_body.gif makes maureske_green_right.gif to not show up.
Setting a width doesnt make the right image to show neither.
If I do no-repeat on the center image all images show up but of course theres a gap between all three. So how do I fix without making center image same width as webpage?
Thanks in advance!
Jarosław
Top image layer is first in your css, so you need to reorder them this way:
background-image: url(maureske_green_left.gif), url(maureske_green_right.gif), url(maureske_green_body.gif);
In short version your new css will be:
.news-header {
background: url(maureske_green_left.gif) no-repeat left top,
url(maureske_green_right.gif) no-repeat right top,
url(maureske_green_body.gif) repeat center top;
height: 31px;
}
Interesting article about multiple css backgrounds here
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).
I would like to use 2 images as a fixed image's background image so I used the code on the body.
background: url(images/31.jpg) 100% no-repeat, url(images/12.jpg) 100% no-repeat;
background-position: fixed;
I need them to fit the browser width 100% and I want image 2 to stack vertically after image 1. I have read quite a few websites about using multiple images with CSS3. Is this possible without JavaScript and if so why do my images stack on top of one another and image 1 doesn't start at top left?
the following reference css try it
#idName {
background-image: url(image1.png),url(image2.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
}
You need to set the vertical size to 50% or so, else every images takes all the height
body {
background-image: url(http://placekitten.com/300/150), url(http://placekitten.com/200/120);
background-size: auto 50%;
background-repeat: no-repeat;
background-position: top center, bottom center;
}
fiddle
This code works for me in Chrome & FF but for some reason not in Safari. Safari should support it though. Safari reports there's something wrong with the syntax. This is probably true but I just can't seem to figure it out.
.frontpage {
background: url(logo.png) no-repeat center center / 50% auto,
url(background.png) no-repeat center center / cover;
}
I need the background.png to act as a cover and fill the whole background of the page while the logo should be centered and have a width of 50% & height auto.
set background-size appart, to avoid this kind of failure with browsrers that are not yet old but not up to date anymore :)
edit
.frontpage {
background: url(logo.png) no-repeat center center,
url(background.png) no-repeat center center;
background-size: 50% auto,
cover;
}
I am trying to figure out how to stretch a background image vertically. I am using CSS3 with 3 images in the following way:
background-image: url("left.png"), url("right.png"), url("center.png")
background-repeat: no-repeat, no-repeat, repeat-x
background-position: top left, top right, top
Now I want to stretch these images vertically to that they extend all the way to the bottom. Is there a way to do this?
I'm late to the party here, but this is what worked for me:
background-size: auto 100%;
This will fit the image vertically and let the width do whatever it needs to do (i think it repeats by default). You can also set:
background-repeat: no-repeat;
for it to not repeat the image in the horizontal direction.
Try:
background-size: 100% 100%;
first 100% is for the width and the second for the height. In your case you need the second set to 100%
Thank you for bringing up this question. Below is what worked for me
background-size: cover;
background-color: #a8dadc;
background-repeat: no-repeat;
background-size: 100vw 100vh;