How to Change the Background of a Website Section Using OzSpeed hPanel

Changing the background of a section on your website is a great way to enhance the visual appeal and create a more engaging user experience. With OzSpeed’s Website Builder, you can easily update the background using colors, images, videos, or gradient effects. This guide will show you step by step how to customize the background of any section on your site.

---

Step 1: Access the Website Editor #

To start customizing your section’s background, open the page in the editor.

1. Log in to hPanel at ozspeed.com.au.
2. Go to Website Builder > Edit Site.
3. Navigate to the page where the section you want to change is located.

Tip: #

• Use the Preview feature to get an overall view of the page before making changes.

---

Step 2: Select the Section You Want to Edit #

Identify the section whose background you want to change.

How to Select the Section: #

1. Hover over the section until the section toolbar appears.
2. Click on the Section Settings (gear icon) or the Options (three dots) menu.

Tip: #

• Click directly on the section to open its settings if the toolbar doesn’t appear.

---

Step 3: Open the Background Settings #

Access the background customization options from the section settings.

How to Open Background Settings: #

1. In the Section Settings panel, go to the Design or Background tab.
2. You’ll see options to change the background color, add an image, video, or apply a gradient.

Tip: #

• Experiment with different background types to see which one best fits your design.

---

Step 4: Change the Background Color #

A solid color background can help make the text stand out and create a clean look.

How to Change the Color: #

1. Click on the Background Color option.
2. Choose a color from the color picker or enter a specific HEX/RGB color code.
3. Click Apply to save the changes.

Tip: #

• Use brand colors or choose a contrasting color to highlight the section’s content.

---

Step 5: Add a Background Image #

A background image can add depth and visual interest to a section.

How to Add an Image: #

1. Click on Background Image in the settings panel.
2. Click Upload Image to choose an image from your computer or select one from the media library.
3. Adjust the image settings, such as position, size (cover, contain), and repeat.
4. Click Apply to save the changes.

Tip: #

• Use high-resolution images for a professional look, but ensure they are optimized for web to avoid slow loading times.

---

Step 6: Add a Video Background #

A video background can create a dynamic and engaging experience for your visitors.

How to Add a Video Background: #

1. Click on Background Video in the settings panel.
2. Upload a video file or enter a URL (e.g., from YouTube or Vimeo).
3. Adjust the playback settings, such as autoplay, loop, and mute.
4. Click Apply to save the changes.

Tip: #

• Keep video backgrounds short and ensure they don’t distract from the main content.

---

Step 7: Apply a Gradient Background #

Gradient backgrounds offer a stylish alternative to solid colors and can add visual interest.

How to Add a Gradient: #

1. Click on Gradient Background in the settings panel.
2. Choose the gradient type (linear or radial).
3. Select the colors for the gradient and adjust the angle or direction.
4. Click Apply to save the changes.

Tip: #

• Use subtle gradients for a modern, professional look.

---

Step 8: Adjust Background Overlay (Optional) #

Adding an overlay can make text more readable on top of a background image or video.

How to Add an Overlay: #

1. In the Background Settings, enable the Overlay option.
2. Choose a color for the overlay and adjust the opacity.
3. Click Apply.

Tip: #

• Use a dark or light overlay depending on the brightness of the background image or video.

---

Step 9: Preview and Save the Changes #

Before publishing, preview the page to ensure the background changes look good and don’t affect readability.

How to Preview: #

1. Click Preview in the top toolbar.
2. Check the section on both desktop and mobile views.
3. Click Save if you’re satisfied with the changes.

Tip: #

• Use an incognito window or clear your browser cache to see the live changes as visitors would.

---

Step 10: Publish the Changes #

Once you’re happy with the new background, publish the page to make it live.

How to Publish: #

1. Click Publish in the top right corner of the editor.
2. Confirm the changes to go live.

Tip: #

• Announce the update on social media or in your newsletter to showcase the new look.

---

Troubleshooting Tips #

1. Background Image Not Displaying:
   • Check the image size and format. Ensure it’s optimized for web use (e.g., JPG, PNG).
   • Clear the website cache in hPanel and your browser cache.
2. Text Hard to Read Over Background:
   • Add a background overlay or adjust the text color for better contrast.
   • Increase the opacity of the overlay for more visibility.
3. Video Background Not Playing:
   • Ensure the video file is supported (e.g., MP4) and the URL is correct.
   • Check the autoplay and mute settings.

---

Additional Tips: #

• Keep It Simple: Avoid using overly busy backgrounds that can distract from the main content.
• Optimize for Speed: Use compressed images and videos to prevent slow loading times.
• Maintain Brand Consistency: Use colors, images, and styles that align with your brand identity.