Jak prawidłowo zmieścić background image w @media css?

Question

Witajcie,

na stronie wszystko wyświetla się prawidłowo, jednak na telefonie obrazy wychodzi poza ekran i nie jest do niego doskalowany. Mam kilka obrazków, które zmieniają się wraz z przewijaniem dół/góra.

Jak dopasować je w @media?

<section id="banner" class="bg-img" data-bg="image.jpg">
				<div class="inner">
					<header>
						<h1>TEST</h1>
					</header>
				</div>
				<a href="#first" class="more">Learn More</a>
			</section>

i adekwatnie kolejne <section> poniżej.

Mam w tym kodzie przycisk dalej 

<a href="#first" class="more">Learn More</a>

który również widać tylko w połowie przy dolnej części ekranu telefonu.

Czy każdy element trzeba skalować osobno czy po prostu da się wszystkie dopasować do telefonu ustawiając jakiś jeden ogólny kod?

Answer 1

Najwygodniej by było, gdybyś kod umieścił na codepen. Czy masz dodany viewport w head? Jeżeli tak, czy ustawiałeś wartość background-size?

Comments

Tak, mam.

Ustawiłem w @media,

#body {
    background-size: cover;
  }

ale nie działa.

---

Ustawiłeś styl dla identyfikatora, a nie znacznika. Spróbuj usunąć znak "#".

---

Zmieniłem, również nie działa.

---

Udostępnij kod w obecnej formie na codepen, zobaczymy co i jak :D

---

https://codepen.io/KubsKuba/pen/poRVwYb

---

Huh, ciężki trochę ten kod.. Ja to bym chyba napisał od nowa. Widzę atrybut data-bg, ale nie jest on nigdzie wykorzystywany. Nie widzę w CSS również ustawiania tła. Style dla znaczników pomieszane z klasami...

 

Na szybko klepnąłem rozwiązanie podobne do twojego, okrojone z zbędnego cssa. Kod HTML nadal jest do poprawy. W miejsce atrybutów HTML użylem zmiennych CSS.

Link: https://codepen.io/radek024/pen/QWdrMgd

---

Tak, ten mój kod jest trochę chaotyczny.

A jak twój można zaaplikować dla telefonów?

---

Chcesz aby jedna grafika była na pełnym ekranie komórki tak? Jeżeli tak, to jest to zrobione z definicji, ponieważ klasa bg-img zajmuje 100% viewportu pod kątem wysokości.

---

Pomału coś działa. I teraz tak:

bg-img wciąż zajmują u mnie więcej niż ekran, zarówno na wysokości jaki i szerokości.

przycisk more wciąż jest za nisko.

i zmiana czcionki

#banner h1 {
    font-size: 10vw;
    font-family: "Fondamento", cursive;
  }

w ogóle nie zadziałała. Używam tą samą co jest w przeglądarce.

---

Masz marginesy, paddingi, jakieś bordery - stąd taka sytuacja. Użyj box-sizing:border-box. Dzięki temu całość będzie zawierała przestrzeń, ale w ramach dostępnego miejsca, a nie zajmowania nowego.

Nie widzę, abyś gdziekolwiek załączał czcionkę, więc nie ma pewności, że zostanie załadowana.

---

czyli

.body{
    box-sizing: border-box;
  }

?

---

Odnoszę wrażenie, że nie masz zbyt dużo wiedzy na temat CSS. Zachęcam Cię do przeczytania następujących artykułów:

• https://radek024.github.io/blog/strony-www/css/2017/05/26/klasa_id_tag/
• https://radek024.github.io/blog/css/strony-www/bykiwkodzie/2017/06/30/css-shorthands/
• https://radek024.github.io/blog/bykiwkodzie/strony-www/css/2018/08/03/position-w-css/
• https://radek024.github.io/blog/bykiwkodzie/css/strony-www/2020/01/03/css-specificity/

W szczególności pierwszy i ostatni link będzie przydatny dla Ciebie teraz. 

Znajdź odpowiedni selektor i to mu nadaj właściwość border-box.

---

Ok, doczytam.

Mam tą czcionkę w:

#banner h1 {
  font-size: 7em;
  line-height: 1.1;
  font-family: "Fondamento", cursive;
  margin-bottom: 0.25em;
  color: rgba(255, 255, 255, 0.75);
  text-shadow: -2px -2px 0 rgba(0, 0, 0, 0.125);
  text-transform: none;
  letter-spacing: 20px;
}

ale gdy używam

@media screen and (max-width: 400px) {
  #banner h1 {
    font-size: 10vw;
  }
}

to w ogóle pojawia się jakaś inna niż na stronie

---

Nie widzę, abyś gdziekolwiek załączał czcionkę, więc nie ma pewności, że zostanie załadowana.

W font-family można wpisać jakąkolwiek nazwę, ale to nie jest dołączenie czcionki, a jej użycie. Na podstawie czego jej używasz? Masz dołączone Google Fonts, jest dostępna systemowo, może posiadasz gdzieś dołączone jej pliki do katalogu strony? Jest dużo możliwości. 

---

Tak, mam ją podlinkowaną w <head> i na stronie działa. Ale już w @media nie.

---

A to jeszcze o tym poczytaj: https://radek024.github.io/blog/css/strony-www/bykiwkodzie/2017/06/30/css-shorthands/#font

Może gdzieś przypadkiem używasz pełnej właściwości i stąd jest problem z czcionką. Jak pisałem, kod zarówno CSS i HTML z mojej perspektywy jest do przepisania, trudno się w nim odnaleźć.

---

Dzięki. Doradź jeszcze proszę na koniec jak zrobić by w @media nie pojawiał się żaden wcześniejszy kod z CSS? Po prostu zamiast poprawiać taką pajęczynę, wrzucę do @media jeden osobny obrazek, żeby cokolwiek wisiało i tyle.

---

Takie podejście jest złe. Rozwijanie takiego CSSa może być bardzo trudne. Co do tła możesz rozwiązać problem stosując wstawienie tła na sztywno, a nie na podstawie zmiennej CSS.

---

Jak to zrobić dla @media?

---

@radek024,

Witaj Radek, 

według twoich wskazówek zrobiłem porządek w CSS. Wciąż jednak nic na telefonie nie dopasowuje się do jego rozmiaru. Co tu zmienić?

https://codepen.io/KubsKuba/pen/bGgKGbj

---

Co się nie dopasowuje? Wklejka na codepenie nie wykazuje, aby jakiś element się wysypywał.

Answer 2

https://css-tricks.com/perfect-full-page-background-image/

Powodzenia

Comments

Kurczę, to jak tonącego wepchnąć na głębszą wodę :)

Pomóż z kodem chociaż trochę :)

---

Witaj ponownie,

próbuje wyskalować image do rozmiarów telefonu. Jak to złapać w @media?

 

<section id="banner" class="bg-img" data-bg="image.jpg">

#banner .bg-img oraz #banner .data-bg  nie działa.