Sign in to follow this  
Followers 0
david_hartman

Blog Background Image

22 posts in this topic

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


Share this post


Link to post
Share on other sites

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


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites

No. Just made custom pages from php.


Share this post


Link to post
Share on other sites
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.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites

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


Share this post


Link to post
Share on other sites

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.


Share this post


Link to post
Share on other sites

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


Share this post


Link to post
Share on other sites

Add this first to see how it works:

#page {background: transparent;}


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites

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!


Share this post


Link to post
Share on other sites

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);}


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites

thanks catrina, no changes with this either.. thanks


Share this post


Link to post
Share on other sites

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


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites

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.


Share this post


Link to post
Share on other sites
#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


Share this post


Link to post
Share on other sites

You could also try being more specific like

body #page{background:transparent}


Share this post


Link to post
Share on other sites

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


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites

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;
	}


Share this post


Link to post
Share on other sites

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 {}`


Share this post


Link to post
Share on other sites

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


Share this post


Link to post
Share on other sites

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;
	}


Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0