Background Image Repeat Down

  • Resolved Blake

    (@alexanderblake)


    14 years, 5 months ago

    https://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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter Blake

    (@alexanderblake)

    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(‘https://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?

    Thread Starter Blake

    (@alexanderblake)

    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(‘https://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.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Background Image Repeat Down’ is closed to new replies.