SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to i make a background image auto adjust?

    I was wondering if there was a way to make a background image auto adjust? So when people adjust the browser size my background fade image adjusts with it, so it won't look like an empty space to the right (as shown in screenshot) if the browser is made larger? -ThanksScreen shot 2011-12-26 at 9.01.37 PM.png

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    It'd be good if we could see the site you're testing this on as it's a bit difficult to give answers to problems when we have no information on how you've set up the markup and CSS.

    Anyway, if I'm to assume that you want the gradient to expand horizontally at the bottom of every HTML document, then you'd do something like this:

    Code CSS:
    body {
      background: #fff url(images/bottomgradient.png) repeat-x bottom;
    }

    If you contain your content inside elements that have a width other than 100% of the viewport, then the simplest solution is to have your background image set on the body itself.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The site is not live yet, so i can't point you to a link.
    Yes, i want the gradient to expand horizontally at the bottom of every HTML document. But what you suggested did not work for some reason.

  4. #4
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    This is standard code that works unless there's something wrong with your code. We need to see code in order to help you, so please post the code you have.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh man. Okay, but it's really sloppy (so far).


    /*
    CSS for New SilverPianoStudio site
    */

    body {
    width: 900px;
    margin: auto;

    }

    p {
    font-weight: bold;
    color: #453C34;
    font-family: Constantia, Times, Georgia;
    }

    h2 {
    color: #5C0C0C;
    font-family: Georgia, Times;
    }

    /* MENU */
    #navmenu {
    height: 50px;
    width: 960px;
    }

    #navmenu li {
    display: inline;
    float: left 100px;
    }

    /*#navmenu li a {
    font-family: Georgia, Palatino, 'Palatino Linotype', Times;
    text-transform: uppercase;
    color: #303030;
    font-size: 14px;
    text-decoration: none;
    text-shadow: 1px 1px 0px #634747;
    background: none;
    }

    #navmenu li {
    display: inline;
    float: right;
    margin: 0 0 15px 0;
    padding: 0 15px 0 15px;
    padding-bottom: 12px;
    border-left: 1px solid white;
    border-right: 1px solid #D9D9D9;
    }
    */
    #navmenu li a {
    border-right: 1px solid #D9D9D9;
    padding: 5px 15px 14px 15px;
    text-transform: uppercase;
    font-family: Times New Roman, Georgia, Palatino, Times;
    color: #3d3f3c;
    font-size: 22px;
    font-weight: bold;
    font-style: none;
    text-decoration: none;
    text-shadow: 1px 1px 0px #FFFFFF;
    background-image: url(images/gradient.png);
    background-position: 0px -100px;
    border-radius: 8px;
    }

    #navmenu li a:hover {
    color:#5C0C0C;
    text-decoration: none;
    font-size: 22.5px;
    background-image: url(images/gradientu.png);
    background-position: 0px -160px;
    border-radius: 8px;
    }


    /* ADJUSTMENTS */


    .spslogo {
    display: block;
    margin: auto;
    }

    #navad {
    position: absolute;
    top: 100px;
    left: 155px;
    }

    #iam {
    float: right;
    position: absolute;
    right: 470px;
    top: 150px;
    margin: auto;
    }

    #wad {
    position: absolute;
    top: 330px;
    width: 880px;
    }

    #adjust {
    position: absolute;
    top: 600px;
    }

    #vertfade {
    background: #fff url(images/gradient.png) repeat-x bottom;
    margin: ;
    padding: 160px 1187px 140px 25px;
    position: absolute;
    top: 600px;
    left: 1px;
    }


    I changed that image i was talking about to the #vertfade instead of the "body" (like mentioned earlier) because when i put it in the "body" element it puts it on the top, and no matter what i try it will not go to the bottom.

    But i still have the same problem.

  6. #6
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Oh dear... I think you'll really need to start from scratch. This CSS is not workable in any which way.

    Firstly, why have you set a fixed width on the body? The bg image cannot stretch if you set a width limit to the body. Also, why are you setting almost everything with position:absolute? Why such monstrous padding on #vertfade?

    You really need to fix your CSS before anything can work. It'd be good if you read up on floats and how to create a solid layout before going any further.

    Every CSS rule I see here needs to be changed into proper rules.
    Maleika E. A. | Rockatee | Twitter | Dribbble




Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •