Kasko - Mo 07.10.19 21:22
Titel: Center Fixed Background
Servus,
ich möchte einen Header mit einem fixen Hintergrund erstellen. Dafür habe ich folgende Eigenschaften definiert:
Cascading Style Sheet
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
| header {
margin: 0;
padding: 0;
width: 100%;
height: 300px;
display: block;
background-image: url('...');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
} |
Folgendes Problem habe ich jetzt. Momentan wird der Hintergrund gemäß der Screen-Width und -Height zentriert. Da sich der Header natürlich am oberen Rand befindet, ist der tatsächliche Hintergrund des Headers auch nur der obere Rand des Bildes. Zudem verändert sich der Header-Ausschnitt jedes mal wenn man die Screen-Height verändert, was nicht mein Ziel ist.
Ich möchte, dass das Bild innerhalb des Headers zentriert wird (Mittelpunkt des Bildes ist im Mittelpunkt des Headers). Zudem soll sich dadurch der Header-Bildausschnitt erst dann verändern wenn man die Header-Width oder -Height setzt und nicht wenn die Screen-Height geändert wird.
Anmerkung: Sobald man scrollt sollen die Mittelpunkte natürlich nicht mehr übereinstimmen. Es geht darum, dass sie übereinstimmen, wenn man ganz nach oben gescrollt hat (Header ist nicht fixed und scrollt mit)
Kasko - Di 08.10.19 21:49
Schade, dass niemand geantwortet hat :(
Hier die Lösung des Problems.
1. Durch calc() den Mittelpunkt verschieben:
Cascading Style Sheet
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
| header {
margin: 0;
padding: 0;
width: 100%;
height: 300px;
display: block;
background: url('...');
background-repeat: no-repeat;
background-size: cover;
background-position: 50% calc(50% - (50vh - 150px));
} |
Problem: Wenn man einen gewissen Höhenwert (des Screens) überschreitet, verändert sich trotzdem der Viewport (es wird reingezoomt).
2. position: fixed mit z-index:
Background in eigenen Container auslagern:
Cascading Style Sheet
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
| .fixed-background {
margin: 0;
padding: 0;
position: fixed;
top: 0;
right: 0;
bottom: calc(100vh - 300px);
left: 0;
background-image: url('...');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
z-index: -1;
}
header {
margin: 0;
padding: 0;
width: 100%;
height: 400px;
display: block;
background: none;
} |