• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jak złapać background image w @media

VPS Starter Arubacloud
+1 głos
248 wizyt
pytanie zadane 15 kwietnia 2021 w HTML i CSS przez Kubs Mądrala (5,190 p.)

Witajcie,

chcę w @media dopasować image (background). Na stronie obecnie wczytawny jest tak:

<section id="banner" class="bg-img" data-bg="image.jpg">
				<div class="inner">
					<article class="box">
						........

					</article>
				</div>
			</section>

Ale jak go złapać w @media? Próbuję np. #banner .bg-img, ale to chyba nieprawidłowo.

2 odpowiedzi

+1 głos
odpowiedź 15 kwietnia 2021 przez niezalogowany
<section id="banner" class="bg-img" data-bg="image.jpg">
                <div class="inner">
                    <article class="box">
                        Keep calm and do not stop keep on coding 
 
                    </article>
                </div>
            </section>
#banner {
  width: 100%;
  height:  100vh;
}

.box {
  display: none;
}


@media screen and (max-width: 600px) {
  .bg-img{
    background-color: red;
    
  }
  .box {
    display: inline-block;
    color: #fff;
    font-size: 6vw;
  }
}

 

1
komentarz 15 kwietnia 2021 przez Kubs Mądrala (5,190 p.)
Dziękuję :)
1
komentarz 15 kwietnia 2021 przez niezalogowany

Nie ma za co winkyes

0 głosów
odpowiedź 15 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

#banner .bg-img

Ten selektor szuka elementów o klasie bg-img wewnątrz elementu o id banner. U Ciebie oba te atrybuty są użyte na jednym elemencie, więc po prostu usuń spację w tym selektorze.

Natomiast jeśli chcesz dynamicznie przekazać wartość z atrybutu data-bg do stylu background-image w CSS, to teoretycznie możesz posłużyć się funkcją attr, ale ona ma dość eksperymentalne wsparcie przeglądarek dla użyć innych niż content w pseudo elementach. Jeśli więc taki jest Twój zamiar, to możesz JS-em wrzucić wartość atrybutu data-bg w zmienną CSS i na niej operować w CSS przy ustawianiu background-image.

komentarz 15 kwietnia 2021 przez Kubs Mądrala (5,190 p.)

Dziękuję,

wstawiłem tak, ale nie działa

@media screen and (max-width: 600px) {
#banner.bg-img {
    background-image: url("images/image.jpg");
  }

}

 

komentarz 15 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)
Czy sprawdzasz to na szerokości ekranu mniejszej niż 600px? Czy ścieżka do obrazka jest prawidłowa?
komentarz 15 kwietnia 2021 przez Kubs Mądrala (5,190 p.)
edycja 15 kwietnia 2021 przez Kubs
Tak, bo wyświetla mi obraz, ale nie jest wyskalowany. Wychodzi poza ekran. Jak to poprawić?
komentarz 15 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Pobaw się stylem background-size.

komentarz 15 kwietnia 2021 przez Kubs Mądrala (5,190 p.)

Fajnie to wygląda, ale chyba lepiej będzie bez image bo rozciąga mi ten obraz i źle to wygląda.

Jak wyłączyć background w @media?

komentarz 15 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Ustawić mu wartość none.

komentarz 15 kwietnia 2021 przez Kubs Mądrala (5,190 p.)
#banner.bg-img {
    background-image: none;
  }

Ale wciąż się pojawia.

Próbuję też wyłączyć orientacje poziomą. Wiesz może jak?

 

komentarz 15 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Ale wciąż się pojawia.

Pokaż więcej kodu - może coś innego nadpisuje ten styl.

Próbuję też wyłączyć orientacje poziomą. Wiesz może jak?

W jakim sensie i celu? Btw. to już jest pytanie na osobny wątek.

komentarz 15 kwietnia 2021 przez Kubs Mądrala (5,190 p.)
Z drugiej strony.. masz racje :)

Dziękuję jak zwykle za pomoc.

Podobne pytania

0 głosów
2 odpowiedzi 308 wizyt
pytanie zadane 14 kwietnia 2021 w HTML i CSS przez Kubs Mądrala (5,190 p.)
0 głosów
4 odpowiedzi 455 wizyt
pytanie zadane 13 czerwca 2022 w HTML i CSS przez zbiku25 Bywalec (2,940 p.)
+1 głos
1 odpowiedź 292 wizyt
pytanie zadane 29 maja 2021 w HTML i CSS przez bazyl8796 Obywatel (1,020 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...