Responsywne tło - nie rozumiem wszystkiego

pytanie zadane 27 czerwca 2016 w HTML i CSS przez niezalogowany

Witam, uczę się tworzyć responsywne strony, ale jeszcze nie wszystko rozumiem. Ogólnie mój kurs opiera wszystko na wzorze: target ÷ context = result Rozumiałem jego działanie i wszystko do momentu, kiedy miałem obliczyć rozmiar tła.

W moim kursie przedstawili to na dwóch kolumnach. Za zadanie miałem dodać tło jedynie do lewej kolumny, a context to była szerokość obu kolumn.

Niby logiczne, ale dla mnie bez sensu. Załużmy, że według wzoru wyszło mi 66%, ustawiam tak:

background: #F8F5F2 url("zdjecie.jpg") repeat-y 66% 0;

i plik "zdjecie.jpg" jest większy niż wymiary diva.

Jak ustawię losową wartość (np.50%), to nic się nie zmienia, po prostu zdjęcie się poziomem trochę przesuwa, ale wciąż jest responsywne.

Więc jaki jest sens liczenia result? Mam nadzieję, że ktoś rozumie moją zagwozdkę (bo ciężko mi to było wytłumaczyć). :)

komentarz 28 czerwca 2016 przez uRTLy Bywalec (2,420 p.)
przeniesione 28 czerwca 2016 przez uRTLy

Kompletnie Cie nie rozumiem.

background-color
background-image
background-repeat
background-attachment
background-position

Tu masz w kolejności właściwości background. Co chcesz tutaj liczyć tymi %?
Masz używać tej skali tylko po to aby na każdym ekranie div article czy co tam masz były w odpowiednich proporcjach więc używasz tego do do obliczania szerokości - ile % ma zajmować miejsca z tym że na małych urządzeniach po prostu dajesz elementom po 50% / 100% i obsuwają się one jeden pod drugi. Ale po co to robić jak ma się grida i flexboxa.
Podeślij linka do artykułu bo jestem ciekaw może ja cie nie zrozumiałem.

komentarz 28 czerwca 2016 przez niezalogowany

Przesyłam link do wersji PDF. http://www.tapan.am/files/Marcotte_E._-_Responsive_Web_Design_(A_Book_Apart_Brief_books_for_people_who_make_websites)_-_2011.pdf

Rozdział (FLEXIBLY TILED BACKGROUND IMAGES) się zaczyna:

Strona ksiażki: 54 strona

Strona dokumentu pdf: 61 strona

komentarz 28 czerwca 2016 przez uRTLy Bywalec (2,420 p.)
edycja 28 czerwca 2016 przez uRTLy

Książka jest z 2011 roku, my mamy 2016. Ja bym sobie nią głowy nie zawracal. Wpisz w Google "CSS 3 Responsive web design Best 2016 books" jeżeli koniecznie zależy Ci na książkach ale ja bym wolał zrobić kilka PSD,poczytać poradniki o gridzie i flexie czy tam filmiki, poczytać newsy jakieś , przeglądać codepena itd. Co do tła nie umiem Ci pomoc teraz bo na telefonie jestem

komentarz 28 czerwca 2016 przez Comandeer Guru (601,510 p.)

A co ma grid czy flex do tła?

komentarz 28 czerwca 2016 przez uRTLy Bywalec (2,420 p.)

Ja się odniosłem do nauki responsywnosci, napisałem na końcu.

komentarz 28 czerwca 2016 przez Comandeer Guru (601,510 p.)

A ja się odniosłem do Twojego 1. komentarza ;)

Masz używać tej skali tylko po to aby na każdym ekranie div article czy co tam masz były w odpowiednich proporcjach więc używasz tego do do obliczania szerokości - ile % ma zajmować miejsca z tym że na małych urządzeniach po prostu dajesz elementom po 50% / 100% i obsuwają się one jeden pod drugi. Ale po co to robić jak ma się grida i flexboxa.

komentarz 28 czerwca 2016 przez uRTLy Bywalec (2,420 p.)

Ja napisałem tam że nie rozumiem czemu policzony rozmiar tła wkładać do skrótu background a potem się odniosłem do tego :

Ogólnie mój kurs opiera wszystko na wzorze: target ÷ context = result Rozumiałem jego działanie i wszystko do momentu, kiedy miałem obliczyć rozmiar tła.

bla bla bla...

Więc jaki jest sens liczenia result? Mam nadzieję, że ktoś rozumie moją zagwozdkę (bo ciężko mi to było wytłumaczyć). :)

Ale też się czegoś nauczę i skorzystam jakby ktoś to wytłumaczył.

komentarz 28 czerwca 2016 przez Comandeer Guru (601,510 p.)

To nie jest rozmiar, a odległość obrazka od lewej strony wyrażona w proporcjach. Dzięki temu obrazek w każdej rozdzielczości będzie się wyświetlał w odpowiednim miejscu.