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
Post a Comment