Repeating background image issue

  • Resolved viperousmango

    (@viperousmango)


    14 years, 4 months 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!

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

    Thread Starter viperousmango

    (@viperousmango)

    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.

    Thread Starter viperousmango

    (@viperousmango)

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

    Thread Starter viperousmango

    (@viperousmango)

    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.