How to have css background image scale with window size and device
background, css, html, responsive-design
Solution
try using the background-size property in the following manner:
background-size:100% auto;
or use the below if you want to have its height covering the whole page height
background-size:auto 100%;
Problem
I am trying to setup a fluid template that I can use for responsive design viewports too. However now when I try to resize my browser window it does not scale and on my iphone i just see the top left part of my header graphic. I have a main wrapper background and a header animated gif that are both the same width of 1200px. Any help would be greatly appreciated. viewport ``` <meta name="viewport" content="width=device-width, initial-scale=1"> ``` css ``` body { background-color: #B28D66; margin: 0 auto; } #Wrapper { max-width:1200px; width:95%; background-image: url(../img/background_main.jpg); background-repeat: no-repeat scroll; background-position: center top; height: 2200px; position: relative; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #Wrapper #Banner { width: 100%; height: 350px; background-image: url(../img/animated-gif-header.gif); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #Wrapper #Content { width: 75%; margin: 0 auto; } #Wrapper #MainNav { background-image: url(../img/nav_bar.png); width: 100%; height: 75px; margin-top: -20px; } #Wrapper #MainNav ul { margin-right: 100px; } #Wrapper #MainNav ul li { float: right; margin-top: 15px; padding-right: 21px; ```