nicht angemeldet
Rolf BHallo Joseba,
es ist nicht wirklich sinnvoll, 767 Pixel durch 16 zu teilen und dann 47.9375em als Breitenangabe zu setzen. 1em = 16px ist NICHT garantiert!
Bei Bildern, deren natürliche Größe in Pixeln gerechnet wird, ist es nach meiner Auffassung aber auch durchaus sinnvoll, die Media-Query in Pixeln durchzuführen. Oder verstehe ich da was falsch, @Gunnar Bittersmann ?
Zu deiner Frage: Das picture Element ist dazu da, einem <img> Element eine Möglichkeit für Medienabfragen zu geben. <img> ist aber nicht für Hintergrundbilder da, sondern für Bilder, die Teil des Inhalts sind. Ein <img> Element hat eventuell Margin oder Padding. Ein <header> Element auch. Und dadurch entsteht dein leerer Raum.
Ich glaube, in deinem Header möchtest Du einen Hintergrund verwenden, der mit CSS gesetzt wird.
Für Dinge, die über CSS eingestellt werden, sind Media-Queries bereits als Teil von CSS vorhanden. Das geht so:
header {
background-image: url('Bilder/night_smartphone.JPG');
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
header {
background-image: url('Bilder/night.JPG');
}
}
D.h. du setzt night_smartphone.JPG als normalen Hintergrund, und wenn der Bildschirm breit genug ist, ersetzt Du das durch night.JPG.
Bitte denke daran, dass diese Abfragen nur richtig funktionieren, wenn Du im <head>-Bereich des HTML
<meta name="viewport" content="width=device-width, initial-scale=1">
stehen hast. Ohne diese Angabe simuliert der Smartphone-Browser einen Desktop-Bildschirm, der 900-1000 Pixel breit ist.
Rolf
sumpsi - posui - clusi
Gunnar Bittersmann
Matthias Apsel
Tabellenkalk