🧭 Step-by-Step: Make a Full-Width Background in Elementor
🧩 Step 1. Open Your Page
- Edit your page (like News & Events) with Elementor.
🎛️ Step 2. Select the Section
- Hover over the section you want the full background on.
- Click the 6-dot blue handle at the top → this opens the section’s settings.
🧱 Step 3. Go to Layout → Content Width
- Set Content Width → Full Width
- Turn Stretch Section → ON
👉 This makes the section stretch to the entire screen width (no container limits).
🎨 Step 4. Go to Style → Background
Now choose your background type:
- Classic → choose a solid color or upload an image
- Gradient → pick 2 colors for a smooth blend
- Video → set a looping video background (optional)
Example settings for image:
- Background Type → Image
- Position → Center Center
- Attachment → Scroll (or Fixed for parallax)
- Repeat → No-repeat
- Size → Cover (important for full coverage)
🌈 Step 5. Adjust Height (optional)
If you want the background to fill the entire screen:
- Go to Layout → Height → Min Height
- Set value → 100 VH
(That makes it occupy the full display height.)
✨ Step 6. Add Overlay (optional)
If your text is hard to read over the image:
- Still under Style → Background Overlay
- Add a semi-transparent color (e.g. black with 40% opacity).