Menu Bar Background Image


#1

I would like to change the background color to an image of 6 colors. Can anyone do this or even use some kind of an overlay to accomplish this so it fits (stretches) all screen sizes? Thanks for any help.


#2

Hi, what do you mean with the background color to an image of 6 colors? can you post a link to your site here?


#3

Can’t really post at this time. I just want stripes of 6 colors for a background of the menu instead of just one color.


#4

I see, and you want to include the image to the menu bar background, right? you can add this code using custom css plugin to do that:

.top-bar {
    background-image: url(your_image_url.jpg);
}

#5

Thank you… will this stretch to fit whatever the size of the screen?


#6

if you put only the code in above, the image will repeat to the right to fill the width of the screen.

but if you want the image stretched and not repeated, you can use this code below:

.top-bar {
    background-image: url(your_image_url.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

#7

Sorry Awan. It didn’t work, so I know I’m the one doing something wrong. I sent an email to your gmail address with links


#8

Done, actually the background is already changed. But because the image is too large and doesn’t matched with the top-bar size, so the image is stretched.

I only change the background-size to background-size : 100% 100%

Don’t forget to remove the credential that you gave to me :slight_smile:


#9

You are the very best Awan. You not only help but educate. I think I actually understand it now as well. Thanks again for your help and everything you do for everyone here.


#10

glad to help :slight_smile: