SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast Tahoeporter's Avatar
    Join Date
    Feb 2011
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems with background gradient

    I cannot get the background gradient to work well on my site. It does not go far past the wrapper and on pages shorter than the viewport it looks wrong.

    Here is a page with the problem. http://www.dsconstructiontahoe.com/resources

    I tried putting html}height:100%;} and it put a solid line above the wrapper?
    Last edited by Black Max; Mar 30, 2011 at 21:56. Reason: edit: replaced TinyURL shortcut with actual URL

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I could not see the source of the ink you posted
    but it could be one of the following issues:

    1) you have the BG image set to repeat, instead of repeat-x
    2) you set html{height:100%;} (note you need "{" and "}" ) but not html, body{height:100%;}
    3) you didnt mat the background color to the color of the end of your gradient

  3. #3
    SitePoint Enthusiast Tahoeporter's Avatar
    Join Date
    Feb 2011
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    I could not see the source of the ink you posted
    but it could be one of the following issues:

    1) you have the BG image set to repeat, instead of repeat-x
    2) you set html{height:100%;} (note you need "{" and "}" ) but not html, body{height:100%;}
    3) you didnt mat the background color to the color of the end of your gradient
    Not sure I follow any of that. but i really appreciate the reply.

    this is the code i am using:
    Code CSS:
    body{
    background-image: -moz-linear-gradient(top, #838357 , #DCDCDC);
    background: -webkit-gradient(linear, left top, left bottom, from(
    #838357), to( #DCDCDC));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#838357 ', endColorstr='#DCDCDC');
    }

    I tried adding : body{height:100%;} but that did not help.

    thanks

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    try this:
    Code:
    <style>
    body{
    background-image: -moz-linear-gradient(top, #838357 , #DCDCDC);
    background-image: -webkit-gradient(linear, left top, left bottom, from(
    #838357), to( #DCDCDC));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#838357 ', endColorstr='#DCDCDC');
    ;
    }
    html { background-color:#DCDCDC; }
    html, body, p {  margin:0}
    
    </style>
    
    .......
    <body>
    <p>aaa</p>
    <p>aaa</p>
    <p>aaa</p>
    <p>aaa</p>
    <p>aaa</p>
    <p>aaa</p>
    <p>aaa</p>
    <p>aaa</p>
    <p>aaa</p>
    <p>aaa</p>
    <p>aaa</p>
    <p>aaa</p>
    <p>aaa</p>
    <p>aaa</p>
    <p>aaa</p>
    <p>aaa</p>
    <p>aaa</p>
    <p>aaa</p>
    <p>aaa</p>
    <p>aaa</p>
    <p>aaa</p>
    <p>aaa</p>
    <p>aaa</p>
    <p>aaa</p>
    <p>aaa</p>
    <p>aaa</p>
    <p>aaa</p>
    <p>aaa</p>
    <p>aaa</p>
    <p>aaa</p>
    <p>aaa</p>
    <p>aaa</p>
    <p>aaa</p>
    <p>aaa</p>
    </body>
    </html>
    hope that helps

  5. #5
    SitePoint Enthusiast Tahoeporter's Avatar
    Join Date
    Feb 2011
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I put this in :
    Code CSS:
    html { background-color:#DCDCDC; }
    html, body, p {  margin:0}

    and it did this to the top of my body (a grey bar)
    http://tinyurl.com/46zy9ly

    I do not understand what to do twith all the other code (<body>
    <p>aaa</p>) is that suppose to go on an individual style page for my resource page?

    I am usingWordpress.


    thanks

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I used "<p>aaa</p>" to signify content, dont worry about keeping that. What you have to understand is the method you are using to generate a gradient BY NECESSITY does the following....
    1) takes one color for the start of the gradient and another for the end .
    2) calculates the height of the element ( based on the content)
    3) creates the gradient ( color changes) to make the fill effect.

    The reason you see the "gray bar" is because of margin collapse. That is, your first element inside the element of the has a margin-top >0.




    this means is you have little content it will be BY NECESSITY a short dramatic color change, if your content is tall, it will be come a slow subtle gradient.

    instead of this:html, body, p { margin:0}
    do this:

    1)look at the source code...
    2) find the FIRST element inside the <body> with the gradient... ( it's proably an H1 or H2... just make sure it's the first element...)
    3) give THAT element a margin-top:0;
    lets say you see something like <body><h1 class="whatever otherclass">DS</h1>... What you need to do is :

    html, body{ margin:0}
    h1.whatever{margin-top:0}

    that will get rid of the gray bar.

    It's difficult to tell you exactly what needs to be done w/o seeing the actual source code.. but thats the basic concept

  7. #7
    SitePoint Enthusiast Tahoeporter's Avatar
    Join Date
    Feb 2011
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmmm.

    well on my "resources" page the first line is <h1> and i gave it a 0 margin-top and tried what you said but that did not do it.

    I suppose I will keep messing with it and maybe just try to make the page bigger.

    thanks for your help

  8. #8
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    <style>
    
    body{
    background-image: -moz-linear-gradient(top, #838357 , #DCDCDC);
    background-image: -webkit-gradient(linear, left top, left bottom, from(
    #838357), to( #DCDCDC));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#838357 ', endColorstr='#DCDCDC'); min-height:100%;
    ;
    }
    html { background-color:#DCDCDC; height:100%}
    html, body {  margin:0}
    #wrap { width:80%; margin:0 auto; padding-bottom:1em } /* this centers your content*/
    .notop{margin-top:0;}
    
    
    </style>
    
    </head>
    <body>
    <div id="wrap">
    	<h1 class="notop"> Sample Page header</h1>
         <h2> Some content </h2>
         <p> Because of the nature of your CSS3 genrated gradiesnt this is the best you can expect.  the gradient genrates fron the top of the container to the bottom (how could it do it otherwise).  Short conten will generate a short gradient, long content a long gradient. If you need a gradient of a specific height the best choice i still to use an image</p>
         <p> more sample content. bare in mind that the gradient fade will still vary.. that is what a CSS3 generated  gradient does. a pixel height gradient need to be made using an image. note that a px based gradient will also get trunked off if your conatiner is too short. </p>
    </div>
    </body>
    </html>
    maybe this will serve as a guide. I believe it does what you requested. just remember that CSS3 gradients are flexible, they will by design change with the since of your container. If what you need is a gradient that is always 100px high , for example , you are better off using an image bg.

  9. #9
    SitePoint Enthusiast Tahoeporter's Avatar
    Join Date
    Feb 2011
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks dresden,

    I just padded the wrapper. I suppose it will mean that on smaller screens there will be a big blank scroll area?

    If i get some time i will review all the info you gave me and see if i can get it to work properly.

    I guess the one thing I would like to fix is that it still does not work at all in IE?

    thanks

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,550
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    You didn't add the rule that Dresden mentioned.

    Code:
    html{background-color:#dcdcdc}
    That will fix it in Firefox at least .

    It's not working in IE because you have added a space after the hex colour value and before the closing quote.

    Here is the corrected version:
    Code:
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#838357', endColorstr='#DCDCDC'),;

  11. #11
    SitePoint Enthusiast Tahoeporter's Avatar
    Join Date
    Feb 2011
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    You didn't add the rule that Dresden mentioned.
    Code:
    html{background-color:#dcdcdc}
    That will fix it in Firefox at least .
    Thanks. that fixed the IE issue.

    I did try the above html code and it put a solid bar above the wrapper. Dresden gave me some-other things to work on (removing margin on h1 elements) to remedy that and i have been trying to get that to fix it but no luck yet.

    thanks

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,550
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Ok No problem


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
  •