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

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.