Change background color or add image to background?

This support request was posted in BBQ by SADK81

Request ID #1326 In Progress
  • 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 🙂

    Thanks!

    Juanfra Aldasoro

    Hi,

    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.

    Best,
    Juan.

    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

    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.

    Best,
    Juan.

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

    Juanfra Aldasoro

    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.

    Best,
    Juan.

    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

    No problem 🙂

    You can try with this:

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

    Best,
    Juan.

    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…

    media=”screen”
    .widget_nice_twitter ul li {
    background: #ffffff;
    padding: 8px 0;
    }

    But it didn’t work 🙁

    Juanfra Aldasoro

    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.

    Best,
    Juan.

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

    When I hover over the tweet:
    http://exquisiteasana.com/wp-content/uploads/2013/04/4-18-2013-4-20-12-PM.jpg

    The dropdown menu:
    http://exquisiteasana.com/wp-admin/post.php?post=295&action=edit

    The food menu items (title and price):
    http://exquisiteasana.com/wp-content/uploads/2013/04/4-18-2013-4-20-23-PM.jpg

    Juanfra Aldasoro

    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:

    Tweet:

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

    Menus

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

    Best,
    Juan.

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

Login to your Account

Welcome back! Please log in to your account by filling the fields below:

Forgot?

Not a member? Create a free account.

Create a Free Account

You're 27 seconds away from some awesome WordPress free stuff, benefits and more. Create a free account and have access to our free products, benefits and more!

Already have an account? Log in
Secure Server