# Szöveg elhelyezése kép fölött

> Két módszer szöveg kép fölé tételére: háttérkép a Flexbox elemen, vagy negatív margó és Z-index.

Az Elementorban többféleképpen is tehetsz szöveget kép fölé. Ez a fejezet a két legjobb, reszponzív módszert mutatja be:

- **1. módszer:** háttérkép a Flexbox elemen. Hős szekciókhoz és bannerekhez ajánlott.
- **2. módszer:** negatív margó és Z-index. Egyedi, egymásra lógó kártyákhoz ajánlott.

## 1. módszer: háttérkép a Flexbox elemen

A kép tároló hátterének beállítása a legtisztább és leginkább reszponzív megoldás. Minden widget, amelyet a tárolóba teszel, automatikusan a háttérkép fölött jelenik meg.

1. **Add hozzá a tárolót.** Húzz egy **Flexbox** elemet a bal oldali panelről a vászonra.
2. **Állítsd be a méretét.** Kattints a **Stílus** fülre, nyisd ki a **Méret** szekciót, és állítsd a **Minimális magasság** és a **Maximális szélesség** értékét 350 képpontra (vagy a kívánt magasságra). A méretekről lásd: [Elemek mérete (V4)](https://hub.hellowp.io/hu/plugins/elementor/stilus-v4-meret/).
3. **Adj hozzá háttérképet.** A **Stílus** fülön nyisd ki a **Háttér** szekciót. Kattints az **Átfedés** melletti + jelre, és válaszd ki vagy töltsd fel a képet a médiatárból. A háttér beállításairól a [Háttér a Stílus fülön (V4)](https://hub.hellowp.io/hu/plugins/elementor/stilus-v4-hatter/) fejezet szól.
4. **Állítsd be a megjelenítést:**
   - **Pozíció:** **Középen**.
   - **Ismétlés:** **Nincs ismétlés**.
   - **Méret:** **Kitöltés** (vagy **Teljes kép megjelenítése**).
5. **Add hozzá a Címsor widgetet.** Húzz egy **Címsor** widgetet közvetlenül a tárolóba. Írd be a szöveget a panelen, a tipográfiát és a színt pedig a **Stílus → Tipográfia** szekcióban módosíthatod.

Ha a V3 szerkesztőt használod: nyisd meg az **Elrendezés** fület, és állítsd a tároló szélességét és minimális magasságát a képhez illő méretre (például mindkettőt 300 képpontra). A **Stílus** fülön a **Háttér** szekcióban válaszd a **Klasszikus** (ecset) háttértípust, kattints a kép miniatűrjére a feltöltéshez, és állítsd be a kép pozícióját.

## 2. módszer: negatív margó és Z-index

Ezt a módszert akkor használd, ha két önálló widgetet szeretnél egymásra csúsztatni, például egy **Kép** widgetet egy meglévő **Címsor** widget alá húzni.

1. **Add hozzá a widgeteket.** Húzz egy **Kép** widgetet a vászonra, és válaszd ki a képet. Húzz egy **Címsor** widgetet a képet közvetlenül megelőző helyre. V3-nál mindkét widgetnek ugyanabban a tárolóban kell lennie.
2. **Állítsd be a címsor rétegsorrendjét (Z-index).** Jelöld ki a **Címsor** widgetet, és a **Stílus** fülön a **Pozíció** szekcióban írj 1-et a **Z-index** mezőbe. Ez megemeli a címsort, hogy az elemek átfedésekor is felül maradjon. A szám beírása után nem látsz változást, de később fontos lesz. A Z-indexről lásd: [Elemek pozíciója (V4)](https://hub.hellowp.io/hu/plugins/elementor/stilus-v4-pozicio/). V3-ban a Z-index a **Haladó** fül **Elrendezés** részén van.
3. **Adj negatív margót a képnek.** Jelöld ki a **Kép** widgetet, és a **Stílus** fülön a **Térközök** szekcióban írj negatív értéket a felső margóba (például -60 vagy -120 képpont). V3-ban kattints a hivatkozás ikonra a **Margó** mellett, hogy a felső, jobb, alsó és bal értékeket külön állíthasd. A margó vezérlői a **Haladó** panel tetején vannak.
4. **Finomíts és nézd meg.** A kép felfelé tolódik a címsor szövege alá. Addig módosítsd a negatív margó értékét, amíg a szöveg pontosan oda nem kerül, ahová szeretnéd.