Responsive html img background
Question
Hello everyone is looking for days of headlights so that the following image is viewable in full as the background of my menu .. but I can not find a solution .. although I have changed the size of the image, despite the made responsive .. I am attaching evidence of my code and the photo in question ...
<!DOCTYPE html> <?php session_start(); if(!isset($_SESSION["username"])){ header('location: ../index.php'); }else { ?> <html> <head> <title>GED</title> <link href="../paginaIniziale/css/bootstrap-4.0.0.css" rel="stylesheet"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> .bgimg-1{ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("images/sfondo.png"); } </style> <style> .w3-button { background-color:#FFFF; } .tuodiv { width: 100%; height: 100%; top: 0; left: 0; background: url(images/bg.jpg) no-repeat center top; position: fixed; z-index: -1; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .img { max-width: 100%; } .img-responsive { display: inline-block; height: auto; max-width: 100%; } </style> </head> <body > <img src="images/img/sfondo.png" style="background-position:center;"class="img-responsive" alt="Responsive image" /> <div class="w3-top"> <div class="iltuoid"> </div> </div> <div class="w3-display-middle w3-contener" > <br><br><br><br> <br><br><br><br> <a class="w3-center w3-padding-large w3-black w3-xlarge w3-wide" style="margin-left: 22px;">Seleziona un operazione</a> <div class="w3-center" style="margin-top: 40px;"> <a href="../pagineHtml/inserimento/inserimentoGenerale/inserimentoCantiere.php" class="w3-bar-item w3-button" style="background-color:#FFFF;"><i class="fa fa-home"></i>Milano </a> <a href="azioniVisualizza/sceltaCantiere.php" class="w3-bar-item w3-button"><i class="fa fa-home"></i>Roma </a> </div> </div> </div> </body> </html> <?php } ?>
there is always a small clipping ... or the image is too big and then but go down the page
1 answers
solution1
2 ACCPTED 2018-11-30 14:15:57
<html> <head> <title>GED</title> <link href="../paginaIniziale/css/bootstrap-4.0.0.css" rel="stylesheet"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> .bgimg-1{ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("images/sfondo.png"); } </style> <style> .w3-button { background-color:#FFFF; } .tuodiv { width: 100%; height: 100%; top: 0; left: 0; background: url(images/bg.jpg) no-repeat center top; position: fixed; z-index: -1; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .img { max-width: 100%; } .img-responsive { background:url("https://i.stack.imgur.com/VOGIV.png") no-repeat; width 100vw; height:100vh; background-size:100% 100%; } </style> </head> <body > <div class="img-responsive" ></div> <div class="w3-top"> <div class="iltuoid"> </div> </div> <div class="w3-display-middle w3-contener" > <br><br><br><br> <br><br><br><br> <a class="w3-center w3-padding-large w3-black w3-xlarge w3-wide" style="margin-left: 22px;">Seleziona un operazione</a> <div class="w3-center" style="margin-top: 40px;"> <a href="../pagineHtml/inserimento/inserimentoGenerale/inserimentoCantiere.php" class="w3-bar-item w3-button" style="background-color:#FFFF;"><i class="fa fa-home"></i>Milano </a> <a href="azioniVisualizza/sceltaCantiere.php" class="w3-bar-item w3-button"><i class="fa fa-home"></i>Roma </a> </div> </div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
html5 canvas background img
LazyLaoding CSS background (not HTML <img> tags)
How to create responsive video (HTML5) background?
Responsive HTML's background image stretching with Javascript
Divs absolute into responsive img
Responsive Fullscreen img with no cropping
Set (responsive) height of <img> = to height of another <img>
HTML - Create a responsive top-navitaion menu over a background
Change img src with another img attribute on Responsive
img-responsive with fixed style
Related Tags