CSS - Zablokowanie background image

CSS - Zablokowanie background image
Nindzia
Nindzia
Nindzia
Nindzia
  • Rejestracja:prawie 7 lat
  • Ostatnio:ponad 3 lata
  • Postów:255
0

Cześć, mam w projekcie background image, który wychodzi poza krawędzie viewportu - to zamierzone działanie, ponieważ chcę pokazać tylko część obrazka, jednak przy zmienianiu rozdzielczości okna przeglądarki pokazuje się więcej/mniej obrazka, co jest niepożądane.

Kopiuj
.slider {
    background-image: url("../images/background.png");
    background-size: 120%;
    background-position: 5% 40%;
    height: 100vh;
    position: relative;
    filter: brightness(50%);
}

Ktoś mógłby mi trochę pomóc z tym problemem? Trochę utknąłem

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
czysteskarpety
czysteskarpety
czysteskarpety
czysteskarpety
  • Rejestracja:około 10 lat
  • Ostatnio:ponad 4 lata
  • Lokalizacja:Piwnica
  • Postów:7697
1

Powalcz z media queries: https://developer.mozilla.org/pl/docs/Web/CSS/Media_Queries/Using_media_queries
a jak coś zostanie to pomyślimy.

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Freja Draco
Freja Draco
Freja Draco
Freja Draco
  • Rejestracja:około 7 lat
  • Ostatnio:ponad 3 lata
  • Postów:3394
2

W przypadku body, mógłbyś zrobić coś takiego:

Kopiuj
BODY {
  background-size:100% auto;
}

@media (max-aspect-ratio: 1920/1080) {
  BODY {
    background-size:auto 100%;
  }
}

Tylko tam sobie przestaw na 120% i dobierz aspect-ratio odpowiedni dla proporcji swojego obrazka.
Natomiast obawiam się, że nawet powyższe może zachowywać się dziwnie, jeśli dodasz do tego: background-position: 5% 40%;

edytowany 1x, ostatnio: Freja Draco
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj

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.

Utwórz konto