WordPress.org

Forums

Extending your background image (7 posts)

  1. jvaidya
    Member
    Posted 5 years ago #

    I'm sure this may seem like a stupid question but, once I've added an image as my background, how do I extend the image so that that the color I choose will continue on for as long as the posts can be scrolled down?

    I appreciate any help you can give me and I thank you in advance.

  2. esmi
    Forum Moderator
    Posted 5 years ago #

    Just use background:url(path_to/image.jpg);

    The background should tile automatically.

  3. jvaidya
    Member
    Posted 5 years ago #

    esmi, thanks for the help. I have a followup question, If I don't want the image to tile and would rather have the rest of the screen scroll down to a nice blue color matching the background, how could I accomplish this?

  4. this can only be a general answer without knowing your blog url.
    if your first background picture is NOT in the body {...} style, then you have the possibility to make yourself an image with the color grading you want -in photoshop or so- ( just a narrow vertical strip image - say named 'bg_gradient.jpg' - higher than your existing background image, but only a few pixel wide) and include that as background for the body (in the style.css):

    body
    {
    background: url(path_to/bg_gradient.jpg) top repeat-x
    }

    'path_to' is the file path to your images in the theme directory.

    oh, and to stop your background image from tiling, the declaration in the style sheet should be:
    background: url(path_to/image.jpg) top center no-repeat;'

    for more help, please post the link to your blog. ;-)

  5. S.K
    Member
    Posted 5 years ago #

    Use a program like Colorpix to find out the color of the image at the bottom extremity. Let it be #nnnnnn.

    Add this color to the background declaration in the css file thus:

    body
    {
    background: #nnnnnn url(path_to/bg-image.jpg) no-repeat fixed top;
    }

    HTH

    S.K

  6. jvaidya
    Member
    Posted 5 years ago #

    Thanks guys! I will test this out and get back to you asap. I think the problem was that I was editing a pre-existing theme and at the end the image was specified not to repeat.

  7. jvaidya
    Member
    Posted 5 years ago #

    Kichu,

    Works like a charm. I used:

    {
    background: #nnnnnn url(path_to/bg-image.jpg) no-repeat fixed top;
    }

    and was able to resolve the problem very quickly. Thank you to everyone who helped.

Topic Closed

This topic has been closed to new replies.

About this Topic