CSS Header

[proximomktg]

I have css to create the background image in the header.
header.masthead.masthead-stacked{
background:url(‘https://millersseptic.com/wp-content/uploads/2018/05/NewPageHeader2018.png’) repeat-x;
}

On mobile would like the image will size correctly or replace with a different image for that screen size. Im not naming it correctly can you assist?
@media only screen and (max-width: 600px)
.masthead.masthead-stacked-background {
width: 100%;
height: auto;

[basanta]

Hi There,

Please use this CSS instead of yours.

@media (max-width: 650px){
.masthead.masthead-stacked-background {
background-size: 100%;
/*you can use background if you need different image.*/
}
}

Hope this helps!

[proximomktg]

this helped. Ok on mobile the top just looks crazy. Everything is jumbled. WOuld like the Phone number on separate line then the plumbing menu with social media then background masthead then then logo. How can i fix this??

[jade]

Hi there,

Please try this code:

@media (max-width: 480px) {
    .x-topbar div.x-topbar h5,
    .x-topbar div.x-topbar,
    .x-topbar div.x-social-global {
        width: 100%;
        float: left;
    }

    .x-topbar-inner {
        display: block;
    }

    .x-topbar-inner {
        margin-top: 40px;
    }

    .x-topbar div.x-social-global.topbar-menu {
        margin-bottom: 15px;
    }
}

Hope this helps.