• turiyamoore

    (@turiyamoore)


    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!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator t-p

    (@t-p)

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

    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

    Thread Starter turiyamoore

    (@turiyamoore)

    Thanks, I tried it like this:

    #wrapper {
    background-image: url(https://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!

    Moderator t-p

    (@t-p)

    -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(https://www.teachingsofyogananda.com/wp-content/uploads/2012/03/slicebg.jpg) top left repeat-x;
    margin-top: 20px;
    padding: 0 20px;
    }

    Thread Starter turiyamoore

    (@turiyamoore)

    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; https://www.teachingsofyogananda.com/

    Thread Starter turiyamoore

    (@turiyamoore)

    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!
    https://www.teachingsofyogananda.com/

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘content area backround image twenty ten theme’ is closed to new replies.