Ankündigung

**MrMurphy** · 17.01.2022, 12:08

Das geht mit Media Queries.

Hintergrundbilder sind aber seit über 20 Jahren eher out, deshalb sind die Möglichkeiten eingeschränkt und werden auch nicht weiter entwickelt. Kurz: Große Hintergrundbilder, speziell hinter Text, nerven deine Besucher nur. Viele Browser gehen mit der unterschiedlichen Auswahlmöglichkeit von Hintergrundbildern deshalb auch fahrlässig um - sprich: Das funktioniert nicht immer.

Ähnlich ist das von dir verwendete XHTML bereits vor über 10 Jahren offiziell begraben worden. Wenn du Media Queries verwenden willst solltest du gleichzeitig auf HTML5 und CSS3 umsteigen.

**Localfu** · 17.01.2022, 17:31

Moin Gnosius,
jetzt muss ich auch ein paar Worte schreiben. Hintergrundbilder sind weiterhin kein Problem und können weiterhin verwendet werden. Und mithilfe von object-fit und object-position kannst du auch auf Elemente wie DIV-Elemente Hintergrundbilder anpassen. Hintergrundbilder funktionieren immer, wenn diese richtig eingebunden wurden --> Quellenangaben, etc. Das Hintergrundbild-Modul wurde sogar vom W3C erst im Juli weiterentwickelt.

Zu Media-Queries: Media-Queries bieten die Möglichkeit auf bestimmte Ausgabe-Eigenschaften an das anzeigende Endgerät anzupassen. Dazu gehört auch die Breite des Anzeigebereiches auch Viewport genannt.

So sieht der Einsatz von Media-Queries aus:

Code:

@media screen and (max-width: 599px) {
body {
background-image: url('kleinesBild.jpg');
}

}
@media screen and (min-width: 600px) {
body {
background-image: url('grossesBild.jpg');
}
}

Im oberen Media-Query wird bei einer maximalen breite bis 599 Pixel das kleinere Bild als Hintegrund hinterlegt. Im unteren Media-Query wird das große Bild bei einer minimalen Breite von 600 Pixel in der Breite dann angezeigt. Sprich also ab 600 Pixel kommt das große Bild davor nur das Kleine.

Mithilfe von der CSS Eigenschaft 'background-position' und 'background-size' kannst du zusätzlich bestimmen wie und wo das Bild im Hintergrund gezeigt wird. Mithilfe von 'background-repeat' kannst du verhindern dass es 'gekachelt' wird.

Gruss Localfu

**Localfu** · 17.01.2022, 17:37

Gnosius Verwende doch in zukunft den neuen HTML5-Standard. Weil das Feature Media-Queries für HTML5-Standard gedacht ist.

Hier ein Beispiel:

HTML-Code:

<!DOCTYPEhtml>
<htmllang="de">
<head>
    <metacharset="UTF-8">
    <metahttp-equiv="X-UA-Compatible"content="IE=edge">
    <metaname="viewport"content="width=device-width, initial-scale=1.0">
    <title>Dein Titel</title>
</head>
<body>
    Hier dein Inhalt
</body>
</html>

Gruss Localfu

**Sempervivum** · 18.01.2022, 21:14

Du kannst auch die Orientierung, Hoch- oder Querformat mit einer Mediaquery abfragen:

Code:

