All geek questions in one place

CSS: setting the background gradient to a width of 100%, if only scrolling pages

Here are two screenshots showing the effect with a small viewport that needs to be scrolled.

alt textalt text

HTML looks like this: (ignoring head and html tags)

<body>
 <div id="grad1"></div>
 <div id="wrapper">
 <header>
  <h1 class="logo"><a href="/">Business Name</a></h1>
 </header> 
 <nav>
  <ul>
   <li><a class="first" id="index" href="/index.php">Home</a></li>
   <li><a  id="whatwedo" href="/whatwedo.php">What we do</a></li>
   <li><a  id="communicating" href="/communicating.php">Communicating</a></li>
   <li><a class="last" id="contact" href="/contact.php">Contact Us</a></li>
  </ul>
 </nav>
 <div style="clear:both;"></div>
 <section>
  <?= $content ?>
 </section>
 <footer>
  &copy; 2010
 </footer>
 </div> 
</body>

And the CSS (cropped) related to the body, grad1 and wrapper, looks like this:

body {
 color: #111;
 background-color: #3E9C9D;
}

#grad1 {
 height: 600px;
 position: absolute;
 top: 0;
 left: 0;
 z-index: -100;
 width: 100%;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#3E9C9D));
    background-image: -moz-linear-gradient(#fff 0%, #3E9C9D 100%);
}


#wrapper {
 max-width:960px;
 min-width:840px;
 margin: 0 auto;
}

How to fix it? As far as I know, I should have a gradient on another div, because I need to specify the height.

(I know that the CSS gradient does not work in IE - there is a background image there to emulate the behavior. It has the same problem.)

+3
source share
4 answers

Well, for people who find this and can't solve it, CSS should look like this:

body {
 color: #111;
 background-color: #3E9C9D;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#3E9C9D));
 background-image: -moz-linear-gradient(#fff 0%, #3E9C9D 100%);
 background-repeat:repeat-x;
 background-size: 100% 600px;
 -o-background-size: 100% 600px;
 -moz-background-size: 100% 600px;
 -webkit-background-size: 100% 600px;
}

#wrapper {
 max-width:960px;
 min-width:840px;
 margin: 0 auto;
}

2 - , . , .

+3

position: absolute, .

, , grad1 DIV, / ? , , .

+1
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}

.gradient {
background: linear-gradient(top, #243d6e 0%,#031b4d 61%,#011132 100%); /* W3C */
background-repeat: no-repeat;
background-attachment: fixed;
}

.gradient body div.

+1

-.

, , .

  • ( ) .
  • CSS x, y
  • Set the background color of the body to the same color as the bottom of the image.

Here is the CSS:

body {
 color: #111;
 background-color: #3E9C9D;
 background-image: URL(gradient_green.png);
 background-repeat:repeat-x;
}

#wrapper {
 max-width:960px;
 min-width:840px;
 margin: 0 auto;
}
-1
source

Source: https://habr.com/ru/post/1734764/

More articles:


All Articles