Jump to content


Photo

Blog Background Image


  • Please log in to reply
21 replies to this topic

#1 david_hartman

david_hartman

    Advanced Member

  • Members
  • PipPipPip
  • 94 posts

Posted 18 March 2011 - 03:04 PM

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

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 18 March 2011 - 05:23 PM

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

#3 david_hartman

david_hartman

    Advanced Member

  • Members
  • PipPipPip
  • 94 posts

Posted 18 March 2011 - 05:42 PM

No. Just made custom pages from php.

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 18 March 2011 - 06:04 PM

 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.

#5 david_hartman

david_hartman

    Advanced Member

  • Members
  • PipPipPip
  • 94 posts

Posted 18 March 2011 - 06:29 PM

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

#6 kastelic

kastelic

    Advocate

  • Members

  • 3081 posts
  • Country: Country Flag

Posted 18 March 2011 - 09:00 PM

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.

#7 david_hartman

david_hartman

    Advanced Member

  • Members
  • PipPipPip
  • 94 posts

Posted 19 March 2011 - 05:26 PM

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

#8 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 19 March 2011 - 05:36 PM

Add this first to see how it works:
 #page {background: transparent;}


#9 david_hartman

david_hartman

    Advanced Member

  • Members
  • PipPipPip
  • 94 posts

Posted 19 March 2011 - 05:55 PM

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!

#10 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 19 March 2011 - 06:11 PM

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


#11 david_hartman

david_hartman

    Advanced Member

  • Members
  • PipPipPip
  • 94 posts

Posted 19 March 2011 - 06:30 PM

thanks catrina, no changes with this either.. thanks

#12 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 19 March 2011 - 06:39 PM

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

#13 david_hartman

david_hartman

    Advanced Member

  • Members
  • PipPipPip
  • 94 posts

Posted 19 March 2011 - 06:51 PM

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.

#14 kastelic

kastelic

    Advocate

  • Members

  • 3081 posts
  • Country: Country Flag

Posted 19 March 2011 - 09:26 PM

 #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

#15 kastelic

kastelic

    Advocate

  • Members

  • 3081 posts
  • Country: Country Flag

Posted 19 March 2011 - 09:49 PM

You could also try being more specific like
 body #page{background:transparent}


#16 david_hartman

david_hartman

    Advanced Member

  • Members
  • PipPipPip
  • 94 posts

Posted 20 March 2011 - 03:15 AM

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

#17 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 20 March 2011 - 04:49 PM

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

#18 david_hartman

david_hartman

    Advanced Member

  • Members
  • PipPipPip
  • 94 posts

Posted 21 March 2011 - 12:14 AM

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


#19 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts
  • Country: Country Flag

Posted 21 March 2011 - 08:22 PM

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

#20 david_hartman

david_hartman

    Advanced Member

  • Members
  • PipPipPip
  • 94 posts

Posted 22 March 2011 - 10:43 PM

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