30 replies to this topic

[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.

[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

[lmatanich]

Bryan - I did what you advised and it isn't working. I tried putting it in custom code > custom css and also tried adding to base.css Neither worked. Here's what I added: body{ background: url("http://redbarnstudios.net/wordpress/wp-content/uploads/2010/12/kraft1.jpg") }

[bryan-hadaway]

Please Login or Register to see this Hidden Content

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

[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"

[cmunns]

This alternatively would work. `body.fixed_width {background:url("http://redbarnstudios.net/wordpress/wp-content/uploads/2010/12/kraft1.jpg") repeat scroll 0 0 transparent!important;}`

[catrina]

Hello,

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

Please Login or Register to see this Hidden Content

[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.

[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

[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:

Please Login or Register to see this Hidden Content

[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. ??

[Kate]

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

[gspage6301]

sure.

Please Login or Register to see this Hidden Content

[Kate]

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

Please Login or Register to see this Hidden Content

[gspage6301]

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

[gavin_launchpad]

Hi i tried the code Adam suggested and it doesn't seem to work. could you have a look here and let me know what i've done wrong?

Please Login or Register to see this Hidden Content

cheers

[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") 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") 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") 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.

[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.

[bryan-hadaway]

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

[quigongren]

Bryan, Thanks, right, I guess that would make sense The WordPress site has been setup at

Please Login or Register to see this Hidden Content

Thanks, Carl