Home > OS >  background-size: cover; Not filling site
background-size: cover; Not filling site

Time:02-25

So I am trying to make the background fill the page, but it just won't do it. I have no idea why:

#background {  
  background: linear-gradient(to top, rgb(226, 250, 218), rgb(0, 116, 25)) center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
}

Can someone help me? I am quite new to HTML and CSS and don't really understand everything perfectly.

Here is the HTML Code too:

    <div  id="background">
  <div >
    <header>Welcome to my Journal!</header>
  </div>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <h4> Diese Sprachen habe ich bis jetzt gelernt: </h4>
  <label for="python">
  <input id="python" value="python" type="checkbox" name="code" checked>Python
  </label>
  <br>
  <label for="java">
  <input id="java" value="java" type="checkbox" name="code">Java
  </label>
  <br>
  <label for="html">
  <input id="html" value="html" type="checkbox" name="code" checked>HTML
  </label>
  <br>
  <label for="c">
  <input id="c" value="c" type="checkbox" name="code">C  
  </label>
</div>

CodePudding user response:

write something between your div like below:-

<div  id="background"><span>write here</span></div>

or give height and width in your css like this:-

#background {
    background: linear-gradient(to top, rgb(226, 250, 218), rgb(0, 116, 25)) center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100vw;
    height: 100vh;
}

CodePudding user response:

I don't know what's in your div, but your code should work. Do you have a width/height for your div, or some content inside? Just an example here:

#background {  
  background: linear-gradient(to top, rgb(226, 250, 218), rgb(0, 116, 25)) center center fixed;
  height:100vh;
  width:100vw;
}
body{
  padding:0;
  margin:0;
}
<!DOCTYPE html>
<html lang="en">
  <body>  
    <div  id="background">Stuff</div></body>
</html>

  • Related