Background Image for header

  • Resolved razorpig

    (@mjtilbury)


    9 years, 6 months ago

    I’m trying to prevent my header from shrinking beyond a certain point on mobile devices. I’ve set a minumum height of 75px but it still squashes horizontally below a width of 480px. If I set a minumun width the header extends beyond the navigation bar on smaller screens. I’ve read that using the “background” property instead of the “img” property can help in these situations. I’ve tried removing the header image under theme options and adding the following code :

    #header-content {
    background-image: url(header_image.png);
    }

    …but it hasn’t worked. Can anyone help?

    https://www.razorweb.co.uk

Viewing 2 replies - 1 through 2 (of 2 total)

  • In your styles.css in the Catch Box Child theme you set up, change

    #branding img {
    min-height: 75px;
}

    to

    #branding img {
    min-width: 480px;
}

    The header image stops shrinking at 480px in Firefox and Chrome once that change was made.

    Thread Starter razorpig

    (@mjtilbury)

    Thank you wnaderingbedou! Works perfect ??

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Background Image for header’ is closed to new replies.