Position auf Geräteausrichtung basierend Hintergrund ändern

Question

Kann mir jemand sagen, wie dieser Trick zu erreichen, wo, wenn ein Smartphone auf Porträt verwenden Sie diesen Hintergrund erhalten auf Ihrer Webseite:

Und dann, wenn sie auf Landschaftsmodus das Bild würde einen breiteren Blick aussieht:

Answer 1

gründlich zu sein, gibt es viele Möglichkeiten, wie Sie dies tun könnten. JavaScript kann in bestimmten Situationen, in denen Sie die IMG-Quelle festlegen, hilfreicher sein. In den meisten Fällen sollten Sie CSS verwenden. Sie können hier alle Ihre CSS-Optionen lesen Sie über:

https://developer.mozilla.org/en-US/docs/Web/CSS/@media

body { 
 
    background: url(https://placehold.it/500x1000); 
 
    background-size: cover; 
 
    background-position: center center; 
 
} 
 

 
@media screen and (orientation: landscape) { 
 
    body { 
 
    background: url(https://placehold.it/1000x2000); 
 
    } 
 
} 
 

 
@media screen and (min-width: 1200px) { 
 
    body { 
 
    background: url(https://placehold.it/2000x3000); 
 
    } 
 
}

<!-- body tag is included by default... --> 
 

 
<!-- hey StackSnippet warriors(trolls)... key example here of a bad time to use it -->

Answer 2

Im sorry, wenn ich havent einen Code geschrieben .. aber dank sherrifderek ich erreicht habe, was ich wollte, ohne Medien-Anfragen durch nur mit

body { 
background: url(../img/intro-bg2.jpeg); 
background-repeat:no-repeat; 
-webkit-background-size:cover; 
    -moz-background-size:cover; 
    -o-background-size:cover; 
     background-size:cover; 
background-position:center top; /*****Just added this*****/ 
} 

ich bin nicht sicher, ob il auf Probleme stoßen, wenn ihr ha Jede Eingabe/Hilfe, um dies besser zu kodieren, wird geschätzt. Danke!

EDIT: stellt sich heraus, i

verwenden musste

@media screen and (orientation: landscape) { 
body { 
     background-size:cover; 
     background-position:center top; 
} 
} 

zu bekommen, was ich auf Landschaft