Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    Senior Member
    Join Date
    Aug 2003
    Posts
    194
    Member #
    2782
    Though I am getting a lot more exposure to the CSS realm, I still like to consider myself a noob - so forgive me if this question is elementary for some of you.

    I have a content area where I would like a background image (a gradient, to be specific) to appear repeating at the bottom. The image is a height of 100px by a width of 780px. How do I do this?

    Currently, this is how the #content looks on my stylesheet:
    Code:
    #content { color:#666666; margin:0 auto; padding:0; width:780px;}
    Thanks in advance.

  2.  

  3. #2
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Well normally you would just use the background-repeat:repeat-y; so it repeats on the vertical axis. But you threw me when you said you wanted it to repeat at the bottom. Not sure exactly what you mean,

  4. #3
    Senior Member
    Join Date
    Aug 2003
    Posts
    194
    Member #
    2782
    Basically I want the gradient, which is a light gray at the bottom moving up to white, to appear at the bottom of the content div. The header div, which is above the content, has a gradient in the reverse direction, so with the combination of the two, it will look as if the content area is enclosed in a gradient. I figured at best I could do this with a background that is positioned at the bottom of the area.

    EDIT: I attached a sample for you to see.
    Attached Images Attached Images

  5. #4
    Junior Member
    Join Date
    Jan 2010
    Posts
    11
    Member #
    20764
    Why don't you add another div just below the content div, make the height of that div equal to the height of your gradient, and then have it repeat in the x direction. Then the gradient will indeed appear below your content..

    If that makes sense..

    Denno

  6. #5
    Senior Member
    Join Date
    Aug 2003
    Posts
    194
    Member #
    2782
    That probably sounds like the easiest solution. Thanks Denno!

  7. #6
    Junior Member
    Join Date
    Jan 2010
    Posts
    11
    Member #
    20764
    Happy to have helped .

    Denno

  8. #7
    Senior Member
    Join Date
    Dec 2009
    Location
    Chicago, IL
    Posts
    114
    Member #
    20579
    Liked
    2 times
    or you could simply do:

    Code:
    #content { color:#666666; margin:0 auto; padding:0 0 100px 0; width:780px; background: #ffffff url(path/to/image.jpg) left bottom repeat-x; }
    do you see what I did there? add padding to the bottom of the content area that is equal or greater than the height of the gradient, and the gradient will appear in that padded area since it's positioned to the bottom. This will also make it so that you are excluding unnecessary markup.

  9. #8
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    omg.

    background: #ffffff url(whatever.ext) bottom repeat-x;

    this is the right and easy way. css2 accounts for bg positions and all current browsers support it, even IE7.

    while($get_it !== true){ continue; }


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:04 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com