Blog Background Image

[david_hartman 0]

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.sontagfilm.org/category/blog/ Thanks, David ps- i have custom backgrounds for the pages, so i can't use 'custom background' feature

[catrina 103]

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

[david_hartman 0]

No. Just made custom pages from php.

[catrina 103]

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 0]

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

[kastelic 6]

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 0]

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 103]

Add this first to see how it works:

#page {background: transparent;}

[david_hartman 0]

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 103]

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 0]

thanks catrina, no changes with this either.. thanks

[catrina 103]

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

[david_hartman 0]

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 6]

#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.com/css/default.asp

[kastelic 6]

You could also try being more specific like

body #page{background:transparent}

[david_hartman 0]

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.sontagfilm.org/category/blog/ Thanks Jimmy http://wpdev.sontagfilm.org/wp-content/uploads/2011/03/Picture-1.png

[catrina 103]

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

[david_hartman 0]

Thanks Catrina, Tried the following to base.css.. its still not in place, but better! ..? http://wpdev.sontagfilm.org/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 16]

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 0]

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.sontagfilm.org/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

[Andrew 207]

Hey David, Check out the CSS background shorthand here: http://www.w3schools.com/css/pr_background.asp That's how you position it

[david_hartman 0]

Thanks Andrew.. great link. Was able to position it accordingly with the code below. Thanks so much everyone for the great feedback. Best, David

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/Blog.jpg);
	background-repeat:no-repeat;
	background-position: 223px 154px;
	}