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>