Home / Forums / DynamiX Support / Change header background color before transparent background loads

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts

  • sethdotterer_sc
    Participant

    I have my pages set up with a transparent background header. My logo has a transparent background. Before the header image loads the logo loads on a white background which then changes to transparent.

    Is there a way to change the background color to something other than white before the transparent layer loads so the logo is legible?

    Can’t seem to find what CSS controls this and it goes away too fast to determine using Chrome inspector.


    sethdotterer_sc
    Participant

    Loading

    Loaded

    Hi @sethdotterer_sc

    Upon checking the front-end’s code, this is set as the background for custom-layer5. You can change it to another color but this will affect the other rows as well.

    Regards,


    sethdotterer_sc
    Participant

    So it looks like this is custom layer 5:

    #custom-layer5 {
        background: rgb( 255,255,255 );
        background: rgba( 255,255,255, 1);
        background-color: transparent;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff , endColorstr=#ffffffff);
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff , endColorstr=#ffffffff)";
        background: linear-gradient(to bottom, rgba( 255,255,255,1), rgba( 255,255,255,1) );
        background: -o-linear-gradient(top,rgba(255,255,255,1), rgba( 255,255,255,1));
        background: -moz-linear-gradient(100% 100% 90deg, rgba( 255,255,255,1), rgba( 255,255,255,1));
        background: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba( 255,255,255,1)), to(rgba( 255,255,255,1)));
        zoom: 1;
    }

    Is there a way to just over-write the first iteration of background to a darker color but then have it go transparent when page loads? It looks to be written several time in style sheet but if I just do something like:

    #custom-layer5 {
    background: rgb( 0,0,0) !important;
    }

    In my custom style sheet, the whole page just stays black. I’m OK with it being black (for example) but then turning white when page loads and it goes transparent. I really want to just target the initial color it loads.

    Hi @sethdotterer_sc

    I think that is possible by using custom Javascript. Unfortunately, we do not have support for such.

    Regads,

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.