Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA INF3 - PAŹDZIERNIK 2016



PYTANIE NR 5.
W języku CSS zapis w postaci:

p { background-image: url(“rysunek.png"); }

sprawi, że rysunek.png będzie

A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Selektor p wskazuje wszystkie elementy akapitu na stronie. Deklaracja background-image ustawia obraz jako tło elementu, a nie jako osobny obraz obok tekstu. Dlatego rysunek.png stanie się tłem każdego paragrafu (<p>), do którego pasuje selektor.

Pełne wyjaśnienie:

W podanym fragmencie CSS kluczowy jest selektor p. Jest to selektor typu, który dopasowuje wszystkie elementy HTML o nazwie <p> w dokumencie (czyli wszystkie akapity), o ile nie ma innych reguł, które nadpiszą tę właściwość.

Deklaracja background-image: url("rysunek.png") ustawia obraz jako tło elementu. Tło jest rysowane w obszarze pudełka elementu (za treścią), a nie jako osobny obiekt w drzewie dokumentu. To oznacza, że obraz nie pojawia się "obok" akapitu jako dodatkowa grafika, tylko jest wyświetlany pod tekstem (w tle), zgodnie z regułami tła (m.in. domyślne powtarzanie, pozycjonowanie i rozmiar zależą od innych właściwości background).

  • Odpowiedź "tłem każdego paragrafu." jest poprawna, bo selektor p obejmuje wszystkie akapity, a background-image dotyczy tła tych elementów.
  • Odpowiedź "tłem całej strony." jest błędna, ponieważ tło całej strony ustawia się zwykle na elemencie <body> (lub innym kontenerze), a nie przez selektor p.
  • Odpowiedź "wyświetlony obok każdego paragrafu." jest błędna, bo background-image nie wstawia nowego elementu graficznego w układzie (nie zajmuje miejsca "obok"); to nadal tło.
  • Odpowiedź "wyświetlony, jeśli w kodzie zostanie zastosowany znacznik img." jest błędna, bo znacznik <img> dotyczy osobnego elementu obrazu w HTML. Użycie background-image nie wymaga <img> i działa niezależnie od niego.

Wskazówka egzaminacyjna: najpierw zawsze ustal co wybiera selektor (tutaj: <p>), a dopiero potem interpretuj właściwość (tutaj: tło). To często eliminuje pomyłki "cała strona" vs "konkretne elementy".

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co robi właściwość background-image w CSS?
background-image ustawia obraz jako tło elementu HTML. Obraz jest rysowany "pod" treścią elementu, a nie jako osobny obiekt w układzie strony. Do kontrolowania wyglądu tła używa się też m.in. background-repeat, background-position i background-size.
Jak działa selektor p w CSS?
Selektor p to selektor typu: pasuje do wszystkich elementów <p> w dokumencie. Jeśli napiszesz p { ... }, to reguła zostanie zastosowana do każdego akapitu, o ile nie zostanie nadpisana przez bardziej szczegółowe reguły.
Dlaczego tło ustawione dla p nie jest tłem całej strony?
Bo reguła dotyczy tylko elementów dopasowanych selektorem p, czyli akapitów. Tło całej strony zwykle wiąże się z elementem <body> (lub głównym kontenerem), a nie z każdym akapitem. Zakres działania wynika bezpośrednio z selektora.
Czy background-image wyświetla obraz obok tekstu?
Nie. background-image nie tworzy nowego elementu w układzie, więc obraz nie "staje obok" tekstu. Jest renderowany jako tło w obszarze elementu. Efekt "obok" uzyskuje się zwykle przez <img> albo przez układ CSS (np. flex) z osobnym elementem.
Co jest różnicą między background-image a tagiem <img>?
<img> wstawia obraz jako element treści HTML (ma wymiary, wpływa na układ, ma atrybut alt). background-image ustawia obraz jako dekoracyjne tło elementu (nie jest treścią, zwykle nie ma alternatywy tekstowej i nie wpływa na układ w ten sam sposób).
Jak zapisać poprawnie url do obrazka w background-image?
Najczęściej: background-image: url("rysunek.png");. Możesz użyć cudzysłowów lub nie, ale muszą być spójne i poprawne. Ścieżka może być względna (np. "img/tlo.png") lub bezwzględna (pełny adres URL), zależnie od struktury projektu.
Kiedy tło z background-image może się nie wyświetlić?
Najczęstsze powody to błędna ścieżka do pliku, brak pliku na serwerze, literówka w nazwie (w tym wielkość liter), blokada dostępu lub brak widocznego obszaru elementu (np. element ma wysokość 0). Warto też sprawdzić w narzędziach dev, czy plik się ładuje.
Jak sprawić, żeby tło nie powtarzało się w CSS?
Użyj background-repeat: no-repeat;. Domyślnie tło może się powtarzać (tiling), co bywa zaskakujące na egzaminach. Dodatkowo często ustawia się background-position (np. center) oraz background-size (np. cover) dla przewidywalnego efektu.
Jak ustawić tło tylko dla jednego paragrafu, a nie dla wszystkich?
Zamiast selektora typu użyj klasy lub identyfikatora. Przykład: nadaj akapitowi klasę class="wyr", a w CSS użyj .wyr { background-image: url("rysunek.png"); }. Dzięki temu styl dotyczy tylko wskazanego elementu (lub grupy).
Jakie błędy są najczęstsze w zadaniach o selektorach CSS?
Typowe pomyłki to ignorowanie selektora (uczeń patrzy tylko na właściwość), mylenie selektora typu z klasą i id, oraz utożsamianie tła z elementem <img>. Na egzaminie warto najpierw odpowiedzieć sobie: "Jakie elementy wybieram?" i dopiero potem: "Jaki styl im nadaję?".
info

Statystycznie 55% uczniów zna prawidłową odpowiedź. średnie

Specjaliści zwracają uwagę: "Selektor p wskazuje wszystkie elementy akapitu na stronie."

Źródła:

  • MDN Web Docs: background-image — https://developer.mozilla.org/en-US/docs/Web/CSS/background-image (dostęp: 2026-02-28)
  • MDN Web Docs: Type selectors — https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors (dostęp: 2026-02-28)
  • W3C/CSSWG Editor’s Draft: CSS Backgrounds and Borders Module Level 3 (background-image) — https://drafts.csswg.org/css-backgrounds-3/ (dostęp: 2026-02-28)

Materiały:

  • Dokumentacja MDN: background-image, selektory CSS
  • Specyfikacja CSS Backgrounds and Borders (definicja background-image)
  • Ćwiczenia praktyczne: selektory typu vs klasy i identyfikatory
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego