Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA PGF4 - WRZESIEŃ 2014


PYTANIE NR 29.
Która z poniższych deklaracji CSS wyświetli obraz 'kolo.png' powtarzający się poziomo w jednym rzędzie na zielonym tle, jak na ilustracji?
Ilustracja przedstawia elementy graficzne związane z zadaniem egzaminacyjnym dotyczącym wyświetlania obrazu 'kolo.png' w
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Poprawna deklaracja używa background-repeat: repeat-x, co powoduje powtarzanie obrazu tła wyłącznie w osi poziomej, tworząc jeden rząd. background-color wypełnia resztę obszaru oliwkowo-zielonym kolorem, a background-image wskazuje plik kolo.png.

Pełne wyjaśnienie:

W CSS efekt widoczny na ilustracji powstaje przez połączenie trzech właściwości tła:

  • background-image wskazuje plik graficzny użyty jako tło (tu: kolo.png).
  • background-repeat decyduje, czy i w jaki sposób obraz ma być powielany (kafelkowany).
  • background-color ustala kolor tła, który będzie widoczny w miejscach niepokrytych obrazem oraz "pod" obrazem, jeśli grafika ma przezroczystość.

Odpowiedź z wartością repeat-x jest poprawna, ponieważ repeat-x powtarza obraz wyłącznie wzdłuż osi X, czyli poziomo. W praktyce daje to pojedynczy rząd identycznych elementów u góry lub w miejscu domyślnego pozycjonowania tła, dokładnie jak pas powtarzających się kół.

Pozostałe propozycje nie spełniają opisu:

  • no-repeat w ogóle nie powiela obrazu, więc zobaczysz tylko jedną kopię grafiki (nie powstanie rząd).
  • repeat-y powiela obraz pionowo (w osi Y), co prowadzi do kolumny elementów, a nie do jednego poziomego rzędu.
  • repeat kafelkuje w obu osiach, więc utworzy siatkę (wiele rzędów i kolumn), a nie wyłącznie jeden rząd.

Warto zapamiętać prostą regułę: x = poziomo, y = pionowo. Na egzaminie zwracaj uwagę na słowa "poziomo", "pionowo", "w jednym rzędzie" oraz "kafelkowanie", bo one bezpośrednio wskazują właściwą wartość background-repeat.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co oznacza wartość repeat-x w background-repeat?

repeat-x oznacza, że obraz tła jest powtarzany wyłącznie poziomo (w osi X).

W efekcie powstaje jeden poziomy rząd "kafelków" z tej samej grafiki, rozciągający się na szerokość elementu.

Jaka jest różnica między repeat a repeat-x w tle CSS?

repeat kafelkuje obraz w obu kierunkach: poziomo i pionowo, tworząc siatkę.

repeat-x powtarza tylko poziomo, więc nie tworzy kolejnych rzędów w dół. To kluczowe, gdy chcesz uzyskać wyłącznie pas dekoracyjny.

Dlaczego no-repeat nie pasuje do opisu jednego rzędu obrazków?

no-repeat wyświetla obraz tła tylko raz, bez żadnych powtórzeń.

Jeśli na podglądzie widzisz kilka identycznych elementów ułożonych obok siebie, to znaczy, że powtarzanie jest włączone (np. repeat-x), a nie wyłączone.

Kiedy stosuje się repeat-y zamiast repeat-x?

repeat-y stosuje się, gdy wzór ma powtarzać się pionowo (w osi Y), np. do dekoracyjnych pasków na bokach layoutu lub tła kolumny.

Gdy celem jest poziomy ornament w nagłówku, zwykle wybiera się repeat-x.

Czy kolejność deklaracji background-image, background-repeat i background-color ma znaczenie?

Dla tych trzech właściwości kolejność w obrębie jednej reguły CSS zwykle nie zmienia efektu, bo każda ustawia inny aspekt tła.

Ważne jest, aby wartości były poprawne składniowo i dotyczyły tego samego selektora.

Jak działa background-color, gdy używam obrazu tła?

background-color wypełnia cały obszar elementu kolorem.

Obraz z background-image jest rysowany "na wierzchu" tego koloru. Kolor będzie widoczny tam, gdzie obraz się nie pojawia (np. przy no-repeat) oraz przez przezroczyste fragmenty grafiki.

Jakie błędy w url('kolo.png') najczęściej psują tło CSS?

Najczęstsze problemy to zła ścieżka do pliku (np. plik w innym folderze), literówki w nazwie oraz nieprawidłowa składnia url().

Cudzysłowy nie zawsze są obowiązkowe, ale pomagają uniknąć błędów, zwłaszcza przy znakach specjalnych w nazwie.

Jak rozpoznać na egzaminie, że chodzi o powtarzanie poziome w jednym rzędzie?

Szukaj słów: poziomo, w jednym rzędzie, pas, ornament nagłówka.

To typowe wskazówki na repeat-x. Gdy pojawia się "pionowo" lub "kolumna", wtedy rozważ repeat-y.

Czy repeat-x zawsze tworzy dokładnie tyle obrazków, ile na ilustracji?

Nie. Liczba widocznych powtórzeń zależy od szerokości elementu, w którym ustawiono tło, oraz od szerokości samej grafiki.

repeat-x po prostu powiela obraz poziomo, aż zapełni dostępne miejsce.

Jak przygotować się do pytań o tła w CSS w kwalifikacji fotograficzno-multimedialnej?

Ćwicz na prostych przykładach: zmieniaj tylko jedną właściwość naraz (repeat, repeat-x, repeat-y, no-repeat) i obserwuj efekt.

Warto też znać zapisy kolorów (hex, rgb) oraz umieć szybko skojarzyć oś X z poziomem, a Y z pionem.

info

To pytanie poprawnie rozwiązuje 69% zdających egzamin. średnie

Specjaliści zwracają uwagę: "Poprawna deklaracja używa background-repeat: repeat-x, co powoduje powtarzanie obrazu tła wyłącznie w osi poziomej, tworząc jeden rząd."

Źródła:

  • MDN Web Docs: background-repeat — https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat (accessed 2026-02-27)
  • MDN Web Docs: background-image — https://developer.mozilla.org/en-US/docs/Web/CSS/background-image (accessed 2026-02-27)
  • MDN Web Docs: background-color — https://developer.mozilla.org/en-US/docs/Web/CSS/background-color (accessed 2026-02-27)

Materiały:

  • Dokumentacja właściwości tła w CSS (background-*).
  • Ćwiczenia: porównanie efektów repeat, repeat-x, repeat-y, no-repeat na tym samym obrazie.
  • Materiały o składni kolorów w CSS (hex, rgb) i dziedziczeniu/warstwach tła.
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego