First put a size in html
and body
so you do not have resize problems.
After the Browser reads the CSS from Top to Bottom , then you first need to declare the Background (which is a "shortcut" where you can insert multiple attributes on a single line) of it.
background: url(http://placeskull.com/500/500);
background-position: center;
background-repeat: no-repeat;
etc...
Or so
background: url(http://placeskull.com/500/500) center no-repeat fixed / 100%;
See in Snippet
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
color: #000000;
font-family: 'Lato', sans-serif;
background: url(http://placeskull.com/500/500);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
}
NOTE: Due to the order of reading the CSS by the Browser if some class "shortcut" like Edge or Background is used, problems can occur. Especially if one attribute depends on the other to be rendered by the Browser. See below.
For example, this CSS will not work :
border-color: #f00;
border-style: dashed;
border: 2px;
This will work:
border: 2px;
border-color: #f00;
border-style: dashed;