Pozycja tła

CO
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 73
0

Cześć, mam problem z pozycją tła na headerze.

Tło wygląda tak:
bg

CSS wygląda tak: ```

Kopiuj
.header
 {
  height: 700px;
  background: url("../images/header/header.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
```
Edit:
Na desktopie też nie wyśrodkowuje w osi pionowej.

![example](https://zapodaj.net/images/036db6ad2db87.png)
Silv
  • Rejestracja: dni
  • Ostatnio: dni
  • Lokalizacja: Warszawa
0

Wydaje mi się, że za odpowiednie wyśrodkowanie jest odpowiedzialna u Ciebie deklaracja background-attachment: fixed; – ale nie wiem, co ona ma dokładnie robić, nie używałem jej. Co chcesz osiągnąć za jej pomocą?

CO
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 73
0

Faktycznie problemem jest

Kopiuj
 background-attachment: fixed;

Ale chciałbym uzyskać taki efekt, jaki własnie daje ta opcje tylko żeby, startowa pozycja tła w tym headerze była wyśrodkowana w pionie.

Edit:
Mógłbym uzyć:

Kopiuj
  background-position: center 100%;

Ale nie wiem czy jest to dobre rozwiązanie bo nie na kazdym urządzeniu się poprawnie wyświetla, chociazby na iPad Pro, wtedy musiałbym dodać media queries.

Freja Draco
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 3394
0

Nie rozumiem, jaki efekt chcesz uzyskać.
Weź to zwizualizucj graficznie.

Zerknij też na:
https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=initial

CO
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 73
0

@Freja Draco:
Moze dam ci po prostu link do tej strony: Strona

Dodając

Kopiuj
  background-position-y: 100%;

Uzyskałem efekt jaki chciałem, lecz nie na kazdym urządzeniu sie to dobrze wyświetla, włącz podgląd na iPadPro

Freja Draco
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 3394
2
Kopiuj
background-attachment: fixed;

Powoduje, że położenie tła liczone jest względem strony. Zatem musisz sobie je poprzeliczać, żeby wtórnie trafić w obszar headera.

[W dalszej części wkleiłam blędny kod, który usuwam.]

Freja Draco
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 3394
0

Jedyne, co udało mi się uzyskać, to coś takiego:

Kopiuj
.header {
  border:1px solid red;
  height: 700px;
  background: url("header.png");
  background-size: auto calc(700px + 160px);
  background-position: center -80px;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

Jeżeli chcesz do tego dodać

Kopiuj
 background-size:cover;

to będziesz potrzebować JS-a, który to policzy i aktywnie skoryguje położenie tła.
calc() niestety nie pozwala na dzielenie hv przez px i wyznaczanie sobie proporcji wartości.

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.