WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How do I change the banner image background without changing the menu backround (4 posts)

  1. sxfulford
    Member
    Posted 1 year ago #

    I am using a child theme of twenty eleven. I have a banner image with a fixed maximum size but scales down with the window size.

    What I'd like to do but can't figure out is how to make the background colour grey under the image but not under the navigation menu, so that as the window scales up, the grey on both sides of the banner image stretches but as the window scales down the gray disappears and the image shrinks.

    When I change the background of #branding it changes the background of the banner image but also changes the background color of the navigation menu which I don't want.

    For now, as a crude fix, I've added a grey background-image with x-repeat. This works for scaling up but not for scaling down.

    I'm guessing the banner image has to be in its own div but I'm new to this and don't know how to do it. Can anyone help?

    http://www.loamclaystudio.ca/wordpress/

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Try adding this CSS;

    @media (max-width: 1060px) {
     #branding {
       background-image: none;
     }
    }

    and look up media queries
    http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

  3. sxfulford
    Member
    Posted 1 year ago #

    PERFECT!!

    Thanks so much.

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    You're welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic