WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Repeating background image issue (7 posts)

  1. viperousmango
    Member
    Posted 3 years ago #

    Hey guys,

    This is my first shot at transitioning an HTML/CSS template to WordPress and I'm having some trouble with a repeating background image.

    This is my blog link: Blog

    I'm not sure where in my CSS I'm screwing this up, but here are my CSS properties for the background:
    body { background: url(images/bg2.png); font-size:12px; font-family:'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; color:#000000;}

    Any help would be appreciated, thanks!

  2. Jaiganesh Mani
    Member
    Posted 3 years ago #

    viperousmango

    Your Background image height is 937px but the content in this page is more than 937px.

    Change the background image height.

    Jai

  3. viperousmango
    Member
    Posted 3 years ago #

    True, but wouldn't the length be dynamic depending on how long the post is? thus, in this case making the site longer than the background?

    How can I repeat white once the background image has run out so that it gives the illusion that the image continues?

    Would adding a repeat-x: #FFFFFF; to the body tag help in this instance? It would look like:

    body { background: url(images/bg2.png); repeat-x: #FFFFFF; font-size:12px; font-family:'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; color:#000000;}

  4. Jaiganesh Mani
    Member
    Posted 3 years ago #

    no need to add #ffffff
    this will do...
    background:url("images/bg2.png") repeat-x;
    color:#000000;
    font-family:'Lucida Grande','Lucida Sans Unicode',Tahoma,Arial,san-serif;
    font-size:12px;

    in this case the bg image show only one time and bg will be white after the bottom image.

  5. viperousmango
    Member
    Posted 3 years ago #

    Ok, i tried the above fix and uploaded the new style.css to the blog but I'm still having the same issue.

  6. Jaiganesh Mani
    Member
    Posted 3 years ago #

    I checked your CSS,

    background-repeat SHOULD BE
    background-repeat: repeat-x;
    NOT
    background-repeat: repeat;

    See your CSS and update

    body (line 14)
    {
    background-color: transparent;
    background-image: url("images/bg2.png");
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: 0% 0%;
    font-size: 12px;
    font-family: 'Lucida Grande','Lucida Sans Unicode',Tahoma,Arial,san-serif;
    }

  7. viperousmango
    Member
    Posted 3 years ago #

    Ahh, thank you!! That did the trick.

Topic Closed

This topic has been closed to new replies.

About this Topic