WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Background Image Repeat Down (3 posts)

  1. alexanderblake
    Member
    Posted 3 years ago #

    http://www.appliedhappiness.org

    I want to create a new BG image that makes the blue gradient out to white from the middle. It will look like brush strokes from behind the centered white content box. Creating the image isn't the problem...

    I want to make sure it will repeat DOWN as far as the page goes. The image will be made 1600 x 1200 (to fit even the biggest monitors) with a pretty mild gradient. This will mean that the small screens will see mostly blue that fades to white, and large displays will see the fade almost immediately (with more white space at the end).

    What do I put in the code to repeat down and not across... and center the image horizontally?

    Thank you very, very much in advance!

    Blake

  2. alexanderblake
    Member
    Posted 3 years ago #

    I made the image, and it repeats vertically (awesome), but it changed the relative position of the content box itself, which changed the look of some of my text and grey box borders. Any ideas?

    Original:
    body {
    font-family: Helvetica, sans-serif;
    background-color: #006699;
    color: #333333;
    margin: 0;
    padding: 0;
    text-align: center;
    }

    Experimented BG code:

    body {
    background-image:url('http://www.appliedhappiness.org/home/wp-content/themes/artsemerging/artsemerging/images/ah-bg-image.jpg');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
    }

    Any ideas?

  3. alexanderblake
    Member
    Posted 3 years ago #

    Never mind. Apparently I just needed to play with it more. I really should stop asking question while trying to figure it out at the same time.

    Just in case anyone was interested... for my artsemerging theme, I had to:

    body {
    font-family: Helvetica, sans-serif;
    background-image:url('http://www.appliedhappiness.org/home/wp-content/themes/artsemerging/artsemerging/images/ah-bg-image.jpg');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;;
    color: #333333;
    margin: 0;
    padding: 0;
    text-align: center;
    }

    Did the trick. I'm not sure I'm satisfied with the current image, but that's my problem.

    Thanks for checkin' in.

Topic Closed

This topic has been closed to new replies.

About this Topic