WordPress.org

1. jvaidya
   Member
   Posted 2 years ago #

   I'm sure this may seem like a stupid question but, once I've added an image as my background, how do I extend the image so that that the color I choose will continue on for as long as the posts can be scrolled down?

   I appreciate any help you can give me and I thank you in advance.

2. esmi
   Theme Diva & Forum Moderator
   Posted 2 years ago #

   Just use background:url(path_to/image.jpg);

   The background should tile automatically.

3. jvaidya
   Member
   Posted 2 years ago #

   esmi, thanks for the help. I have a followup question, If I don't want the image to tile and would rather have the rest of the screen scroll down to a nice blue color matching the background, how could I accomplish this?

4. alchymyth
   The Sweeper
   Posted 2 years ago #

   this can only be a general answer without knowing your blog url.
   if your first background picture is NOT in the body {...} style, then you have the possibility to make yourself an image with the color grading you want -in photoshop or so- ( just a narrow vertical strip image - say named 'bg_gradient.jpg' - higher than your existing background image, but only a few pixel wide) and include that as background for the body (in the style.css):
   

   body
   {
   background: url(path_to/bg_gradient.jpg) top repeat-x
   }

   'path_to' is the file path to your images in the theme directory.

   oh, and to stop your background image from tiling, the declaration in the style sheet should be:
   background: url(path_to/image.jpg) top center no-repeat;'

   for more help, please post the link to your blog. ;-)

5. S.K
   Member
   Posted 2 years ago #

   Use a program like Colorpix to find out the color of the image at the bottom extremity. Let it be #nnnnnn.

   Add this color to the background declaration in the css file thus:

   body
   {
   background: #nnnnnn url(path_to/bg-image.jpg) no-repeat fixed top;
   }

   HTH

   S.K

6. jvaidya
   Member
   Posted 2 years ago #

   Thanks guys! I will test this out and get back to you asap. I think the problem was that I was editing a pre-existing theme and at the end the image was specified not to repeat.

7. jvaidya
   Member
   Posted 2 years ago #

   Kichu,

   Works like a charm. I used:

   {
   background: #nnnnnn url(path_to/bg-image.jpg) no-repeat fixed top;
   }

   and was able to resolve the problem very quickly. Thank you to everyone who helped.

Topic Closed

This topic has been closed to new replies.