Change background color or add image to background?
This support request was posted in BBQ by SADK81
- SADK81 April 16, 2013 at 12:25 am
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 April 16, 2013 at 1:44 amHi,
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.SADK81 April 16, 2013 at 1:53 amThank 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 April 16, 2013 at 1:55 amYou 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.SADK81 April 16, 2013 at 3:57 amThanks! i’ll try tomorrow. Is there a size yu recommend for the background image?
Juanfra Aldasoro April 16, 2013 at 1:24 pmIt 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.SADK81 April 17, 2013 at 1:56 amThank 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 April 17, 2013 at 1:21 pmNo problem 🙂
You can try with this:
body{ background: url(url-of-the-image.com/image.jpg) no-repeat top left; }
Best,
Juan.SADK81 April 18, 2013 at 3:03 amThank 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.
SADK81 April 18, 2013 at 3:08 amBy 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 April 18, 2013 at 1:15 pmHello 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.SADK81 April 18, 2013 at 8:23 pmThank 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.jpgThe dropdown menu:
http://exquisiteasana.com/wp-admin/post.php?post=295&action=editThe food menu items (title and price):
http://exquisiteasana.com/wp-content/uploads/2013/04/4-18-2013-4-20-23-PM.jpgJuanfra Aldasoro April 18, 2013 at 8:30 pmHello 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.
You must be logged in to reply to this topic.