Background image placement WordPress
- SOLVED
I want to set a background image for my site, but it looks like [[LINK href="https://img.skitch.com/20110710-pastpxuui2ij33jkih6hgs6ws5.png"]]these[[/LINK]] settings in my Neutica+ theme override the "body {background:#FFF;color:#000;}" in my styles.css page.
How can I override those color settings and set an image?
(Neutica is a child theme for Themeatic, in case that important here).
[[LINK href="http://audiocompulsive.com"]]Audiocompulsive.com[[/LINK]] is the site, and here's the styles.css page: [[LINK href="http://pastebin.com/xGVvtSN6"]]http://pastebin.com/xGVvtSN6[[/LINK]]
Thanks in advance..
Answers (5)
Duncan O'Neill answers:
Hi Ant,
despite what's above, editing your style.css WILL work if the rule you add there is more specific than the embedded style.
For example, this will work;
body.wordpress {
background:#000;
}
because the css rule is more specific than the embedded rule, which doesn't have a class on the body. So,
body.wordpress {background:url('your-image');}
will also work if you add that rule in style.css.
hope this helps,
Ant Lively comments:
Duncan you're 2 for 2 with my questions! Much appreciated!!
Just Me answers:
easy but maybe dirty way would be to put !important behind the setting you want to use
like
#something {
color: blue; !important
}
Ant Lively comments:
Hey guys the first three ideas didn't work for me but Duncan's suggestion of just adding:
body.wordpress {background:url('your-image');}
was exactly what I needed. Thanks all for trying your help!
Svilen Popov answers:
Put this in your styles
<blockquote>body {
background: #E6F3FF url("<em>path to your background image</em>") <strong>!important</strong>;
}</blockquote>
Or you can use <strong>background-image</strong> property
<blockquote>body {
background-image: url("<em>path to your background image</em>");
}</blockquote>
Ant Lively comments:
Hey guys the first three ideas didn't work for me but Duncan's suggestion of just adding:
body.wordpress {background:url('your-image');}
was exactly what I needed. Thanks all for trying your help!
Denzel Chia answers:
Hi,
Looking at the source of your website.
Your style.css is linked before your theme option generated css.
So you need to put your overwrite css after the theme generated css.
Putting any changes in style.css is not going to work.
You can do it by using a function hook to wp_head() with a late priority, so that it gets generated after the nautical theme generated css.
Example as follows, you need to replace with your overwriting css codes.
I am giving you only the PHP codes.
In your nautical theme functions.php, add the following script.
function nautical_hook_css(){
?>
<style>
body{
/**your new css here**/
}
</style>
<?php
}
add_action('wp_head','nautical_hook_css',90);
Thanks.
Denzel
Ant Lively comments:
Hey guys the first three ideas didn't work for me but Duncan's suggestion of just adding:
body.wordpress {background:url('your-image');}
was exactly what I needed. Thanks all for trying your help!
Luke America answers:
This will override your theme's custom CSS settings to do what you want ... plus it will enable you to implement any other custom styles that you want to use.
1. open this folder: wp-content/themes/neuticaplus
2. create a blank file named: <strong>neutica_extra.css</strong>
3. inside that new file, put this content (and save it):
body
{
background-color: transparent;
background-image: url('images/bkg_neutica_extra.jpg');
background-repeat: repeat;
background-position: left top;
}
4. open this folder: wp-content/themes/neuticaplus/images
5. paste your background image as: bkg_neutica_extra.jpg
NOTE: if you use a different image filename, change it in <strong>neutica_extra.css</strong> as well.
6. open this file: wp-content/themes/neuticaplus/functions.php
7. insert the following code at the very bottom of that file (and save it):
<?php
function neutica_extra_css()
{
$css_url = get_bloginfo('stylesheet_directory') . '/neutica_extra.css';
echo "\n" . '<link rel="stylesheet" href="' . $css_url . '" type="text/css" media="screen" />' . "\n";
}
add_action('wp_head', 'neutica_extra_css', 99);
?>
8. if you have a server cache plugin, clear it
9. clear your browser's cache
10. visit your home page and press F5