Html Question posted in
Some basic documentation can be found here.

Html – Why is there a blue background at the bottom of my webpage instead of a gradient?

hi so i am making a webapp and i am using a gradient as the background right now. I am wondering on why there is a blue background at the bottom of my screen for no reason. Here is the code and screenshot.

https://phpout.com/wp-content/uploads/2024/02/RXqnL.png

codepen: https://codepen.io/AviPlayz247/pen/QWomyLe

As you can see like in the codepen, there is a blue background at the bottom instead of the gradient continuted. Does anyone know why?

Some fixes i tried included like setting body min-height: 100% and for the html tag but it didn’t really fix anything at all. If anyone can help me with this issue that i am encountering that would be great! Thanks!

Tags:

2

Answers


  1. 0

    Here’s a simple example with a 100% tall element that has a gradient which fully covers it, regardless of size, even if the content needs to scroll.

    html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.example1 {
  color: #fff;
  background: linear-gradient(
    180deg,
    rgb(23.75, 0, 91.36) 0%,
    rgb(9.84, 3, 29.31) 100%
  );
  height: 100%;
  overflow: auto;
}
    <div class="example1">

  <h1>Scrollable Area with Gradient</h1>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam est lorem, vulputate non urna quis, lobortis feugiat mauris. Nunc sit amet ligula commodo, posuere ligula eget, ullamcorper magna. Duis scelerisque fringilla iaculis. Nullam nunc arcu, porta sit amet iaculis egestas, condimentum ac massa. Morbi euismod condimentum lectus, ac mattis lorem rhoncus eu. Etiam sed lacinia ante. Pellentesque imperdiet tristique scelerisque. Sed non mauris fringilla, faucibus turpis vel, varius sapien. Cras efficitur, lectus sit amet pellentesque rhoncus, ipsum nunc mollis justo, eu placerat leo ex sit amet ante. Donec dictum feugiat massa et aliquet.</p>

  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus sem dolor, tempor ac enim non, lobortis blandit odio. Suspendisse gravida sem sit amet molestie ultrices. Aenean fermentum dui vel aliquam lacinia. Donec eget ante sed enim mattis dictum consectetur vitae ex. Donec imperdiet accumsan pellentesque. Suspendisse viverra facilisis arcu, in viverra metus posuere non. Nam sagittis orci a sapien euismod, vel sagittis arcu elementum. Morbi convallis bibendum elit, nec sodales leo lacinia eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus sapien et felis faucibus, vitae luctus ligula posuere. Nulla condimentum porta lacus, id elementum dolor placerat non. Ut risus tortor, accumsan quis faucibus in, tincidunt et risus. Nulla eu augue ut arcu tempor varius in vitae turpis. Mauris orci lorem, efficitur eget pellentesque ac, scelerisque at mi.</p>

  <p>Vivamus pellentesque tristique neque, vitae suscipit enim egestas vitae. Pellentesque tempus massa in ligula semper, ac pretium ante interdum. Aenean nec tortor eu lacus tempus commodo. Maecenas convallis euismod rutrum. Donec quis enim tortor. Aliquam blandit bibendum diam. Maecenas nec turpis ut nisi imperdiet fermentum. Vivamus dapibus est at tortor faucibus, in maximus libero venenatis. Nulla viverra nibh sit amet turpis auctor molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

  <p>In at rhoncus risus, nec tincidunt magna. Pellentesque tellus urna, dapibus non dictum ac, lacinia ullamcorper sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas ornare aliquet tortor vitae egestas. Phasellus tellus nibh, tincidunt vel sem sit amet, tristique elementum diam. Phasellus quis purus sit amet nisi porta imperdiet. Suspendisse hendrerit orci eget ipsum bibendum, eleifend suscipit purus fermentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent eget neque in massa fermentum cursus et at est. Vivamus consectetur, diam et bibendum tristique, sem tellus placerat turpis, ac consequat metus sapien at magna. Nulla vitae ullamcorper sapien, vel gravida libero. Nulla lacinia risus non arcu lacinia malesuada. Morbi tincidunt sapien non mauris accumsan cursus.</p>

  <p>Duis sodales ac velit in laoreet. Fusce quis arcu vitae nulla euismod aliquam. Nulla bibendum id justo vitae consequat. Quisque ultrices quam quis orci pellentesque porttitor. Vestibulum nec feugiat eros, sit amet luctus sem. Phasellus a nunc est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis in nisl mauris. Nullam mattis sem at dui dictum, non suscipit est pretium. Nullam ac facilisis velit. Maecenas interdum justo justo, et aliquet dui feugiat ut.</p>
  
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam est lorem, vulputate non urna quis, lobortis feugiat mauris. Nunc sit amet ligula commodo, posuere ligula eget, ullamcorper magna. Duis scelerisque fringilla iaculis. Nullam nunc arcu, porta sit amet iaculis egestas, condimentum ac massa. Morbi euismod condimentum lectus, ac mattis lorem rhoncus eu. Etiam sed lacinia ante. Pellentesque imperdiet tristique scelerisque. Sed non mauris fringilla, faucibus turpis vel, varius sapien. Cras efficitur, lectus sit amet pellentesque rhoncus, ipsum nunc mollis justo, eu placerat leo ex sit amet ante. Donec dictum feugiat massa et aliquet.</p>

  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus sem dolor, tempor ac enim non, lobortis blandit odio. Suspendisse gravida sem sit amet molestie ultrices. Aenean fermentum dui vel aliquam lacinia. Donec eget ante sed enim mattis dictum consectetur vitae ex. Donec imperdiet accumsan pellentesque. Suspendisse viverra facilisis arcu, in viverra metus posuere non. Nam sagittis orci a sapien euismod, vel sagittis arcu elementum. Morbi convallis bibendum elit, nec sodales leo lacinia eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus sapien et felis faucibus, vitae luctus ligula posuere. Nulla condimentum porta lacus, id elementum dolor placerat non. Ut risus tortor, accumsan quis faucibus in, tincidunt et risus. Nulla eu augue ut arcu tempor varius in vitae turpis. Mauris orci lorem, efficitur eget pellentesque ac, scelerisque at mi.</p>

  <p>Vivamus pellentesque tristique neque, vitae suscipit enim egestas vitae. Pellentesque tempus massa in ligula semper, ac pretium ante interdum. Aenean nec tortor eu lacus tempus commodo. Maecenas convallis euismod rutrum. Donec quis enim tortor. Aliquam blandit bibendum diam. Maecenas nec turpis ut nisi imperdiet fermentum. Vivamus dapibus est at tortor faucibus, in maximus libero venenatis. Nulla viverra nibh sit amet turpis auctor molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

  <p>In at rhoncus risus, nec tincidunt magna. Pellentesque tellus urna, dapibus non dictum ac, lacinia ullamcorper sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas ornare aliquet tortor vitae egestas. Phasellus tellus nibh, tincidunt vel sem sit amet, tristique elementum diam. Phasellus quis purus sit amet nisi porta imperdiet. Suspendisse hendrerit orci eget ipsum bibendum, eleifend suscipit purus fermentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent eget neque in massa fermentum cursus et at est. Vivamus consectetur, diam et bibendum tristique, sem tellus placerat turpis, ac consequat metus sapien at magna. Nulla vitae ullamcorper sapien, vel gravida libero. Nulla lacinia risus non arcu lacinia malesuada. Morbi tincidunt sapien non mauris accumsan cursus.</p>

  <p>Duis sodales ac velit in laoreet. Fusce quis arcu vitae nulla euismod aliquam. Nulla bibendum id justo vitae consequat. Quisque ultrices quam quis orci pellentesque porttitor. Vestibulum nec feugiat eros, sit amet luctus sem. Phasellus a nunc est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis in nisl mauris. Nullam mattis sem at dui dictum, non suscipit est pretium. Nullam ac facilisis velit. Maecenas interdum justo justo, et aliquet dui feugiat ut.</p>
  
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam est lorem, vulputate non urna quis, lobortis feugiat mauris. Nunc sit amet ligula commodo, posuere ligula eget, ullamcorper magna. Duis scelerisque fringilla iaculis. Nullam nunc arcu, porta sit amet iaculis egestas, condimentum ac massa. Morbi euismod condimentum lectus, ac mattis lorem rhoncus eu. Etiam sed lacinia ante. Pellentesque imperdiet tristique scelerisque. Sed non mauris fringilla, faucibus turpis vel, varius sapien. Cras efficitur, lectus sit amet pellentesque rhoncus, ipsum nunc mollis justo, eu placerat leo ex sit amet ante. Donec dictum feugiat massa et aliquet.</p>

  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus sem dolor, tempor ac enim non, lobortis blandit odio. Suspendisse gravida sem sit amet molestie ultrices. Aenean fermentum dui vel aliquam lacinia. Donec eget ante sed enim mattis dictum consectetur vitae ex. Donec imperdiet accumsan pellentesque. Suspendisse viverra facilisis arcu, in viverra metus posuere non. Nam sagittis orci a sapien euismod, vel sagittis arcu elementum. Morbi convallis bibendum elit, nec sodales leo lacinia eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus sapien et felis faucibus, vitae luctus ligula posuere. Nulla condimentum porta lacus, id elementum dolor placerat non. Ut risus tortor, accumsan quis faucibus in, tincidunt et risus. Nulla eu augue ut arcu tempor varius in vitae turpis. Mauris orci lorem, efficitur eget pellentesque ac, scelerisque at mi.</p>

  <p>Vivamus pellentesque tristique neque, vitae suscipit enim egestas vitae. Pellentesque tempus massa in ligula semper, ac pretium ante interdum. Aenean nec tortor eu lacus tempus commodo. Maecenas convallis euismod rutrum. Donec quis enim tortor. Aliquam blandit bibendum diam. Maecenas nec turpis ut nisi imperdiet fermentum. Vivamus dapibus est at tortor faucibus, in maximus libero venenatis. Nulla viverra nibh sit amet turpis auctor molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

  <p>In at rhoncus risus, nec tincidunt magna. Pellentesque tellus urna, dapibus non dictum ac, lacinia ullamcorper sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas ornare aliquet tortor vitae egestas. Phasellus tellus nibh, tincidunt vel sem sit amet, tristique elementum diam. Phasellus quis purus sit amet nisi porta imperdiet. Suspendisse hendrerit orci eget ipsum bibendum, eleifend suscipit purus fermentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent eget neque in massa fermentum cursus et at est. Vivamus consectetur, diam et bibendum tristique, sem tellus placerat turpis, ac consequat metus sapien at magna. Nulla vitae ullamcorper sapien, vel gravida libero. Nulla lacinia risus non arcu lacinia malesuada. Morbi tincidunt sapien non mauris accumsan cursus.</p>

  <p>Duis sodales ac velit in laoreet. Fusce quis arcu vitae nulla euismod aliquam. Nulla bibendum id justo vitae consequat. Quisque ultrices quam quis orci pellentesque porttitor. Vestibulum nec feugiat eros, sit amet luctus sem. Phasellus a nunc est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis in nisl mauris. Nullam mattis sem at dui dictum, non suscipit est pretium. Nullam ac facilisis velit. Maecenas interdum justo justo, et aliquet dui feugiat ut.</p>

</div>
    Login or Signup to reply.
  2. 0

    The way I would address this is with background-attachment

    html, body {
  margin: 0;
  padding: 0;
  background-color: transparent;
  background-image: linear-gradient(180deg,
     rgb(23.75, 0, 91.36) 0%,
     rgb(9.84, 3, 29.31) 100%);
  background-attachment: fixed;
  height: 100% !important;
}

    The MDN page describes ‘fixed’ this way:

    fixed
    The background is fixed relative to the viewport. Even if an element has a scrolling mechanism, the background doesn’t move with the element. (This is not compatible with background-clip: text.)

    You could also increase the 100% in your background as the end point to 200%, say. Or another value.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search