Archived

This topic is now archived and is closed to further replies.

  • 0

background image

Question

Posted · Report post

*beginner* I'm using platformbase and trying to add a background image to my site. I would like it to only be viewable in the margins of the page. Can you tell me where / what folder I should put the image and also what the code is I should add to base file? I've tried several and none seem to be working. I also searched all of the old posts on this and couldn't figure it out. Thanks.

Share this post


Link to post
Share on other sites

30 answers to this question

Posted · Report post

Honestly, I'd like to be able to try both to see visually what happens. I do like the way whitehouse.gov has their footer text configured (http://www.whitehouse.gov/)and want to see if that is something I can emulate. I plan on setting up many WP Blogs/Sites using the Pageline Platform so I'm sort of learning by trial and error I suppose. 1) I kind of expected the footer background not to change color when I changed the CSS code under custom code to use a repeating background graphic, so I'm not sure why that happens entirely. The page is configured for fixed-width layout. I assumed the change I was making was specific to the main page background and not elements such as the header, footer, body content area, sidebars, etc. This is mostly true in this case as I have found except where the footer background color is concerned. Is my CSS code lacking or incorrect? 2) I would also like to understand how to change the footer text color/format for future reference though. I think this is important because, where in a case such as this, it may turn out that I do want the effect I am seeing with my custom CSS (white from background graphic replaced footer background color)and simply want to change the footer text color/format to better conform. I have not figured out how to selectively modify footer background color or text format yet though. Carl

Share this post


Link to post
Share on other sites

Posted · Report post

`#footcols{background:#000}` Okay, so that's how it basically looked originally. We might try something like this instead: `#footcols, #footcols a{color:#aaa; text-shadow:none}` Thanks, Bryan

Share this post


Link to post
Share on other sites

Posted · Report post

- First upload an image via the Media tab in your WordPress admin. - Copy that image URL - `body{background:url(IMAGEURLHERE)}` Add that to Custom Code > Custom CSS - You'll likely desire more adjusting so give us a link at that point and we'll go from there Thanks, Bryan

Share this post


Link to post
Share on other sites

Posted · Report post

Hey everyone, I tried the various methods explained in this thread to change the background of the page (platform pro, full width mode) : copying the following in the base.css file, in the custom CSS field in the admin panel... But it won't work : - ( CSS

body.#page {
	    background: url("http://lamaisondenosreves.fr/rnhp2010/wp-content/uploads/2010/12/bg.jpg") repeat scroll left top 0 0 #FFF;
	}

Link : http://lamaisondenosreves.fr/rnhp2010/ The changes aren't taken into account... Conflicting CSS? Thx for any answers / solutions

Share this post


Link to post
Share on other sites

Posted · Report post

It should be `body #page` and not `body.#page` Thanks, Bryan

Share this post


Link to post
Share on other sites

Posted · Report post

http://redbarnstudios.net/wordpress/ Make sure to drop it in Custom Code > Custom CSS again and of course save. Even if it doesn't show up, please leave the code in and update me so I can take a look. Thanks, Bryan

Share this post


Link to post
Share on other sites

Posted · Report post

Thx Bryan Alas... Not much of a change

Share this post


Link to post
Share on other sites

Posted · Report post

Ok, I think it was left it in there even after I sent that message. It's in "Custom CSS", right below the header "CSS Rules"

Share this post


Link to post
Share on other sites

Posted · Report post

Hey Annabel - Use this:

body #page {background: url("http://lamaisondenosreves.fr/rnhp2010/wp-content/uploads/2010/12/bg.jpg");}

Nice background, btw ;)

Share this post


Link to post
Share on other sites

Posted · Report post

Hi all, this is totally failing for me. I have tried everyone's suggestions, several different test image files, put the code in the custom css and the base.css. Nothing. ??

Share this post


Link to post
Share on other sites

Posted · Report post

@Guy Could you give a link to your site, please?

Share this post


Link to post
Share on other sites

Posted · Report post

Hello, Try adding this instead (to the Custom CSS box):

