CSS stretching background image to 100 width and height of screen

Question

I have an image called myImage jpg  This is my CSS   body       background-image url     images myImage jpg        background-repeat  no-repeat      background-size  100  100       For some reason  when I do this  the width of myImage stretches across the entire screen but the height only stretches until the height of everything else on the page  So if I put a bunch of    lt br gt    in my html page  then the height will increase  If my HTML page consists only of a    lt div id  header  gt       lt br gt   lt  div gt    then the height of the background image would just be the height of one   lt br gt    How do I make the height of my background image 100  of the screen which the user is using to view the webpage

User · Answer

I would recommend background-size  cover  if you don t want your background to lose its proportions  JS Fiddle  html      background  url image path  no-repeat center center fixed     -webkit-background-size  cover    -moz-background-size  cover    -o-background-size  cover    background-size  cover      Source  http   css-tricks com perfect-full-page-background-image

User · Answer

html  body       min-height  100       Will do the trick   By default  even html and body are only as big as the content they hold  but never more than the width height of the windows  This can often lead to quite strange results   You might also want to read http   css-tricks com perfect-full-page-background-image   There are some great ways do achieve a very good and scalable full background image

User · Answer

The VH unit can be used to fill the background of the viewport  aka the browser window     height 100vh    html      height 100          body        background  url image jpg  no-repeat center top        background-size  cover        height 100vh

User · Answer

You need to set the height of html to 100   body       background-image url     images myImage jpg        background-repeat  no-repeat      background-size  100  100     html       height  100      http   jsfiddle net 8XUjP

[html] CSS: stretching background image to 100% width and height of screen?

Examples related to html

Examples related to css

Examples related to background-image