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 2 of 2
  1. #1
    Junior Member
    Join Date
    Jul 2011
    Posts
    2
    Member #
    28604
    Hey, I've been working on this page " http://www.brettmct.com/flipspry2.html " and for whatever reason, I'm having trouble getting the css gradient to adapt and use up the whole of the browser window.

    The code is as follows (and taken from www.colorzilla.com/gradient-editor):


    body {
    background: #d8e0de; /* Old browsers */
    background: -moz-linear-gradient(top, #d8e0de 0%, #aebfbc 22%, #99afab 33%, #8ea6a2 50%, #829d98 67%, #4e5c5a 82%, #0e0e0e 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d8e0de), color-stop(22%,#aebfbc), color-stop(33%,#99afab), color-stop(50%,#8ea6a2), color-stop(67%,#829d98), color-stop(82%,#4e5c5a), color-stop(100%,#0e0e0e)); background-size:cover /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #d8e0de 0%,#aebfbc 22%,#99afab 33%,#8ea6a2 50%,#829d98 67%,#4e5c5a 82%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #d8e0de 0%,#aebfbc 22%,#99afab 33%,#8ea6a2 50%,#829d98 67%,#4e5c5a 82%,#0e0e0e 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #d8e0de 0%,#aebfbc 22%,#99afab 33%,#8ea6a2 50%,#829d98 67%,#4e5c5a 82%,#0e0e0e 100%); /* IE10+ */
    filter: progidXImageTransform.Microsoft.gradient( startColorstr='#d8e0de', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #d8e0de 0%,#aebfbc 22%,#99afab 33%,#8ea6a2 50%,#829d98 67%,#4e5c5a 82%,#0e0e0e 100%);
    /* W3C */
    }

    The only really "fix" if you can even call it that, is by adding <br /> at the very bottom of the website code before the </body> but if anyone on a bigger monitor with higher res opens it, again the gradient will just "stop" without taking up the full page.

    Any help would be greatly appreciated!

    Thanks!
    Attached Images Attached Images

  2.  

  3. #2
    Junior Member
    Join Date
    Jul 2011
    Posts
    2
    Member #
    28604
    Never mind, Got some advice from others and here was the fix.


    html {
    height:100%;
    }

    * {
    padding: 0; margin: 0; }

    TY


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 09:29 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com