Display colour background instead of header image below breakpoint value

  • Author
  • #97593

    I’ve got a header image (1180 x 120px), and a custom logo (270 x 89px). Viewed on a mobile the effect isn’t good, the header image scrunches up beneath the logo and makes the logo very indistinct. i.e. it’s a mess!

    Below a breakpoint of, say, 600px window width, I’d like not to display the header image and just have a black background colour, against which my logo will display well.

    Can I do this in Tempera? If I have to throw some custom CSS at it, what would this be? (I’m not a css guru!)


    Cryout Creations mastermind

    You can do that with CSS:

    @media (max-width: 640px) {
       #branding #bg_image {
           opacity: 0; 

    This will make the header image fully transparent (so it maintains its height and place in the header), leaving the header background color visible.

    If you like our creations, help us share by rating them on WordPress.org.
    Please check the available documentation and search the forums before starting a topic.
Viewing 2 posts - 1 through 2 (of 2 total)

The topic ‘Display colour background instead of header image below breakpoint value’ is closed to new replies.