Support » Themes and Templates » Repeating background image issue

  • Resolved viperousmango

    (@viperousmango)


    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!

Viewing 6 replies - 1 through 6 (of 6 total)
  • viperousmango

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

    Change the background image height.

    Jai

    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;}

    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.

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

    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;
    }

    Ahh, thank you!! That did the trick.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Repeating background image issue’ is closed to new replies.