--- url: 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/tlo' title: 'Umieść kolor albo zdjęcie za treścią | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T13:57:55+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Nadaj pasowi strony markowy kolor albo zdjęcie, aby nagłówek się wyróżniał, a pas czytał się jako jeden blok. Kolor i zdjęcie ustawisz w panelu Styl dowolnego elementu. Sekcja dodaje panel Efekty tła na nieruchome zdjęcie, parallax, gradient albo wideo z YouTube. Film podąża za recepturą poniżej: kładzie zdjęcie za nagłówkiem i ciemny gradient na zdjęcie, aby biały nagłówek pozostał czytelny. tags: - 'Style your elements' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Umieść kolor albo zdjęcie za treścią' description: |- Nadaj pasowi strony markowy kolor albo zdjęcie, aby nagłówek się wyróżniał, a pas czytał się jako jeden blok. Kolor i zdjęcie ustawisz w panelu Styl dowolnego elementu. Sekcja dodaje panel Efekty tła na nieruchome zdjęcie, parallax, gradient albo wideo z YouTube. Film podąża za recepturą poniżej: kładzie zdjęcie za nagłówkiem i ciemny gradient na zdjęcie, aby biały nagłówek pozostał czytelny. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T13:57:55+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/tlo' articleSection: 'Stylizuj elementy' - '@type': WebPage '@id': 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/tlo' description: |- Nadaj pasowi strony markowy kolor albo zdjęcie, aby nagłówek się wyróżniał, a pas czytał się jako jeden blok. Kolor i zdjęcie ustawisz w panelu Styl dowolnego elementu. Sekcja dodaje panel Efekty tła na nieruchome zdjęcie, parallax, gradient albo wideo z YouTube. Film podąża za recepturą poniżej: kładzie zdjęcie za nagłówkiem i ciemny gradient na zdjęcie, aby biały nagłówek pozostał czytelny. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: 'Strona Główna' item: 'https://dxpr.com/pl' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: pl --- [Centrum pomocy](/pl/hc)/[Dokumentacja](/pl/hc/dokumentacja) /[Poznaj DXPR Builder](/pl/hc/documentation/learn-dxpr-builder) /[Buduj strony](/pl/hc/documentation/learn-dxpr-builder/build) /[Stylizuj elementy](/pl/hc/documentation/learn-dxpr-builder/element-settings) # Umieść kolor albo zdjęcie za treścią. Poznaj DXPR BuilderBuduj stronyStylizuj elementy ## W tym przewodniku Powiązane przewodniki - [Zmień rozmiar i kolor tekstu](/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/typografia) Nadaj pasowi strony markowy kolor albo zdjęcie, aby nagłówek się wyróżniał, a pas czytał się jako jeden blok. Kolor i zdjęcie ustawisz w panelu **Styl** dowolnego elementu. Sekcja dodaje panel **Efekty tła** na nieruchome zdjęcie, parallax, gradient albo wideo z YouTube. Film podąża za recepturą poniżej: kładzie zdjęcie za nagłówkiem i ciemny gradient na zdjęcie, aby biały nagłówek pozostał czytelny. ## Zanim zaczniesz - Otwórz stronę w DXPR Builder; wskazanie elementu pokazuje jego pasek sterowania z opcją **More**. Nowy w kreatorze? Zobacz [Twoja pierwsza strona](/pl/hc/dokumentacja/nauka-dxpr-builder/pierwsze-kroki/pierwsza-strona). - **Zapisz** w oknie zachowuje zmianę w edytorze. **Zapisz** na pasku narzędzi kreatora nad treścią zapisuje stronę i pokazuje „Saved field”. - **Użyj sekcji** na pełny pas strony. Tylko sekcja ma **Efekty tła**. - **Użyj elementu tekstowego albo karty** na kolorowy blok za kilkoma wierszami wewnątrz kolumny. - **Użyj swojego motywu** do teł na każdej stronie, na przykład treści strony albo stopki. - **Trzymaj słowa z dala od zdjęcia.** Obraz w tle nie ma tekstu alt, więc czytniki ekranu go pomijają. Umieść przekaz w nagłówku na wierzchu. ## Przepis: czytelny nagłówek na zdjęciu Biały tekst na zatłoczonym zdjęciu trudno odczytać. Ciemny gradient na zdjęciu to naprawia i działa dalej po podmianie zdjęcia. Potrzebujesz sekcji, która trzyma twój nagłówek w elemencie tekstowym. 1. Najedź na **sekcję**, kliknij **More**, a potem **Settings**. 2. Otwórz panel **Styl** i kliknij **Select Image** w sekcji **Obraz tła**. Wybierz zdjęcie. Pojawi się miniatura z listą rozmiarów obrazu. 3. Z listy rozmiarów wybierz rozmiar co najmniej tak szeroki jak najszerszy ekran, dla którego projektujesz, albo **Original image (No resizing)**. Unikaj **Optimize for fast loading** dla pełnego pasa. 4. Ustaw **Styl tła** na **Cover**, a **Pozycję tła** na **Center center**. 5. Otwórz panel **Efekty tła** i ustaw **Efekt tła** na **Gradient**. Twoje zdjęcie zostaje; gradient leży na nim. 6. W polu koloru **Koloru początkowego** wpisz `rgba(0, 0, 0, 0.6)`: czerń na 60%. Wpisz `rgba(0, 0, 0, 0.3)` dla **koloru końcowego**. Pozostaw **kierunek gradientu** na 180, aby woal biegł z góry na dół. 7. Kliknij **Zapisz** w oknie. Sekcja pokazuje zdjęcie pod ciemnym woalem. 8. Najedź na element **tekstowy**, kliknij **More**, a potem **Settings**. W jego panelu **Styl** ustaw **Kolor czcionki** na biały i kliknij **Zapisz**. 9. Kliknij **Zapisz** na pasku narzędzi. Sprawdź nagłówek na najjaśniejszym fragmencie zdjęcia. Celuj w kontrast co najmniej 4,5 do 1 albo 3 do 1 dla dużych nagłówków; strona [typografia](/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/typografia) wyjaśnia te cele. Nadal trudno odczytać? Podnieś obie wartości, na przykład do 0,8 i 0,5. ## Co widzisz Sekcja pokazuje twoje zdjęcie pod ciemnym woalem, najciemniejszym u góry, z białym nagłówkiem na nim. **Cover** wypełnia całą sekcję, więc na wąskim ekranie więcej boków zdjęcia jest odciętych. ## Jak działają ustawienia | Ustawienie | Co robi | |---|---| | **Tło** | Kolor za treścią. Suwak krycia w selektorze czyni go przezroczystym. | | **Obraz tła** | Zdjęcie za treścią: przez **Select Image**, z adresu URL albo z **AI Image Generation**, chyba że twoja witryna to wyłączyła. | | **Styl tła** | Jak obraz wypełnia element. Zobacz tabelę poniżej. | | **Pozycja tła** | Punkt, do którego przypięty jest obraz. Przy **Cover** decyduje, która część zdjęcia zostaje widoczna. | | **Styl tła** | Efekt | |---|---| | **Theme defaults** | O ile motyw nie stanowi inaczej, obraz powtarza się w swoim rozmiarze od lewego górnego rogu. | | **Cover** | Obraz wypełnia element, a krawędzie, które się nie mieszczą, są odcinane. Najlepszy do zdjęć. | | **Contain** | Cały obraz pokazuje się raz. Po dwóch stronach mogą zostać puste pasy. Najlepszy do logo. | | **No repeat** | Jedna kopia w swoim rozmiarze. | | **Repeat** | Obraz kafelkuje element. Dobry do wzorów. | Kolor leży pod obrazem. Przebija przez przezroczyste części obrazu, w pasach wokół obrazu **Contain** i podczas wczytywania zdjęcia. Wybierz kolor bliski głównemu tonowi zdjęcia. Rozmiar **Optimize for fast loading** skaluje obraz do co najwyżej 1024 px szerokości i zapisuje go jako WebP. Sprawdza się w bloku, ale na pełnym pasie na dużym ekranie wygląda miękko. Ten sam obraz wczytuje się na każdym rozmiarze ekranu, łącznie z telefonami. Panel **Styl najechania** ma własne **Tło** i **Obraz tła**, więc blok może zmieniać kolor albo podmieniać obraz po najechaniu. ## Efekty tła sekcji Te efekty potrzebują sekcji. **Stały obraz** i **obraz parallax** biorą zdjęcie z **Obrazu tła**, więc najpierw ustaw zdjęcie. | **Efekt tła** | Co widzą odwiedzający | Ustawienia | |---|---|---| | **Simple image** | Zdjęcie przewija się ze stroną. To domyślne. | brak | | **Fixed image** | Zdjęcie stoi w miejscu, a treść przewija się nad nim. | brak | | **Parallax image** | Zdjęcie przewija się wolniej niż treść. | **Parallax speed** (0 do 100; wybranie **Parallax image** ustawia 20, gdy jest 0), **Parallax mode** (**Fixed** albo **Local**), **Disable on mobile** (ekrany węższe niż 481 px) | | **Gradient** | Mieszanka dwóch kolorów, osobno albo na zdjęciu. | **Start color**, **End color**, **Gradient direction** (1 do 360 stopni; 180 biegnie z góry na dół), **Start position**, **End position** | | **YouTube video** | Wyciszony film gra, gdy sekcja jest na ekranie, i pauzuje, gdy zjedzie z widoku. | **YouTube video URL**, **Start time in seconds**, **Stop time in seconds**, **Video options** | Na zdjęciu gradient zawsze biegnie od krawędzi do krawędzi. **Start position** i **End position** dotyczą tylko gradientu bez zdjęcia. ## Jeśli nie widać tła - **Zdjęcie pokazuje się jako cienki pasek.** Tło nie dodaje wysokości; sekcja jest tak wysoka jak treść i odstępy. Dodaj treść albo włącz **wysokość 100%** w panelu **Ogólne**. Aby dodać odstępy, zobacz [wyższą sekcję](/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/odstepy#recipe-a-taller-section). - **Zdjęcie się powtarza albo widać tylko jeden róg.** **Styl tła** jest na **Theme defaults**. Wybierz **Cover**. - **Zdjęcie wygląda miękko na szerokim ekranie.** **Optimize for fast loading** ogranicza je do co najwyżej 1024 px szerokości. Wybierz szerszy rozmiar z listy rozmiarów. - **Zdjęcie kryje się za jednolitą czernią.** Kolory gradientu nie mają przezroczystości. Zakończ każdą wartość liczbą poniżej 1, na przykład `rgba(0, 0, 0, 0.6)`. - **Nagłówek pozostaje ciemny.** Klasa koloru w polu **HTML classes** elementu tekstowego albo reguła motywu z `!important` wygrywa. Usuń chip albo zobacz [typografia](/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/typografia). - **Tła nie ma po przeładowaniu strony.** **Zapisz** w oknie zachowuje zmianę tylko w edytorze. Kliknij **Zapisz** na pasku narzędzi. - **Kolor się nie pokazuje.** Zdjęcie go zakrywa. Aby zabarwić zdjęcie, użyj **Gradientu** w **Efektach tła**. - **Pozycja początkowa i pozycja końcowa nic nie zmieniają.** Sekcja ma **Obraz tła**, więc gradient biegnie od krawędzi do krawędzi. Użyj zamiast tego **kierunku gradientu** i przezroczystych kolorów. - **Kolor klasy wygrywa.** Klasa taka jak **Primary background** w polu **HTML classes** bije twoje **Tło**. Usuń jej chip. - **Tło nie działa na liczniku kołowym, pasku postępu ani separatorze.** Te elementy używają własnych kolorów. Ustaw **Background color**, **Back color** albo **Color** w panelu **Ogólne**. ## Co dalej? - [Typografia](/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/typografia): ustaw kolor nagłówka na zdjęciu i sprawdź jego kontrast.