body{
	background-image: url("http://redbarnstudios.net/wordpress/wp-content/uploads/2010/12/kraft1.jpg")}

Share this post


Link to post
Share on other sites

Posted · Report post

@Guy You want that ocean image repeating across the entire background, correct? Try this in your custom CSS:

#page{background-color:transparent;}

Share this post


Link to post
Share on other sites

Posted · Report post

Thx Kate! It works... but doesn't look too good Soooo : now, how do i achieve a white background for header, content area, and possibly sidebars. I'll have a look in other threads since i guess it must be a FAQ... but if someone feels like answering it again, pls do ; - )

Share this post


Link to post
Share on other sites

Posted · Report post

Hmmm... I tried it in dynamic.css and it filled up the background. Is that what you wanted, or no? Try replacing the styles (for "body" and "#page") currently in base.css with these:

body {background: url("http://lamaisondenosreves.fr/rnhp2010/wp-content/uploads/2010/12/bg.jpg") !important;}
	#page, #footer{width:980px !important;margin:0 auto;background:#ffffff !important;}
	

Share this post


Link to post
Share on other sites

Posted · Report post

OK. The problem was that i was not using a fixed width layout. that fixed the problem. code works.

Share this post


Link to post
Share on other sites

Posted · Report post

Thank you, Adam. Your suggestion worked. I tried yours as well, Catrina, but I couldn't get it to work. I wish I could figure out the reason. Also, this is something that should be added to base.css and not to the custom css box, right? I just want to make future updates as hassle free as possible.

Share this post


Link to post
Share on other sites

Posted · Report post

For clarification if you're using the fixed width design mode then the correct selector would be ` body, body.fixed_width{ background:url("http://redbarnstudios.net/wordpress/wp-content/uploads/2010/12/kraft1.jpg'>http://redbarnstudios.net/wordpress/wp-content/uploads/2010/12/kraft1.jpg'>http://redbarnstudios.net/wordpress/wp-content/uploads/2010/12/kraft1.jpg'>http://redbarnstudios.net/wordpress/wp-content/uploads/2010/12/kraft1.jpg") repeat scroll 0 0 transparent!important;} ` If you're using the full-width design mode then the selector would be ` body.#page{ background:url("http://redbarnstudios.net/wordpress/wp-content/uploads/2010/12/kraft1.jpg'>http://redbarnstudios.net/wordpress/wp-content/uploads/2010/12/kraft1.jpg'>http://redbarnstudios.net/wordpress/wp-content/uploads/2010/12/kraft1.jpg'>http://redbarnstudios.net/wordpress/wp-content/uploads/2010/12/kraft1.jpg") repeat scroll 0 0 transparent!important;} ` If you don't the background to repeat then it would be something like this `body.fixed_width {background:url("http://redbarnstudios.net/wordpress/wp-content/uploads/2010/12/kraft1.jpg'>http://redbarnstudios.net/wordpress/wp-content/uploads/2010/12/kraft1.jpg'>http://redbarnstudios.net/wordpress/wp-content/uploads/2010/12/kraft1.jpg'>http://redbarnstudios.net/wordpress/wp-content/uploads/2010/12/kraft1.jpg") no-repeat scroll 0 0 transparent!important;}` (see the no-repeat in there) Of course these apply specifically to the redbarnstudios site, but you get the idea.

Share this post


Link to post
Share on other sites

Posted · Report post

All of the input here has helped me tremendously, thank you. I do have a question regarding what to do about the footer text if the background used is a gradient image ending in white at the bottom. I was successful in using the code provided as follows, under Custom Code->Custom CSS: body.fixed_width {background:url("http://technology2reality.com/images/bg_body.png") repeat-x} However, the white has caused a bit of a problem where the footer text is concerned.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi I also used Adams suggestion here, and it worked, but the background image not to be repeated? you can easily see the new image starting. Any fix? Frode

Share this post


Link to post
Share on other sites

Posted · Report post

Let's get a link Carl so we can see the issue. Thanks, Bryan

Share this post


Link to post
Share on other sites