@media (orientation: landscape) {
    body { background-image: url(images/bg-landscape.jpg); }
}
@media (orientation: portrait) {
    body { background-image: url(images/portrait.jpg); }

**Gnosius** · 19.01.2022, 16:07

Vielen Dank an alle, ich habe versucht, die Tipps mit meinen linken Händen umzusetzen.....

Der Text beginnt jetzt so...:

<!DOCTYPEhtml>
<htmllang="de">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Titel</title>

<style type="text/css">
.auto-style1 {
text-align: center;
}
.auto-style2 {
color: #7FDBFC;
}
.auto-style3 {
margin-left: 267px;
margin-top: 26px;
margin-bottom: 0px;
}
.auto-style4 {
font-size: x-large;
font-family: "Belwe Bd BT";
}
.auto-style6 {
margin-left: 32px;
}
.auto-style7 {
color: #B2E7FA;
font-size: xx-large;
}
.auto-style8 {
font-family: "Belwe Bd BT";
}
</style>
</head>

<body>

@media (orientation: landscape) {
body { background-image: url('Hintergrund.jpg'); }
}
@media (orientation: portrait) {
body { background-image: url('Hintergrund-schmaler.jpg'); }

<p class="auto-style1">
<a href="https://products.hasb..................
..................

Jetzt bekomme ich allerdings einen weißen Hintergrund angezeigt, wo oben ein Teil des html-Texts steht: (@media {orientation...... bis .....schmaler.jpg');]

Darunter dann die Schaltflächen.
Könnte nochmal jemand über die Syntax schauen?

**Sempervivum** · 19.01.2022, 16:23

Das hätte ich dazu schreiben sollen: Was Du da unerwünschter Weise siehst, ist CSS und gehört in die <style> Tags, also aus dem <body> löschen und dort hinzu fügen:

Code:

/* alles was darüber steht wie bisher */
.auto-style8 {
font-family: "Belwe Bd BT";
}
@media (orientation: landscape) {
body { background-image: url('Hintergrund.jpg'); }
}
@media (orientation: portrait) {
body { background-image: url('Hintergrund-schmaler.jpg'); }</style>
</head>

<body>

Außerdem fehlt hier ein Leerzeichen zwischen doctype und html, so muss es aussehen:

Code:

<!DOCTYPE html>

**Ingo** · 19.01.2022, 17:31

Hi,
nach DOCTYPE und meta fehlt ein Leerzeichen.
Bei font-family mindestens eine gererische Angabe wie serif hinzufügen.
Statt .auto-style mit Nummern würde ich "sprechende" Namen wählen.

Gruß
Ingo

**Gnosius** · 19.01.2022, 17:44

So, habe ich erledigt:

<!DOCTYPE html>
<htmllang="de">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Titel</title>

<style type="text/css">
.auto-style1 {
text-align: center;
}
.auto-style2 {
color: #7FDBFC;
}
.auto-style3 {
margin-left: 267px;
margin-top: 26px;
margin-bottom: 0px;
}
.auto-style4 {
font-size: x-large;
font-family: "Belwe Bd BT";
}
.auto-style6 {
margin-left: 32px;
}
.auto-style7 {
color: #B2E7FA;
font-size: xx-large;
}
.auto-style8 {
font-family: "Belwe Bd BT";
}
@media (orientation: landscape) {
body { background-image: url('Hintergrund.jpg');background-size: 100% 100%"}
}
@media (orientation: portrait) {
body { background-image: url('Hintergrund-schmaler.jpg'); }

</style>
</head>

<body>

<p class="auto-style1">
<a href="https://products.ha......
...

auf dem PC-Monitor zeigte er mir, wie ganz zuvor, das Hintergrundbild einaml ganz an und dann am rechten Rand nochmal ca. 3cm.

Auf dem Handy zeigt er nun hochkant einen weißen Hintergrund und wenn ich es drehe, wird das Hintergrundbild angezeigt, aber nur ca. 60%. Wenn ich es wieder drehe, wird es weiß.
Das " ;background-size: 100% 100%" .....bei landscape habe nachträglich ich zum Test hinzugefügt, da das bei der separaten PC-Version, die ich habe, gut funktioniert. Da wird das Hintergrundbild genau einmal angezeigt.
Hier ändert sich aber nichts.

**Sempervivum** · 19.01.2022, 18:49

Bei dem

Code:

background-size: 100% 100%"

muss das Gänsefüßchen durch ein Semikolon ersetzt werden.
Und bei portrait fehlt die letzte schließende Klammer.
Mit diesem CSS sieht es bei mir ganz gut aus:

Code:

        @media (orientation: landscape) {
            body {
                background-image: url(images/bild3.jpg);
                background-size: 100% 100%;
            }
        }
        @media (orientation: portrait) {
            body {
                background-image: url(images/burgtor_01.jpg);
            }
        }

**Gnosius** · 19.01.2022, 20:19

Ja, das war's. PC jetzt super, Smartphone hochkant auch. Smartphone (S20 ultra) quer: zeigt noch 1 cm von der nächsten Kachel an. Warum er da nicht auf 100% streckt weiß ich nicht. Vielleicht weil das Bild 1670 breit x 1880 hoch ist (unten abgeschintten ist ok). Das S20 hat 1440x3200 Pixel, läuft bei mir aber auf 2400x1080. Vieleicht liegt es daran.

**Localfu** · 19.01.2022, 23:07

Moin Sempervivum,
verwende doch bitte mal bitte:

Code:

@media (orientation: landscape) {
body {
background-image: url('images/bild3.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
}

@media (orientation: portrait) {
body {
background-image: url('images/burgtor_01.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
}

Ich glaube das bringt dich weiter...

Gruss Localfu

Ankündigung

Mobile und Desktop-Version kombinieren

Mobile und Desktop-Version kombinieren

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

homepage-forum.de - Hilfe für Webmaster! Statistiken

Online-Benutzer

Die neuesten Themen

Die neuesten Beiträge