WordPress.com

1. iamjessenelson
   Member
   Dec 13, 2011, 7:18 PM

   I have not had any luck finding answers in the forums in regards to my problem.

   I am trying to add a full screen background image that automatically resizes to fit the window.

   I've uploaded an image to my Library and used the url in the CSS Editor with the following code:

   #img.source-image {
   background-image: url("http://iamjessenelson.files.wordpress.com/2011/12/thejessenelson.jpg");
   width:100%;
   position:absolute;
   top:0;
   left:0;
   }

   However, this code does not even produce a background image.

   I have purchased the Custom Design Upgrade but am confused and having difficulty coding without seeing the actual code that the site is currently using. It's just a blank text box that I add random code to.

   Any help is appreciated.

   The blog I need help with is iamjessenelson.wordpress.com.

2. thesacredpath
   Member
   Dec 13, 2011, 10:12 PM

   First, your image is b0rked. You need to open it in an image editing program, change it to 72dpi, not 7dpi, then you need to resize the image to a width of perhaps 2000dpi, and then if you are using photoshop, save it for web and devices at the lowest JPG quality setting (low). That will get the image down close to a reasonable file size that will load. Right now it is over 1.8MB and choked my wireless internet connection.

   To do what you want to do would require javascript, or the ability to edit "hack" the underlying theme files, and we can't do javascript or hack the theme files here at wordpress.com.

   You can add a background image in body, but it will not scale.

   body {
   background: url("IMAGE URL") no-repeat scroll center top transparent;
   }

   Lastly, you are going to have a very difficult time finding a text color that will have contrast with all the different colors and values in that image, which means you will likely have to put a colored background behind in #page, which will hide the bulk of your image.

3. iamjessenelson
   Member
   Dec 15, 2011, 3:40 AM

   Thanks for your help! To be honest I didn't even think of the file size (I'm used to uploading full-res photos to Flickr haha).

   That was just a test image. I'll be shooting a proper photo in the next few days to use as the background (and it's going to be greyscale).

   Cheers!

4. thesacredpath
   Member
   Dec 15, 2011, 7:18 AM

   You are welcome.

Topic Closed

This topic has been closed to new replies.