CSS Bildpositionierung nach Größe des Monitors unterschiedlich zeigt

-2

ich ein Bild auf meiner Seite gesetzt haben, Hintergrundbild, aber ich weiß nicht, warum, ist es anders zu Person auf eine andere, (nach Größe des Monitors)CSS Bildpositionierung nach Größe des Monitors unterschiedlich zeigt

ex: bei meinem PC, zeigt es auf diese Weise:

an einem anderen PC, unterschiedliche Größe des Monitors, wäre es anders zeigen.

Warum ist das? Ich habe versucht, 50% 50% No-Repeat hinzuzufügen, aber es hat nicht funktioniert

Ich weiß nicht wirklich, was zu tun ist.

CSS:

body {font-family:Arial, Sans-Serif; background-image: url("http://vestigedayz.com/Resurse/images/header-background.jpg"); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

HTML

<body> 
.... 
</body>

body {font-family:Arial, Sans-Serif; background-image: url("http://vestigedayz.com/Resurse/images/header-background.jpg"); 
 

 

 

 

 

 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
}

<body> 
 
    </body>

Quelle

2016-10-31 Alx Tioltisan

ich habe hinzugefügt Code snipped. Davor hatte ich CSS-Code in der Frage. –

Da Sie Cover verwenden, hängt die Auflösung des Monitors davon ab, wie das Bild aussehen wird. Zum Beispiel - in dieser Geige, so tun, als ob die drei divs unterschiedliche Monitorauflösungen sind, sieht das Bild in jedem anders: https://jsfiddle.net/yd39v79p/1/ – Pete

Und was soll ich tun, um das zu beheben? Als Beispielbild mit

Eine Lösung ist das Image-Tag mit einer Klasse verwenden und dann wenden Sie das folgende CSS kann es jedoch werden verzerrt, wenn das Dimensionsverhältnis des Bildes nicht passt ch das des Monitors.

<img src="your/image/path.jpg class="your-image-class" />

Dann wird die CSS:

body,html { 
    height: 100%; 
    width: 100%; 
} 

.your-image-class { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

Quelle

2016-10-31 15:56:51

CSS Bildpositionierung nach Größe des Monitors unterschiedlich zeigt

Antwort

Verwandte Themen