1

So I have html and body elements CSS set to height: 100% and when my elements on page take more than 100% of the screen height, as expected scroll bar appears which allows me to scroll down to see elements that reached limit of 100%, however in such case background gets cut down. Code I mentoined:

Edit: Problem still appears even if I remove height: 100% rules from both elements.

html
  //height: 100%
  body
    //height: 100%

Here are screenshots:

enter image description here enter image description here

How do I fix this? I want my background to be on whole page not just first 100% of the page.

Edit: Here is almost all of my CSS from this page:

.animated-gradient
  background: linear-gradient(0deg, #a3f51b, #057fd2, #d205b8)
  background-size: 600% 600%
  -webkit-animation: animated-gradient 30s ease infinite
  -moz-animation: animated-gradient 30s ease infinite
  animation: animated-gradient 50s ease infinite

*
  margin: 0
  padding: 0
  box-sizing: border-box

html
  min-height: 100%
  body
    min-height: 100%
    font-size: 17px
    background-attachment: fixed

#main-menu
  position: relative

.main-menu-item
  cursor: pointer
  +bs1()
  background: $white
  transition: all .25s
  //&:hover
    +scale(1.05, 1.05)
  &:active
    +scale(0.95,0.95)
  i, span
    display: block

.box-size-11
  width: 9.5vw
  height: 9.5vw
  margin: .25vw
  float: left
  vertical-align: top
  i, span
    font-size: 5vw
    text-align: center
  span
    font-size: 1vw

.box-size-21
  @extend .box-size-11
  width: 9.5vw * 2 + 0.5vw

HTML structure

<body> <!-- body is the element with background and its one that gets cut down -->
  <div>
    <div></div>
    <div></div>
    <div></div>
    ...
  </div>
</body>
Kunok
  • 8,089
  • 8
  • 48
  • 89
  • Does changing `height` to `min-height` fix it? – Garconis Mar 27 '16 at 02:50
  • @Garconis nope. even if I remove both properties problem appears. I remember having similar problem on one website I was building long time ago but I can't remember how I solved it. – Kunok Mar 27 '16 at 02:55
  • Delete line 77 of your CSS and you're good to go! – Rob Mar 27 '16 at 02:59
  • @Rob Is that supposed to be a joke? Sarcasm because I didn't give enough CSS info? If so, I'll provide more code. – Kunok Mar 27 '16 at 03:03
  • 1
    You didn't supply any CSS or HTML so I thought my guess was as good as anyone elses. – Rob Mar 27 '16 at 03:08
  • Still need the HTML but I don't do CSS pre-processors so I don't want to interpret all that. Your images are unnecessary except a small part to visualize the problem. Screenshots of dev tools are useless and you need to simplify to where the problem is and describe which parts affect your problem. – Rob Mar 27 '16 at 03:18

2 Answers2

3

Try using fixed positioning on the background. By default, backgrounds such as the one you used (as opposed to repeating/solid which negate the issue) will be positioned absolute. So the height scales to 100% but the background remains at the same position.

This can be done by adding the following at the end of your css object:

background-attachment: fixed;

EDIT:

Create an additional div to house the gradient. Using BODY restricts usage of fixed positioning. So, in your case, you can simply move .animated-gradient to its own div with no children, and use fixed positioning.

Jacob Colvin
  • 2,625
  • 1
  • 17
  • 36
  • I added this rule to body element (the one with the background) and it didn't work for me. I also added it to class that has the background and same result. – Kunok Mar 27 '16 at 03:06
  • Did you add it to .animated-gradient AFTER the background properties? – Jacob Colvin Mar 27 '16 at 03:10
  • I looked around and found this https://stackoverflow.com/questions/18094134/fixed-gradient-background-with-css Same problem and solution. You must be inheriting something that's preventing the code from working. Should be able to see this in the inspector. – Jacob Colvin Mar 27 '16 at 03:19
  • That is not same problem. In my case, the element gets cut down (check screenshot 2), not the background itself. – Kunok Mar 27 '16 at 03:21
  • Try using a separate class from BODY. So: html body gradient /gradient /body /html As opposed to styling the body element. – Jacob Colvin Mar 27 '16 at 03:23
  • Do you mean adding another child div to body that is parent to all other divs that were inside body? – Kunok Mar 27 '16 at 03:25
  • Add a child div that is not parent to any additional elements. That way you can use fixed positioning without affecting the rest of the body. – Jacob Colvin Mar 27 '16 at 03:26
  • I added one div that is inside body but not related to any other element and has `position: fixed` and `height: 100%` and it works well now, please update the answer with this info, so I can accept your answer as correct – Kunok Mar 27 '16 at 03:31
  • Great to hear, I added a quick edit with the solution. – Jacob Colvin Mar 27 '16 at 03:34
  • i Love U, u make my day, thanks for that!!!! it's works like a charm! – Ivo Facundo Feb 28 '20 at 22:43
1

Not sure if this will result in exactly what you want be Here is what I got to work. Create a container (I used a DIV) at the top of your page (I put mine directly after the body tag), an empty container... the code I am pasting below has inline styles applied to it, but you can pull the styles out and put them in your CSS if you would like.

<div style="
  background: linear-gradient(0deg, #a3f51b, #057fd2, #d205b8);
  animation: animated-gradient 50s ease infinite;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position:fixed;">
</div>

absolute positioning works as expected, but the background does not scroll with the user, so we add position fixed, to make the background follow the user as they scroll through the web page. You might have to add a Z-index and fool around with numbers to make sure your new background does not cover any of your content... I added a z-index:-10 to put it behind my content... Enjoy! :)

Metroidaron
  • 357
  • 2
  • 10