Putting an image in the menu bar

Hi – I would like to put an image as a background for the menu bar instead of simply changing the colour. I am using twenty fourteen theme. The image would be a length of tartan spanning the primary menu bar at the top.

Please can you tell me how this is possible?

Regards, Paul

  • Predrag Dubajic
    • Support

    Hey Paul,

    Hope you’re doing well today :slight_smile:

    You can simply add this CSS code to add desired image as menu background for Twenty Fourteen theme:

    .header-main {
    background-image: url(IMAGE_URL);
    }

    There are some additional attributes you can use depending on your image size, if you’re using pattern or single image etc. the code would in that case look something like this:

    .header-main {
    background-image: url(IMAGE_URL);
    background-repeat: no-repeat; /* additional options: repeat, repeat-x, repeat-y*/
    background-position: center; /* additional options: left, right */
    background-size: contain; /* additional options: cover */
    }

    I have commented out each line to see what else you can use to adjust the background.

    You may wish to use a child theme or a plugin like this one for this additional CSS. That way you’re protected when you come to upgrade.

    Hope this helps :slight_smile:

    Best regards,

    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.