To get the perfect, full background image to cover your website’s entire browser window, there’s a couple ways to execute. The first step to getting this to work, which is sometimes overlooked, and can cause much frustration to newbies is set html + body css attributes as follows:
|
1 2 3 4 5 |
html, body { margin: 0; width: 100%; height: 100%; } |
Afterwards, you can set your background imagery, background gradients, etc as follows:
CSS3
|
1 2 3 4 5 6 7 |
html { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } |
Find more ways to set your backgrounds in CSS via here