Jump to content
Sign in to follow this  
lmatanich

background image

Recommended Posts

lmatanich    0
lmatanich

*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
bryan-hadaway    3
bryan-hadaway

- 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
bryan-hadaway    3
bryan-hadaway
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
lmatanich    0
lmatanich

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

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


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

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

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

Laurie, you can add the CSS to either custom CSS or base.css (but sometimes, the code only works when placed in the base.css). Frode, if you do not want the background image to be repeated, add this to the CSS:

background-repeat: no-repeat;


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

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
Kate    3
Kate

@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
gspage6301    0
gspage6301

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
cmunns    16
cmunns

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

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
bryan-hadaway    3
bryan-hadaway

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

Share this post


Link to post
Share on other sites
Kate    3
Kate

@Carl So, would you prefer to change the footer background color or the text color?

Share this post


Link to post
Share on other sites
quigongren    0
quigongren

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
bryan-hadaway    3
bryan-hadaway

`#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
annabelr    0
annabelr

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
bryan-hadaway    3
bryan-hadaway

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

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  

×