Previous Message
Next Message

Cascade Image override ?

Sent by Crest Christopher on 27 July 2016 21:09


Tom Livingston wrote:
>
> On Wed, Jul 27, 2016 at 3:31 PM, Crest Christopher <
> [EMAIL-REMOVED]> wrote:
>
>>
>> Correct me if I'm wrong but shouldn't a rule further down the cascading
>> over ride any previous rules before ?
>>
>> 1st.
>> #inner {
>>         position:relative;
>>
>>
>>
background-image:url("/wdp/wip/images/l2b_innertop.png"),url("/wdp/wip/images/l2b_innerfooter.jpg"),url("/wdp/wip/background-paper.jpg");
>>         background-repeat:no-repeat,no-repeat,repeat;
>>         padding-bottom:10%,padding-bottom:0;
>>         background-size:100%;
>>         background-position:top,bottom
>>         }
>>
>> 2nd (Or further down in the cascade) This rule override the previous
>> rule for the same element ? My paths are setup correctly, the image is
>> on the server but doesn't load ?
>> #inner {
>>         background-image:url("/wdp/wip/images/bg_paper.Hi.jpg");
>>         background-repeat:repeat;
>>         }
>>
>
>
>
> I just used this in a test:
>
> @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;


You are replacing img3 which is the third background image in the
sequence with img4 which is the second background image in the sequence;
I attempted whereas, in sequence the first rule for the element has the
background image to which I want to replace by cascade is third;
background1,background2,background3.

Cascading down to the same rule except in a different break point in
sequence;
none,none,background-replace-image

Sounds logical keeping with order of sequence for the background property.
>
>
> }
> }
>
> and what I expected to happen happened, which was that the 3 images were
> replaced with the single 4th image and positioned at img2's position, at
> 900px wide. I think you need to make sure you are accounting for the
> attributes of all three initial images when you override them.
>
> HTH
______________________________________________________________________
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: