Ich möchte das die graue Contentbox auf dem Beispielbild, das Hintergrundbild des Headers überlagert.
Wie kann ich das erreichen ?
Ich möchte das die graue Contentbox auf dem Beispielbild, das Hintergrundbild des Headers überlagert.
Wie kann ich das erreichen ?
Zeig uns doch mal deinen Code oder Link zur Seite.
Verstehe ich das richtig , das du den grauen Content über das Bild gelegt haben willst ?
Der Code ist noch gar nicht vorhanden.
Genau ich möchte, dass der graue Bereich über dem Hintergrundbild liegt. Das wären also zwei Divisionen welche einander überlagern.
Das geht einfach mit Flexbox (display: flex). Ich gehe davon aus, dass sich der Header und die graue Content-Box direkt im body-Bereich befinden. Zum Beispiel:
Die -200px musst du natürlich deinen Wünschen anpassen.
Dankeschön, das hat funktioniert
Der Footer meines derzeitigen Projektes beinhaltet eine Hintergrundgrafik und eine halbtransparente Grafik welche die Hintergrundgrafik überlagert. Nun möchte ich diese zweite Grafik unten ausrichten. Aber weder mit Position noch mit Flex funktioniert das.
#footer {
position: relative;
height: 612px;
background-image: url(images/footer_background_1.png);
background-repeat: no-repeat;
background-size: cover;
}
#footer_background {
position: absolute;
bottom: 0;
height: 293px;
background-image: url(images/footer_background_2.png);
background-repeat: no-repeat;
background-size: cover;
}
Alles anzeigen
Leider schreibst Du nicht, was denn genau nicht funktioniert. Dein CSS funktioniert bei mir einwandfrei, wenn ich eine Testdatei anlege. Ich musste lediglich einen main-Bereich hinzu fügen, um den Footer nach unten zu bekommen und dem überlagerten, absolut positionierten, die Breite 100% geben, damit er sichtbar wird.
Gibt sicher auch andere Varianten, mit Flex ginge es auch, wenn man die überlagerte Grafik nicht absolut positioniert.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Footer multiple background</title>
<style>
html,
body {
height: 100%;
}
body {
margin: 0;
display: flex;
flex-direction: column;
}
main {
flex: 1;
}
#footer {
flex: 0 0 auto;
position: relative;
height: 612px;
background-image: url(images/dia0.jpg);
background-repeat: no-repeat;
background-size: cover;
}
#footer_background {
position: absolute;
bottom: 0;
height: 293px;
width: 100%;
background-image: url(images/busleft.png);
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<main>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore
magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit
amet.
</main>
<footer id="footer">
<div id="footer_background"></div>
</footer>
</body>
</html>
Alles anzeigen
Anbei mal der ganze Code
Ich möchte, dass die Hintergrundgrafik von #footer_background unten am Rand anliegt. Bei dem Code wird die Grafik gar nicht angezeigt.
#footer_background liegt in der DIV #footer.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background-color: #000;
background-image: url(images/background.png);
background-repeat: repeat;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 500;
color: #fff;
}
#navigation {
background-image: url(images/navigation.png);
height: 80px;
}
#header {
background-image: url(images/header.png);
background-repeat: no-repeat;
background-size: cover;
height: 612px;
}
#wrapper {
width: 900px;
margin: 0 auto;
margin-top: -300px;
margin-bottom: -200px;
display: flex;
flex-direction: row;
}
#wrapper_right {
width: 75%;
min-height: 900px;
display: flex;
flex-direction: column;
background-image: url(images/background_content.png);
background-repeat: repeat-y;
}
#wrapper_right_top {
height: 19px;
background-image: url(images/background_content_top.png);
background-repeat: no-repeat;
}
#wrapper_left {
width: 25%;
min-height: 600px;
margin-left: 20px;
background-image: url(images/sidebar.png);
background-repeat: repeat-y;
}
#footer {
height: 612px;
background-image: url(images/footer_background_1.png);
background-repeat: no-repeat;
background-size: cover;
}
#footer_background {
position: absolute;
bottom: 0;
height: 293px;
background-image: url(images/footer_background_2.png);
background-repeat: no-repeat;
background-size: cover;
}
Alles anzeigen
Es hat funktioniert aber jetzt ist ein größerer Abstand zwischen dem unterem Rand des Bildschirmes und der Grafik. Ich verstehe nich wodurch dieser verursacht wird. Aus irgendeinem Grund wird durch diesen Zusatz das margin-bottom: -200px; des #Wrappers ignoriert.
<html>
<!-- head -->
<head>
<title></title>
<!-- meta -->
<!-- meta -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="style.css" media="all" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<!-- head -->
<body>
<div id="header">
<div id="navigation"></div>
</div>
<div id="wrapper">
<div id="wrapper_right">
<div id="wrapper_right_top"></div>
</div>
<div id="wrapper_left"></div>
</div>
<div id="footer">
<div id="footer_background"></div>
</div>
</body>
</html>
Alles anzeigen
Da musst Du dem #footer noch ein position: relative; verpassen, damit der überlagerte Container relativ zu diesem ausgerichtet wird (so wie Du es in deinem Posting #5 schon hattest):
#footer {
position: relative;
height: 612px;
background-image: url(images/dia0.jpg);
background-repeat: no-repeat;
background-size: cover;
}
#footer_background {
width: 100%;
position: absolute;
bottom: 0;
height: 293px;
background-image: url(images/busleft.png);
background-repeat: no-repeat;
background-size: cover;
}
Alles anzeigen
Danke, das habe ich gemacht aber die beiden Probleme bestehen weiterhin.
#footer_background hat einen größeren Abstand zu unterem Bildschirmrand ist aber dennoch fast richtig ausgerichtet.
Das margin-bottom: -200px; vom #wrapper wird ignoriert und bei diesem Design ist es wichtig, dass der wrapper Header&Footer überlagert.
ZitatDas margin-bottom: -200px; vom #wrapper wird ignoriert
Bei mir wird es nicht ignoriert sondern der überlagerte Teil des #wrapper verschwindet unter dem #footer weil #footer nach dem #wrapper notiert wird. Gib dem #wrapper einen hohen z-index und ein position: relative; :
#wrapper {
width: 900px;
margin: 0 auto;
margin-top: -300px;
margin-bottom: -200px;
display: flex;
flex-direction: row;
z-index: 100;
position: relative;
}
Zitat#footer_background hat einen größeren Abstand zu unterem Bildschirmrand ist aber dennoch fast richtig ausgerichtet.
Das kann ich auf meiner Testseite nicht nachvollziehen.
Das hat funktioniert :))))))
Dankeschön.
html-seminar.de/woltlab/attachment/2649/
Den Abstand unten meine ich.
Auf deinem Screenshot sehe ich den Abstand aber bei mir tritt er nicht auf. Kannst Du das online stellen und die URL posten?
Welchen Browser benutzt Du, möglicher Weise hat dieser andere Default-Werte als meiner (Opera)?
http://pathologicalplay.bplaced.net/test_design/
Ich habe das mit dem neusten FF+Opera und diesem neuen IE Ding getestet.
Sehr gut, auf diese Weise kommen wir weiter.
Das ist kein Problem des CSS sondern die Grafik selber hat unten einen transparenten Bereich, wo der Hintergrund des #footer durchscheint:
Das ist mir gar nicht aufgefallen. Vielen vielen Dank
BTW: Inzwischen gibt es semantische Tags wodurch das Ganze übersichtlicher werden würde:
https://wiki.selfhtml.org/wiki…TML5/Seitenstrukturierung
Zur Verwendung empfohlen!
Werde ich mir aneignen
Danke für den Tipp.
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!
HTML-Seminar.de - mit Videos zum schnellen Lernen, wie man eine Website selbst erstellt.