avada.io
AVADA logo
Avada
Published on
Tutorials

How to insert a custom background on WordPress

725 words4 min read
Author
  • Author
    Author:
    Hanh
    Twitter

If you want to find out the way to insert a custom background image into your WordPress site, you are in the right place.

As you might not know about, background pictures are widely used to make your site become more attractive, engaging and pleasant to the most visitor.

The majority of themes on WordPress can allow you to customize the background of your site by uploading an image or selecting colors and so on.

Therefore, in this tutorial, you will be guided on how to insert a custom background on WordPress.

To add a custom background to your WordPress site

How to add a custom background to your WordPress site by using WordPress theme settings

Before going further, let’s consider that if your theme can support the background images features, you can use this method to insert your custom background to your site. On the other hand, if your current theme does not support the custom background, you can opt for another method that will be shown in this tutorial.

  • Step 1: To help you get started, head to Appearance -> Customize located at the bottom of the right corner.

  • Step 2: As it finishes loading, you can take a closer look at color and backgrounds section.

  • Step 3: In case your theme supports a custom background, you will notice that there is a rectangle representing your background colors and images.

  • Step 4: In order to upload a custom background, press on the rectangle and select the Image button.

  • Step 5: Choose a picture from your own Media Library or get a new one uploaded.

  • Step 6: After selecting an image, you can go back to the major color area by choosing Done.

  • Step 7: As you finish selecting for your own background color, the Option button will appear.

Heading to this button can show you various options. You can simply opt for the image position, title it or set it fixed, which means that the background image will stay in the same place when visitors scroll down along your content.

  • Step 8: Add your underlying color or get the background image hidden if you no longer use it anymore.

  • Step 9: In case you want to use a solid background color instead of a picture, choose one from the color palette, you can go to pick your own color link below

You had better take note that if you already had your background color, this will override your present image. And don’t forget to save any changes you made in the Customizer section by choosing Save & Publish button at the top left of the page.

Some themes can go with their default background pictures. You are able to scroll through many options and pick one that matches the design of your blog or website.

How to add a custom background to your WordPress site by using CSS

Another way to help you add a custom background to your WordPress site is using CSS. Basically, WordPress can insert some CSS classes to various HTML factors through the WordPress site. By doing this, you can simply insert your own background images to your personal posts, author, categories, and another page applying those WordPress generated CSS classes.

Let’s insert a background image to your category archive page and you might have to add this CSS to your theme also.

You should bear in mind that you need to replace the background image URL, along with the category class with the category.

You are able to add custom backgrounds to your personal pages and posts. WordPress allows you to insert a CSS class with the page or post ID in your body tag. You can use the similar CSS code.

Conclusion

With this above instruction on how to insert a custom background on WordPress, we hope that you can easily add your own custom background images without having any difficulties. Don’t forget to help us share this article if you find it helpful and worthy to read. If you need more instructions, let’s the supporting team help you by leaving a comment or contacting us. We are glad to hear more from you and able to assist you as soon as possible.

Exclusive Offer: Shopify Deal for PageFly Audience

Start Your Online Business with Shopify 12 Day Free Trial + Pay Only 1$ For Your First Month

Exclusive Offer: The Online Store Starter Kit

Get the Shopify Free Trial plus the premium package designed especially for new Shopify merchants - all for FREE!

What’s in it for you?

  • The Shopify free trial
  • Ecommerce CRO checklist: set up a high-converting Shopify store - with over 300+ checkpoints to boost your conversion rate, AOV, and more (value)
  • Enjoy 2 months free on all AVADA paid apps (value)
  • Exclusive discounts on top-rated Shopify apps and themes + Additional perks (value)

How can I get it?

The Online Store Starter Kit will be delivered to your email after signing up for Shopify using the custom landing page Shopify made for AVADA’s audience. There’s no additional cost for you!

Start your Shopify Free Trial now and get it for free!

Advertisement
img Advertisement