On Thursday, July 28, 2016, Philippe Wittenbergh <e...@l-c-n.com> wrote:
> > > On Jul 29, 2016, at 12:39 AM, Tom Livingston <tom...@gmail.com > <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 [css-d@lists.css-discuss.org] 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/