> On Jul 29, 2016, at 12:39 AM, Tom Livingston <[email protected]> wrote:
>
> This:
>
> background-image:none,none,url("images/bg_paper.Hi.jpg");
>
> should work. Same as I did here:
>
> @media screen and (min-width: 480px){
> .test{
> position: relative;
> background-image: url("img/img1.jpg"), url("img/img2.jpg"),
> url("img/img3.png");
> background-repeat: no-repeat;
> background-position: 0 0, 500px 0, 1000px 0;
> height: 500px;
> width: 5000px;
> }
> }
> @media screen and (min-width: 900px){
> .test{
> background-image: none, url("img/img4.jpg"), none;
>
> }
> }
>
> Just use the correct order and positioning for the new image.
You don’t need to specify the “none” in your second block
background-image is a list; the second rule completely overwrites the first
rule (the second rule is a list which contains only one item).
thus the following will only display one background-image at the specified
position when the viewport is larger.
@media (min-width:900px) {
.test {
background-image: url("img/img4.jpg");
background-position: 10px 10px;
}
}
If background-position is _not_ specified inside the second block, it will of
course inherit from the first block, and will use the first specified position
in that rule. The same applies to background-size, background-repeat, etc.
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
