Pozycja tła

0

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

Tło wygląda tak:
bg

CSS wygląda tak: ```

.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)
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ą?

0

Faktycznie problemem jest

 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ć:

  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.

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

0

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

Dodając

  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

2
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.]

0

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

.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ć

 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.

1 użytkowników online, w tym zalogowanych: 0, gości: 1