• 0
Sign in to follow this  
Followers 0

Blog Background Image

Question

Posted · Report post

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

21 answers to this question

  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No. Just made custom pages from php.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Posted · Report post

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

Posted · Report post

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

Posted · Report post

Add this first to see how it works:

#page {background: transparent;}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

thanks catrina, no changes with this either.. thanks

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Posted · Report post

#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
  • 0

Posted · Report post

You could also try being more specific like

body #page{background:transparent}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Posted · Report post

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

Posted · Report post

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

Posted · Report post

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