Home Forums Themes BBQ Change background color or add image to background?

Change background color or add image to background?

Started 1199 days ago Created by SADK81 This topic is not resolved
  • Hi!

    How can add an image to the background of the site? If that proves too hard for me could you also tell me how to change the color from white to another solid color?

    The more detailed the better… I am new to this :)


  • Juanfra Aldasoro 1199 days ago Support Staff 1331


    At this moment you cant’ do that through the options panel. However, you can play a bit with css to have something like you mention.

    In order to have an image as background of the whole page you should have the following CSS:

    body{ background: url(url-of-the-image.com/image.jpg); }

    Replace url-of-the-image.com/image.jpg for the path of the image you want to use.

    Then for the white background around the content:

    #header #top{ background: #fff;}
    #container {background: #fff;}

    You can include these portions of CSS within your theme options (Custom CSS) or in your theme custom.css file.


  • Thank you! Where do I add the “body{ background: url(url-of-the-image.com/image.jpg); }”?

    Do I add it to the Custom Css or a file? Does it matter where in the file?

  • Juanfra Aldasoro 1199 days ago Support Staff 1339

    You can either add it to the Custom CSS option or the custom.css file.

    We set the custom.css file as a file for the user to add their custom code in order to avoid problems when updating the theme version.


  • Thanks! i’ll try tomorrow. Is there a size yu recommend for the background image?

  • Juanfra Aldasoro 1198 days ago Support Staff 1345

    It depends, if you repeat the background image across the x or y axis, you can have a small image. If you have a tile image, the same. The size depends exclusively on the design.


  • Thank you! I added a background… one image that’s 1200x700px. It’s repeating but I don’t want it to. I’d rather the image just appear at the top left corner.

    How do I stop repeating on both axis’? :)

  • Juanfra Aldasoro 1197 days ago Support Staff 1350

    No problem :)

    You can try with this:

    body{ background: url(url-of-the-image.com/image.jpg) no-repeat top left; }


  • Thank you!! One last question, I promise :)

    So I changed the background but a few areas still have white behind them, like the Twitter widget; the top of the sub-navs; some of the food menu items etc..

    If you still ave my log in, can you log in and take a look? I added all the code you provided above :)

    Thanks again.

  • By the way for the Twitter background I tried this…

    .widget_nice_twitter ul li {
    background: #ffffff;
    padding: 8px 0;

    But it didn’t work :(

  • Juanfra Aldasoro 1196 days ago Support Staff 1357

    Hello there,

    Thanks for writing :)

    I’ve been through your site and didn’t see any CSS rule for the twitter widget. You’re right, the class you need to modify is:

    .widget_nice_twitter ul li{ background: #FFFFFF; }

    Please let me know how it goes or if you need more help with this.


  • Thank you! But I still see other areas with issues. See screenshots…

    When I hover over the tweet:


    The dropdown menu:


    The food menu items (title and price):


  • Juanfra Aldasoro 1196 days ago Support Staff 1369

    Hello there,

    Yes, basically these issues made up not to give the background color option yet. The most difficult one is the dropdown menu. You’ll need to edit the image on that one. With regards to the others see the following:


    .widget_nice_twitter ul li:hover {
        background: #your-bg-color;


    .menu-box li .title span{ background: #your-bg-color; }



You must be logged in to reply to this topic.