• 0
Sign in to follow this  
Followers 0

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

Question

23 answers to this question

  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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-america.com/wordpress/wp-content/uploads/2011/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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

simple mama an error on my part. the code used was: body { background-image: url(http://www.ronaldnolette.com/wp-content/uploads/2011/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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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 ;)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You need to take the

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I don't have the

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hey Ron, I saw the same thing in the Custom code that Jimmy mentioned. In fact, I just checked and still see it. Are you able to post a screenshot of that Custom Code page, please? The other option is, if you have Base activated, to post that in base.css.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Kate, First of all, I appreciate you taking the time to analyse my problem. Secondly, although I know how to make a screen shot of the custom code area, I do not know how to incorporate it into these comments. Clue me in, if you will. Ron

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Kate, I made a screen shot of the custom code area and uploaded it. I stitched 2 screenshots together so you could see the total code in that area. Here is the address of the screen shoot: http://www.ronaldnolette.com/custom_code.jpg Ron

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

When I browsed to your site, I'm getting the following errors in the header area. Warning: file_get_contents() [function.file-get-contents]: URL file-access is disabled in the server configuration in /homepages/17/d243443379/htdocs/wp-content/plugins/statsurfer/append.php on line 314 Warning: file_get_contents(http://api.hostip.info/country.php?ip=67.85.47.223) [function.file-get-contents]: failed to open stream: no suitable wrapper could be found in /homepages/17/d243443379/htdocs/wp-content/plugins/statsurfer/append.php on line 314 I'll bump this up for additional help on the background issue.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I have never seen that error but it doesn't seem like it should have anything to do with my present problem. Does it? Ron

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Ron, your code is correct but is not being implemented. You can see in this screenshot what is actually being sent to the browser regarding your custom code: W5mwG.jpg You can see the bg image working because i added your code into the inspector. The errors that rangelone mentioned certainly could affect your problem, i would deactivate all plugins. Beyond that, check all your custom code and html code for each page for markup errors like unclosed tags.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I see your screen shot. When you added your code into the inspector, it wasn't permanent? I do not know CSS much and I know firebug even less. In any event, if I got to the same place you were in the screenshot, would I be able to fix it permanently? Secondly, how do I get to that spot using firebug? extremely frustrated, Ron

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hey Ron, I also tried what Jimmy mentioned and it worked for me. However, these are just local changes we're making... they're not actually being changed on your site. I can see from looking at the site that the code you're placing in Custom CSS isn't even being put in. It's still just that "

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Kate, Yes, I tried all of those things. I don't understand why just the