The background wont go to the whole page

Question

I just want the backgruond gradient to cover the whole page, I'm unsure to why it only covers the text, Heres my html:

body{
  background-image: linear-gradient(to  bottom left,#2600ff  , #ffd9f5);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Loops</title>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <H1> Fathom converter</h1>
      <input type="textbox" id="number">
      <input type="button" value="Feet" onclick="feets()">
      <input type="button" value="Inches" onclick="inches()">
      <input type="button" value="Centimeters" onclick="centimeters()">
      <input type="button" value="Meters" onclick="meter()">
      <input type="button" value="Yards" onclick="yardes()">
      <br>
     <p id="output">
 </body>
</html>

I have tried maxing out the height and width, using cover, etc. If I dont use no repeat, it repeats the gradient in the same ratio that is in when it starts. If anyone know's how to fix this or why its happening please let me know.

score 1 · Answer 1 · answered Oct 22 '21 at 14:57

1

Try this.

body{
  background: linear-gradient(to  bottom left,#2600ff, #ffd9f5) fixed;
}

If you put fixed , it will cover all body.

or see if this help Making gradient background fill page with css

answered Oct 22 '21 at 14:57

Silvia

56
9

score 0 · Accepted Answer · 2021-10-22T15:17:02.740

0

I would try using the viewport height (vh) and %. Making a div stretch the way you want can sometimes require the use of height and min-height (or width and min-width) working together.

HTML

<body>
  <h1> Fathom converter</h1>
  <input type="textbox" id="number">
  <input type="button" value="Feet" onclick="feets()">
  <input type="button" value="Inches" onclick="inches()">
  <input type="button" value="Centimeters" onclick="centimeters()">
  <input type="button" value="Meters" onclick="meter()">
  <input type="button" value="Yards" onclick="yardes()">
  <br />
  <p id="output">
</body>

CSS

/* This global styling prevented an unwanted scroll bar. */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-image: linear-gradient(to bottom left, #2600ff, #ffd9f5);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  min-height: 100vh;
  
  padding: 2rem;
}

Here's a CodePen

edited Oct 22 '21 at 15:17

answered Oct 22 '21 at 15:05

This will not look great once you start scrolling when the page content it big enough (background will stop) – Apolo Oct 22 '21 at 15:07
Ok i changed it to work. check the codepen again – Oct 22 '21 at 15:12
nice, thank you. Can you also update your answer please ? – Apolo Oct 22 '21 at 15:13
It has been updated. – Oct 22 '21 at 15:17
far to mcu unecessary coding. A `background-image` on the bdoy will always cover the entire viewport ( if background-position is fixed). There is no need to declare `min-height: 100vh` therefor. also `body { height: 100%; }` has no effect. The body height is calculated to fit-content. As such it has no way to know what 100% should be because 100% value is always depending on the parents height (requires that the height is defined not calculated) – tacoshy Oct 22 '21 at 16:28

The background wont go to the whole page

2 Answers2