Autor Beitrag
Kasko
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starontopic star
Beiträge: 126
Erhaltene Danke: 1

Win 10
C# C++ (VS 2017/19), (Java, PHP)
BeitragVerfasst: Mo 07.10.19 20:22 
Servus,

ich möchte einen Header mit einem fixen Hintergrund erstellen. Dafür habe ich folgende Eigenschaften definiert:

ausblenden Cascading Style Sheet
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
header {
    margin0;
    padding0;
    width100%;
    height300px;
    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 Threadstarter
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starontopic star
Beiträge: 126
Erhaltene Danke: 1

Win 10
C# C++ (VS 2017/19), (Java, PHP)
BeitragVerfasst: Di 08.10.19 20:49 
Schade, dass niemand geantwortet hat :(

Hier die Lösung des Problems.

1. Durch calc() den Mittelpunkt verschieben:

ausblenden Cascading Style Sheet
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
header {
    margin0;
    padding0;
    width100%;
    height300px;
    display: block;
    background: url('...');
    background-repeat: no-repeat;
    background-size: cover;
    background-position50% 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:

ausblenden 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 {
    margin0;
    padding0;
    position: fixed;
    top0;
    right0;
    bottom: calc(100vh - 300px);
    left0;
    background-image: url('...');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    z-index: -1;
}

header {
    margin0;
    padding0;
    width100%;
    height400px;
    display: block;
    background: none;
}