• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Container über Bild "zur Seite raus verschwinden" SIEHE ANHANG-BILD

M

Miratek

Neues Mitglied
Hallo,

es lässt sich schlecht erklären. Ich habe ein Bild mit 1920px Breite, welches je nach Bildschirmbreite zusammengeschnitten wird, aber es ist immer so breit wie das Browserfenster.

Wie geht das:
Einen Div-Container links und rechts über dem Bild, siehe Anhangbild
Diese verschwinden bei zu kleinen Bildschirmen

SIEHE ANHANG-BILD
KonzeptHomepage1.jpg

Gruß Lukas

KonzeptHomepage1.jpg
 
Wie sieht denn dein Quellcode aus? Oder kann man besser noch das ganze unter einem Link anschauen?
 
Man erstellt einen Wrapper mit drei gefloateten Containern, die fixe Breiten in Pixeln, analog zu den Bildern besitzen. Alternativ zwei Media Queries mit Break Points bei 1280px und 970px, die links und rechts andere Bilder laden.
 
@djheke : das ist es fast, nur sollen die Bereiche links und rechts aus dem Bild verschwinden, nicht immer da bleiben und sich anpassen ;)
@Tronjer : Wie funktioniert das? Was sind Wrapper? Was sind Media Queries? Break Points?
 
Wrapper ist lediglich eine Umschreibung für einen umgebenden HTML-Container. Die Begriffe Media Query und Breakpoint gehören in die Kategorie CSS-Grundlagenwissen. Das musst du dir anlesen, bevor du eine responsive Seite baust.
 
Eine von mindestens zwei Lösungen. Wenn die Seiten keinen Inhalt haben sollen.
Code: 
<!doctype html>
<html>
<head>
<title>Beispielseite</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
* {
margin:0;
padding:0;
}
html  {
height:100%;
}
body {
height:100%;
background:url(tiger_bg.jpg) no-repeat center fixed;
}

main {
width:970px;
min-height:100%;
margin:auto;
border: 1px solid #000;
box-shadow:0 0 0 485px rgba(255,255,255,.5);
}

h1 { padding:10px;}
</style>

<body>
<main>
<h1>Inhalt</h1>
</main>
</body>
</html>
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben