WordPress.org

1. turiyamoore
   Member
   Posted 1 year ago #
   

   I'm trying to get an image to show as background for all pages and posts site-wide. It needs to start on one side and repeat across the content area and align at top.

   I tried this:
   #wrapper {
   background-image: url(/wp-content/uploads/2012/03/slicebg.jpg);
   background-repeat:repeat-y;
   margin-top: 20px;
   padding: 0 20px;
   }

   -with no success. Thanks ahead of time!

2. Tara
   Member
   Posted 1 year ago #
   

   try uploading the image into the theme's image folder and change the url path accordingly.

3. Rev. Voodoo
   Volunteer Moderator
   Posted 1 year ago #
   

   yup, @t-p suggestion is the right one.

   Your paths from your style.css are relative to your theme folder. I suppose you could also use the full URL in that css

4. turiyamoore
   Member
   Posted 1 year ago #
   

   Thanks, I tried it like this:

   #wrapper {
   background-image: url(http://www.teachingsofyogananda.com/wp-content/uploads/2012/03/slicebg.jpg);
   background-repeat:repeat-y;
   margin-top: 20px;
   padding: 0 20px;
   }

   And, it still doesn't show up.

   I'm pretty new at this, so I might be missing something.
   Any ideas?
   Thanks!

5. Tara
   Member
   Posted 1 year ago #
   

   -have you cleared brower cache? If not, try clearing cache in your browser before viewing the updated page. To clear cache in your browser, press clrl+f5 keys simultaneously. Also, try different computer/different browser.

   -If that does not work, try this:
   #wrapper {
   background: url(http://www.teachingsofyogananda.com/wp-content/uploads/2012/03/slicebg.jpg) top left repeat-x;
   margin-top: 20px;
   padding: 0 20px;
   }

6. turiyamoore
   Member
   Posted 1 year ago #
   

   this got me closer. But it's too low on the page and I need to carry the darker color beneath it continuously. The gradient needs to fade down from beneath my header image and the yellow needs to continue downward.

   #main {
   clear: both;
   overflow: hidden;
   padding: 40px 0 0 0;
   background-image:url(/wp-content/uploads/2012/03/slicebg.jpg);
   }

   Is this even possible?
   site url; http://www.teachingsofyogananda.com/

7. turiyamoore
   Member
   Posted 1 year ago #
   

   Ok I'm really close.

   #main {
   clear: both;
   overflow: hidden;
   padding: 40px 0 0 0;
   background-color: #FFE0A3;
   background-image: url(/wp-content/uploads/2012/03/slicebg.jpg);
   background-repeat:repeat-x;
   
   }

   This is working. i have the image and below it the color will fill the rest of page. Is there a way to make the image show in a higher position? I don't understand why there is so much white space above the image. Image is a gradient but it just becomes white at the very top section.

   Thanks!
   http://www.teachingsofyogananda.com/

Topic Closed

This topic has been closed to new replies.