--- url: 'https://dxpr.com/pl/hc/documentation/learn-dxpr-builder/design/backgrounds' title: 'Nadaj sekcji kolor, zdjęcie albo gradient tła | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:37:44+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Każdą sekcję możesz wypełnić kolorem, zdjęciem albo gradientem. Kolor i zdjęcie pochodzą z panelu Style, który mają sekcje, wiersze, kolumny i elementy. Sekcje dodają panel Background effects dla gradientów, przyklejonych i parallax zdjęć oraz wideo YouTube. Przykład buduje granatową sekcję ze zdjęciem miasta, białym tekstem i gradientem na wierzchu. Film dodaje zdjęcie za sekcją, potem przykrywa je gradientem. tags: - Ontwerpgidsen image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T11:37:44+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Nadaj sekcji kolor, zdjęcie albo gradient tła' description: |- Każdą sekcję możesz wypełnić kolorem, zdjęciem albo gradientem. Kolor i zdjęcie pochodzą z panelu Style, który mają sekcje, wiersze, kolumny i elementy. Sekcje dodają panel Background effects dla gradientów, przyklejonych i parallax zdjęć oraz wideo YouTube. Przykład buduje granatową sekcję ze zdjęciem miasta, białym tekstem i gradientem na wierzchu. Film dodaje zdjęcie za sekcją, potem przykrywa je gradientem. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:37:44+0000' dateModified: '2026-10-24T11:37:44+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/documentation/learn-dxpr-builder/design/backgrounds' articleSection: Ontwerpgidsen - '@type': WebPage '@id': 'https://dxpr.com/pl/hc/documentation/learn-dxpr-builder/design/backgrounds' description: |- Każdą sekcję możesz wypełnić kolorem, zdjęciem albo gradientem. Kolor i zdjęcie pochodzą z panelu Style, który mają sekcje, wiersze, kolumny i elementy. Sekcje dodają panel Background effects dla gradientów, przyklejonych i parallax zdjęć oraz wideo YouTube. Przykład buduje granatową sekcję ze zdjęciem miasta, białym tekstem i gradientem na wierzchu. Film dodaje zdjęcie za sekcją, potem przykrywa je gradientem. 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 --- [Help Center](/pl/hc)/[Documentation](/pl/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Elementen stylen](/hc/documentation/learn-dxpr-builder/element-settings) /[Ontwerpgidsen](/hc/documentation/learn-dxpr-builder/design/overview) # Nadaj sekcji kolor, zdjęcie albo gradient tła. Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen ## In this guide Related guides - [Uruchom sekcję od krawędzi do krawędzi](/pl/hc/documentation/learn-dxpr-builder/design/full-width-layouts) - [Animuj elementy przy przewijaniu, najechaniu i kliknięciu](/pl/hc/documentation/learn-dxpr-builder/design/animation-tab) - [Sekcja hero.](/pl/hc/documentation/learn-dxpr-builder/tutorials/hero-section) Każdą sekcję możesz wypełnić kolorem, zdjęciem albo gradientem. Kolor i zdjęcie pochodzą z panelu **Style**, który mają sekcje, wiersze, kolumny i elementy. Sekcje dodają panel **Background effects** dla gradientów, przyklejonych i parallax zdjęć oraz wideo YouTube. Przykład buduje granatową sekcję ze zdjęciem miasta, białym tekstem i gradientem na wierzchu. Film dodaje zdjęcie za sekcją, potem przykrywa je gradientem. ## Dodanie koloru i zdjęcia 1. Kliknij **Add Elements** w pustym obszarze treści i wybierz **Section** z karty **Layout**. 2. Najedź na sekcję i otwórz **More > Settings**. 3. Otwórz panel **Style**. 4. Wybierz ciemnogranatową próbkę dla **Background**. 5. Wybierz biel dla **Font color**. 6. W **Background image** kliknij **Select Image**. Przeszukaj bibliotekę mediów, zaznacz zdjęcie i kliknij **Insert selected**. 7. Ustaw **Background style** na **Cover**. 8. Ustaw **Background position** na **Center center** i kliknij **Save**. 9. Kliknij **+** na sekcji i wybierz **Text** z karty **Content**. 10. Wpisz nagłówek, na przykład `Evening lectures`, i jeden wiersz pod nim. Ustaw nagłówek na **Heading 2** i wyśrodkuj oba wiersze na pasku narzędzi edytora. 11. Otwórz panel **Style**, ustaw **Font color** na biały i kliknij **Save**. ## Dodanie gradientu 1. Najedź na sekcję i ponownie otwórz **More > Settings**. 2. Otwórz panel **Background effects** i ustaw **Background effect** na **Gradient**. 3. Wybierz **Start color** i **End color**, potem kliknij **Save**. 4. Kliknij **Save** na pasku narzędzi, otwórz menu widoku (ikona oka) i wybierz **Preview**. ## Co widzisz Po pierwszych krokach zdjęcie wypełnia całą sekcję za białym nagłówkiem. **Cover** przycina to, co się nie mieści, a **Center center** trzyma środek zdjęcia w widoku. Granatowy kolor pokazuje się tylko, gdy zdjęcie się wczytuje albo gdzie zdjęcie nie sięga. Gradient przechodzi od koloru początkowego u góry do koloru końcowego u dołu. Leży na zdjęciu. Kryjące kolory przykrywają zdjęcie całkowicie; kolory z pewną przezroczystością przepuszczają je. ## Ustawienia ### Panel Style (każda sekcja, wiersz, kolumna i element) | Ustawienie | Do czego służy | Domyślnie | |---|---|---| | **Background** | Kolor wypełnienia z próbnika kolorów albo próbki motywu | Brak | | **Background image** | Obraz z biblioteki mediów, wybrany poleceniem **Select Image** | Brak | | **Background style** | **Cover** wypełnia element i przycina; **Contain** pokazuje cały obraz i może zostawić przerwy; **No repeat** pokazuje go raz we własnym rozmiarze; **Repeat** kafelkuje go | **Theme defaults** | | **Background position** | Która część obrazu pozostaje w widoku po przycięciu, na przykład **Center center** albo **Left top** | **Theme defaults** | Gdy skonfigurowano generowanie obrazów przez AI, **Background image** przyjmuje też prompt. Zobacz [generowanie obrazu z AI](/hc/documentation/learn-dxpr-builder/ai/image-generation). ### Panel efektów tła (tylko sekcje) | Efekt tła | Do czego służy | Dodatkowe ustawienia | |---|---|---| | **Simple image** (domyślnie) | Zdjęcie przewija się ze stroną | Brak | | **Fixed image** | Zdjęcie stoi w miejscu, gdy strona przewija się nad nim | Brak | | **Parallax image** | Zdjęcie porusza się wolniej niż strona. Zobacz [sekcję hero](/hc/documentation/learn-dxpr-builder/tutorials/hero-section) z przykładem. | **Parallax speed**, **Parallax mode** (**Fixed** albo **Local**), **Disable on mobile** | | **Gradient** | Dwa kolory mieszają się w całej sekcji, na zdjęciu, jeśli istnieje | **Start color**, **End color**, **Gradient direction** (180 stopni biegnie z góry na dół), **Start position**, **End position** | | **YouTube video** | Wyciszone wideo YouTube wypełnia sekcję; zaznacz **Loop**, aby je zapętlić | **YouTube video URL**, **Video options**, **Start time in seconds**, **Stop time in seconds** | Efekty przyklejony i parallax poruszają zdjęciem ustawionym w panelu **Style**. Wideo YouTube nie potrzebuje zdjęcia. ## Jeśli nie widzisz tła - **Brak panelu Background effects.** Mają go tylko sekcje. Najedź na sekcję, nie na wiersz, kolumnę ani element, i otwórz **More > Settings**. - **Zdjęcie jest ucięte.** **Cover** przycina to, co nie pasuje do sekcji. Zmień **Background position**, aby utrzymać temat w widoku, albo wybierz **Contain**. - **Gradient ukrywa zdjęcie.** Gradient leży na wierzchu, a kryjące kolory przykrywają zdjęcie. Obniż krycie **Start color** i **End color** w próbniku kolorów. - **Sekcja nie pokazuje gradientu.** Gradient potrzebuje obu kolorów. Wybierz **Start color** i **End color**. - **Wideo YouTube się nie odtwarza.** **YouTube video URL** jest puste albo nie jest linkiem do jednego filmu. Wklej pełny adres filmu, na przykład `https://www.youtube.com/watch?v=` i jego ID. ## Co dalej? - [Układy na pełną szerokość](/hc/documentation/learn-dxpr-builder/design/full-width-layouts): pozwól tłu i treści biec od krawędzi do krawędzi. - [Karta animacji](/hc/documentation/learn-dxpr-builder/design/animation-tab): wjeżdżaj tekstem, gdy sekcja wjeżdża w widok. - [Sekcja hero](/hc/documentation/learn-dxpr-builder/tutorials/hero-section): zbuduj pełny nagłówek strony ze zdjęciem parallax.