Previous Message
Next Message

Cascade Image override ?

Sent by Tom Livingston on 29 July 2016 00:12


On Thursday, July 28, 2016, Philippe Wittenbergh [EMAIL-REMOVED]> wrote:

>
> > On Jul 29, 2016, at 12:39 AM, Tom Livingston [EMAIL-REMOVED]
> <javascript:;>> 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/



Thanks Philippe. Good to know.





-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
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
Previous Message
Next Message

Message thread:

Possibly related: