Display colour background instead of header image below breakpoint value

  • Author
    Posts
  • #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!)

    Thanks.

    #97846
    Zed
    Cryout Creations Team

    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 read the available documentation and search the forums before posting.
Viewing 2 posts - 1 through 2 (of 2 total)

You need to log in to reply to this topic.