Geek Answers Handbook

Extension of the background gradient throughout the body without reference to the background: fixed

I want to have a background gradient, for example.

background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(2, 126, 174, 0.9))

on the body of my document, which extends over the entire height of the body - and scrolls the body.

Using

background-attachment: fixed;

I get the whole height (from the viewport), but it, well, remains fixed.

background-attachment: scroll;

gets a scroll, but then it just expands in view height.

Any way to get both?

Edit:

As Boltlock noted, I get the expected behavior using "background-attachment: scroll" on the base test page.

FROM

<body>
   <div id="stretch">Content</div>
</body>

and

  body {
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(2, 126, 174, 0.9));
  }

  #stretch {
     height: 2000px;
  }

everything works fine: the gradient spreads all over the body (and the body is 2000 pixels high) and scrolls the contents.

Then i add

  html, 
  body {
     height: 100%;
  }

This is what is based on the basic template that the page is based on.

To expand the body again, I add

  height: auto;

2000 .

, HTML - .

?

+4
2

- , ( html, body), , html body, .

- . , :

body / html. body, html, , , , html:

, HTML html XHTML html: "background-image" "none" " " , HTML body XHTML body . body , , .

, - html body, , html body.

, reset height html min-height:

  html {
     height: auto;
     min-height: 100%;
  }

html, , , , ( , min-height).

+10

Thy this ( background-size, ):

body
{
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(2, 126, 174, 0.9));
      background-attachment: scroll;
    background-size: 100% 900px;
    overflow: hidden;
}

: http://jsfiddle.net/BfH8D/1/

, ?

0

More articles:


All Articles