Jump to content


Photo

How do I add a background picture that's fixed?


  • Please log in to reply
23 replies to this topic

#1 ronolette

ronolette

    Member

  • Members
  • PipPip
  • 11 posts

Posted 11 August 2011 - 07:45 PM

This is the custom code I'm using: body{ background-image: url("http://www.nostalgic-america.com/wordpress/wp-content/uploads/2011/08/cr9b.jpg"); background-repeat: no repeat; background-attachment: fixed; } I have selected "fixed width design framework". In the former canvas area (the background), all I get is black. What am I doing wrong

#2 kastelic

kastelic

    Advocate

  • Members

  • 3081 posts
  • Country: Country Flag

Posted 11 August 2011 - 09:54 PM

A few syntax errors. Try:

 
	body{
	background-image: url("http://www.nostalgic-america.com/wordpress/wp-content/uploads/2011/08/cr9b.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	}


#3 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 14 August 2011 - 01:35 AM

Hi ronolette. I have a fixed background on my personal blog and here is what I did. I selected "fixed-width design framework" (which you did) and then for the first 3 colors (body, page, page canvas background), I left them blank. Then I added this to the custom CSS:

 
	body {
		background-image: url(http://www.nostalgic-america.com/wordpress/wp-content/uploads/2011/08/cr9b.jpg);
		background-repeat: no-repeat;
		background-attachment: fixed;
	}
	body #page{background:transparent}

Note the lack of quotes around the background url also.

If you also want the background image to go into the header (to the top of the page) then add the following CSS also:

 
	#header {
		background: none repeat scroll 0 0 transparent;
	}

As a side note, your background image is 1077kb. That is quite large for a background so you should try to optimize it using Photoshop or similar.

Hope that helps!

#4 ronolette

ronolette

    Member

  • Members
  • PipPip
  • 11 posts

Posted 15 August 2011 - 02:29 AM

Thanks for the try, but it still didn't work

#5 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 15 August 2011 - 02:31 AM

What part of it exactly isn't working? Can you provide a link to your blog? Also, please provide what settings you currently have in the custom CSS.

#6 ronolette

ronolette

    Member

  • Members
  • PipPip
  • 11 posts

Posted 15 August 2011 - 02:52 AM

I SENT THIS MESSAGE A MOMENT AGO BUT APPARENTLY DIDN'T POST. Address is www.ronaldnolette.com Code is exactly what you suggested before: body { background-image: url(http://www.nostalgic...11/08/cr9bb.jpg); background-repeat: no-repeat; background-attachment: fixed; } body #page{background:transparent} #header { background: none repeat scroll 0 0 transparent; } I made the picture smaller; it is only 396K Thanks for your help Ron

#7 ronolette

ronolette

    Member

  • Members
  • PipPip
  • 11 posts

Posted 15 August 2011 - 02:59 AM

simple mama an error on my part. the code used was: body { background-image: url(http://www.ronaldnol...11/08/cr9bb.jpg); background-repeat: no-repeat; background-attachment: fixed; } body #page{background:transparent} #header { background: none repeat scroll 0 0 transparent; } everything else I wrote was correct

#8 Kate

Kate

    Advocate

  • Members
  • 3039 posts

Posted 15 August 2011 - 01:35 PM

Hello,
I checked your site and I'm not seeing that CSS code. May I ask where you added it? In addition, a suggestion: For this line of code:
 #header {
	background: none repeat scroll 0 0 transparent;
	}

try this:

 #header {background-color: transparent !important;}

In addition: you can use Settings->Design Control to add your background image ;)

#9 ronolette

ronolette

    Member

  • Members
  • PipPip
  • 11 posts

Posted 15 August 2011 - 05:13 PM

Kate, I put it in the area of "Platform Pro Theme Options", the Custom Code section. Where else would I add it? Ron

#10 kastelic

kastelic

    Advocate

  • Members

  • 3081 posts
  • Country: Country Flag

Posted 15 August 2011 - 09:36 PM

You need to take the