Multiple backgrounds in Safari - css

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;
}

Related

background-image with a left and right, the repeat-x of center image makes the right image not show up

.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

css3 to stack 2 background images on the body

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

Unable to set size in percent on multiple image background

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.

Vertically stretch background image

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;

CSS3 Multiple Background-Image Not working

I have two background images that i would like to place on the left and right side of my wrapper div. I am using CSS3 background-image property to do this but it is not working. Can anyone make sense as to why this is not working in any browsers. I would also like to know once i get this working on modern browsers will it work on older browser like IE 7?
Here is a visual of what i'm trying to accomplish i've have the navigation (green banner) already in place so i need to put the tricky red banner on and circle background.
I thought slicing the edges of the red banner along with the circle background and applying the code below would work but it does not being that I need the sides to stay flush to the sides.
body{
background-color:#e5e5e5;
background-image: url("../img/background_left.png"),url("../img/background_right.png");
background-position: right top, left top;
background-repeat: no-repeat, no-repeat;
background-attachment: fixed, fixed;
}
Add height to your <body> and it will work - DEMO
html, body {
height: 100%;
}
body{
background-attachment: fixed, fixed;
background-color: #e5e5e5;
background-image: url(http://lorempixel.com/300/200), url(http://lorempixel.com/200/300);
background-position: right top, left top;
background-repeat: no-repeat, no-repeat;
} ​
But it won't work in older IE-s - multiple backgrounds support

Resources