Jump to content


Photo
- - - - -

background image


This topic has been archived. This means that you cannot reply to this topic.
30 replies to this topic

#1 lmatanich

lmatanich

    Advanced Member

  • Members
  • PipPipPip
  • 65 posts

Posted 09 December 2010 - 09:13 PM

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

#2 bryan-hadaway

bryan-hadaway

    Advocate

  • Members
  • PipPipPipPipPip
  • 3697 posts

Posted 10 December 2010 - 02:18 AM

- 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

#3 lmatanich

lmatanich

    Advanced Member

  • Members
  • PipPipPip
  • 65 posts

Posted 10 December 2010 - 03:14 AM

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

#4 bryan-hadaway

bryan-hadaway

    Advocate

  • Members
  • PipPipPipPipPip
  • 3697 posts

Posted 10 December 2010 - 03:20 AM

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

#5 lmatanich

lmatanich

    Advanced Member

  • Members
  • PipPipPip
  • 65 posts

Posted 10 December 2010 - 03:53 AM

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"

#6 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts

Posted 10 December 2010 - 06:20 PM

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

#7 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 10 December 2010 - 06:23 PM

Hello,

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

Please Login or Register to see this Hidden Content



#8 lmatanich

lmatanich

    Advanced Member

  • Members
  • PipPipPip
  • 65 posts

Posted 10 December 2010 - 07:35 PM

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.

#9 frodem

frodem

    Member

  • Members
  • PipPip
  • 12 posts

Posted 11 December 2010 - 08:35 AM

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

#10 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 11 December 2010 - 05:39 PM

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



#11 gspage6301

gspage6301

    Member

  • Members
  • PipPip
  • 22 posts

Posted 15 December 2010 - 02:48 PM

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

#12 Kate

Kate

    Advocate

  • Members
  • 3039 posts

Posted 15 December 2010 - 02:51 PM

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

#13 gspage6301

gspage6301

    Member

  • Members
  • PipPip
  • 22 posts

Posted 15 December 2010 - 02:53 PM

sure.

Please Login or Register to see this Hidden Content



#14 Kate

Kate

    Advocate

  • Members
  • 3039 posts

Posted 15 December 2010 - 03:30 PM

@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



#15 gspage6301

gspage6301

    Member

  • Members
  • PipPip
  • 22 posts

Posted 15 December 2010 - 03:45 PM

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

#16 gavin_launchpad

gavin_launchpad

    Advocate

  • Members

  • 464 posts

Posted 15 December 2010 - 04:36 PM

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

#17 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts

Posted 15 December 2010 - 06:37 PM

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.

#18 quigongren

quigongren

    Newbie

  • Members
  • Pip
  • 5 posts

Posted 16 December 2010 - 05:12 AM

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.

#19 bryan-hadaway

bryan-hadaway

    Advocate

  • Members
  • PipPipPipPipPip
  • 3697 posts

Posted 16 December 2010 - 10:43 AM

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

#20 quigongren

quigongren

    Newbie

  • Members
  • Pip
  • 5 posts

Posted 16 December 2010 - 03:28 PM

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