html - How to get background to scale to any screen? -


how background scale fit screen? have tried background-size: cover , height: auto nothing works! ideas? can't seem find works. appreciate can offer problem.

<!doctype html> <html> <link rel="shortcut icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/metro-m.svg/2000px-metro-m.svg.png"> <head> <style> html {     background: url("https://lh3.googleusercontent.com/-lyq3vqhe3mo/vrvkgwg8pqi/aaaaaaaadmq/qkjs5alviko/w530-d-h253-p-rw/desk%2bbackground.png") #363634 no-repeat center top;     background-size: cover;     margin: 0;     padding: 0;     position: fixed;      width: 100%;     height: auto;     position: fixed;     top: 0;     left: 0; } h1 {     position: absolute;     top: 21%;     left: 25%;     color: white;     font-family: arial;     font-size: 4.6vw;     letter-spacing: 1px; } p {     position: absolute;     width: 250px;     top: -1px;     left: 15px;     height: 25px;     font-family: arial; } ul {     word-spacing: .2em;     letter-spacing: .2em; } ul li {     font-family: arial;     text-align: center;     vertical-align: middle;     line-height: 40px;     top: 43%;     display: inline-block;     margin-top: 250px;     margin-left: 115px;     letter-spacing: 1px;     word-spacing: normal;     background-color: rgba(5, 4, 2, 0.1);     border: 2px solid white;     color: white;     text-align: center;     text-decoration: none;     font-size: 90%;     width: 150px;     height: 40px; } ul li:link, ul li:visited {     font-family: arial;     text-align: center;     vertical-align: middle;     line-height: 40px;     display: inline-block;     margin-top: 250px;     margin-left: 115px;     letter-spacing: 1px;     word-spacing: normal;     background-color: rgba(5, 4, 2, 0.1);     border: 2px solid white;     font-size: 90%;     width: 150px;     height: 40px;     text-decoration: none;     color: white; } li {     text-decoration: none;     color: white; } ul li:hover, ul li:active {     background-color: white;     color: black;     text-decoration: none; }  ul li a:hover, ul li a:active {     background-color: white;     color: black; }    ul li {     display: inline-block;     height: 100%;     width: 100%;     color: white;     text-decoration: none; }   @media screen , (max-width: 1024px) { /* specific particular image */     body {         left: 50%;         margin-left: -512px;   /* 50% */     } } </style> <link rel="stylesheet" type="text/css" href="m.css"> <title>morgan</title>  </head> <body> <center><h1>a girl passion</h1></center> <ul> <li><a href="www.youtube.com" class="life" ><strong>my life</strong></a></li> <li><a href="www.youtube.com" class="prot"><strong>portfolio</strong></a></li> <li><a href="www.youtube.com" class="resume"><strong>resume</strong></a></li> <li><a href="about.html" class="me"><strong>about me</strong></a></li> </ul>  </body> </html> 

you can use position tricks, set 0.

html {    background: url("https://lh3.googleusercontent.com/-lyq3vqhe3mo/vrvkgwg8pqi/aaaaaaaadmq/qkjs5alviko/w530-d-h253-p-rw/desk%2bbackground.png") #363634 no-repeat center top;    background-size: cover;    position: fixed;    left: 0;    right: 0;    top: 0;    bottom: 0;  }

or set both width:100% , height:100%.

html {    background: url("https://lh3.googleusercontent.com/-lyq3vqhe3mo/vrvkgwg8pqi/aaaaaaaadmq/qkjs5alviko/w530-d-h253-p-rw/desk%2bbackground.png") #363634 no-repeat center top;    background-size: cover;    position: fixed;    width: 100%;    height: 100%;  }


Comments

Popular posts from this blog

java - pagination of xlsx file to XSSFworkbook using apache POI -

Unlimited choices in BASH case statement -

apache - How do I stop my index.php being run twice for every user -