Machen Hintergrundbild die Größe des Bildschirms

-1

Ich möchte das Hintergrundbild auf den Bildschirm ausfüllen und bin nicht besorgt über das Verlieren des Seitenverhältnisses. Habe alles abgerichtet, glaube nicht, dass ich etwas offensichtlich abhanden bin ...Machen Hintergrundbild die Größe des Bildschirms

Die HTML:

.phone { 
 
    margin: auto; 
 
    height: 737px; 
 
    width: 654px; 
 
    background-image: url("/imgs/phone.png"); 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    display: block; 
 
} 
 

 
.container { 
 
    position: fixed; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
    height: 536px; 
 
    width: 350px; 
 
    border: 1px solid; 
 
    border-radius: 5px; 
 
    display: block; 
 
} 
 

 
iframe { 
 
    width: 350px; 
 
    /* adjust to your needs */ 
 
    max-width: 100%; 
 
    /* to make it responsive */ 
 
} 
 

 
body { 
 
    background-image: url("/imgs/CV.png"); 
 
    background-repeat: no-repeat; 
 
    background-size: auto; 
 
    margin: 0; 
 
    height: 100%; 
 
    min-height: 100%; 
 
} 
 

The CSS:

body { 
 
    background-color: #93B874; 
 
    } 
 
</style> 
 

 
<body> 
 
    <div className="phone" style="margin:auto; height: 630px;width: 558px; background-image:url(/imgs/phone.png); top:50%; left:50%;"> 
 
    <div className="container"> 
 
     <iframe style="height: 458.18px; width: 290px; margin: auto; position: relative; top: 85px; left: 132px;" src="http://foodsharing-production.herokuapp.com"></iframe> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

Vorschau: http://soupedupkitchencom.fatcow.com/CV/CV.html

Quelle

2017-12-12 ClaaziX

Bitte SO Snippet verwenden Sie den Code zu formatieren – Justinas

hinzufügen background-size: cover für body von der Regel

Oder wenn Sie sicherstellen möchten, dass das gesamte Hintergrundbild angezeigt wird und sich ein verzerrtes Bild nicht wirklich interessiert Bild, können Sie verwenden background-size: 100% 100%;

Hier ist ein Ausschnitt mit Ihrem Code. Wenn Sie den Hintergrund-Größe von body-auto ändern zurück (wie man es hatte), sehen Sie die ursprüngliche Größe des Platzhalter Bild

.phone { 
 
    margin: auto; 
 
    height: 737px; 
 
    width: 654px; 
 
    background-image: url("/imgs/phone.png"); 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    display: block; 
 
} 
 

 
.container { 
 
    position: fixed; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
    height: 536px; 
 
    width: 350px; 
 
    border: 1px solid; 
 
    border-radius: 5px; 
 
    display: block; 
 
} 
 

 
iframe { 
 
    width: 350px; 
 
    /* adjust to your needs */ 
 
    max-width: 100%; 
 
    /* to make it responsive */ 
 
} 
 

 
body { 
 
    background-image: url("http://placehold.it/200x150/fa0?text=this is an image"); 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 100%; 
 
    margin: 0; 
 
    height: 100%; 
 
    min-height: 100%; 
 
} 
 

 
The CSS:

<body> 
 
    <div className="phone" style="margin:auto; height: 630px;width: 558px; background-image:url(/imgs/phone.png); top:50%; left:50%;"> 
 
    <div className="container"> 
 
     <iframe style="height: 458.18px; width: 290px; margin: auto; position: relative; top: 85px; left: 132px;" src="http://foodsharing-production.herokuapp.com"></iframe> 
 
    </div> 
 
    </div> 
 
</body>

Quelle

2017-12-12 15:11:14 Johannes

Weder von diesen Lösungen arbeitete – ClaaziX

hier funktioniert es - beachten Sie das Snippet, das ich hinzugefügt habe – Johannes

Machen Hintergrundbild die Größe des Bildschirms

Antwort

Verwandte Themen