21 replies to this topic

[david_hartman]

Hi,
Trying to set a background image for the blog section only. Added this to CSS but nothing happening:

 blog{background:url(http://wpdev.sontagfilm.org/wp-content/uploads/2011/03/Home_About.jpg)}

For this site: http://wpdev.sontagf...category/blog/

Thanks, David

ps- i have custom backgrounds for the pages, so i can't use 'custom background' feature

[catrina]

Are you using some kind of custom background plugin to set up your different backgrounds?

[david_hartman]

No. Just made custom pages from php.

[catrina]

 blog{background:url(http://wpdev.sontagfilm.org/wp-content/uploads/2011/03/Home_About.jpg)}

^ The CSS is correct, but perhaps you should replace "blog" with "body.category-blog" to be more specific.

[david_hartman]

Adding the category is helping, but the background image only appears above the header and in the footer..? Thank you Catrina

[kastelic]

Try setting

 #page

to

 background:transparent

and then set whatever background you need for the inner divs.

I found these elements quickly by using Firebug for Firefox. It allows you to inspect elements in the page and modify their css right in your browser to see what changes you need to make. It is absolutely essential if you're going to do changes like this.

[david_hartman]

Thanks Jimmy, I'm not following what you mean by using #page (this is a blog section).. I tried adding the transparent background to the code I have going, but no such luck. thanks, david

[catrina]

Add this first to see how it works:

 #page {background: transparent;}

[david_hartman]

no changes.. have tried a bunch of variations on this:

 #page {background: transparent;}
	body.category-blog{background:url(http://wpdev.sontagfilm.org/wp-content/uploads/2011/03/Home_About.jpg);}

thanks Catrina!

[catrina]

Try this:

 #page {background: transparent;}
	body.archive, body.category, body.category-blog, body.category-6, body.full_width, body.ttype-posts, body.tmain-posts {background:url(http://wpdev.sontagfilm.org/wp-content/uploads/2011/03/Home_About.jpg);}

[david_hartman]

thanks catrina, no changes with this either.. thanks

[catrina]

How did you get the custom background images for your other pages?

[david_hartman]

I added new .php pages for each one (and tried adapting that code to this too) - but the rest are pages and this is a blog category.

[kastelic]

 #page

means a div with the id of "page". Its on every page and its what you need to set as transparent to see the background behind it. Are you putting the CSS in the right place? How about a screenshot of your code in Custom Code -> Custom CSS.
If you don't know CSS read this tutorial for an introduction to the concepts and syntax: http://www.w3schools...css/default.asp

[kastelic]

You could also try being more specific like

 body #page{background:transparent}

[david_hartman]

A screenshot link is attached.. again here is what we've tried for now:

 body.category-blog{background:url(http://wpdev.sontagfilm.org/wp-content/uploads/2011/03/Home_About.jpg);}

http://wpdev.sontagf.../category/blog/

Thanks Jimmy

http://wpdev.sontagf...3/Picture-1.png

[catrina]

You should try adding it to the base.css file in the child theme instead.

[david_hartman]

Thanks Catrina,
Tried the following to base.css.. its still not in place, but better! ..? http://wpdev.sontagf.../category/blog/

 body.category-blog{background:url(http://wpdev.sontagfilm.org/wp-content/uploads/2011/03/Home_About.jpg);
	background-repeat:no-repeat;
	width:940px;
	margin:0px auto 0px auto; padding:0px;
	}

[cmunns]

If you are targeting the selector I think you are then you need to override these: `.canvas #page, .full_width #page, body.fixed_width{}` so... `body.category-blog.canvas #page, body.category-blog.full_width #page, body.category-blog.fixed_width {}`

[david_hartman]

Thank You Adam! This worked well.. though I still need to get it in place- its aligned to the far left and top. I tried the usual margin/padding options but then everything else moved with it..?

http://wpdev.sontagf.../category/blog/

Here's what I have for now..

 body.category-blog.canvas #page, body.category-blog.full_width #page, body.category-blog.fixed_width { background:url(http://wpdev.sontagfilm.org/wp-content/uploads/2011/03/Home_About.jpg);
	background-repeat:no-repeat;
	margin:0px 0px 0px 0px;
	}

Getting really close.. Thanks! David