How To Add A Background To Blog Text Wordpress

I'm gonna keep this intro really short.

Here's what we're going to discuss in this article:

• What are background images
• What's the thing with parallax backgrounds?
• How to add background images to your WordPress website
• How to approach image size in WordPress

Ready, steady? Let's go!

What are background images?

Background images are images that are applied to the background of an element on a website, in an email, etc. While the hero image is the main focal point of a website or an email, the background images are more subtle. They support other website elements, as a second layer: calls to action, other images, various sections of the site, etc.

Let's take a look at some examples of such background images:

IKEA

On the homepage of the IKEA website, background images are used to present their inspiring stories. The title and category of the story are placed on top of the image. There is a gradient overlay used so that it decreases the opacity of the actual image. This approach helps make the text more visible, but also it creates consistency in design, so no color stands out more than another one.

Loving Vincent

One of my favorite movies, this one.

Background images lay behind a carousel that presents stories behind Vincent van Gogh and the movie. The background images seem to empower the story and deliver strong emotions.

Lush

I so love how the Lush website looks: colorful and vibrant as the products themselves.

Now, background images can use patterns or shapes, like in this newsletter sign-up page example. These patterns manage to transform something potentially dull, into something cheerful.

Parallax background images

If you look at the British Museum website, you'll notice that there are images across their pages, that lay in the background why the foreground content scrolls down. These are parallax background images.

Parallax scrolling is one of those web design trends that manages to add a brilliant effect to a website if integrated correctly.

You can also obtain such an effect in WordPress, I'm going to show you how a bit later.

How to add background images to your WordPress website

There are three main ways of adding background images to your WordPress website. Let's check them out, shall we?

• Adding background images via your WordPress theme Customizer

Most popular WordPress themes have this option available. I'm going to use the Colibri theme for the purpose of this example. Other themes behave similarly to the Colibri theme.

If your chosen theme does not support the feature, skip to methods 2 and 3.

Now, let's start by heading over to Appearance -> Customize from the WordPress Dashboard. On the left you'll be seeing the theme's Customizer editing options, while on the right, there's a live preview of your website.

The theme allows you to place background images for:

• Rows
• Columns
• Blocks (entire website sections such as: about me, portfolio, team, contact, etc.)
• Components (headings, carousels, pricing tables, carousels, etc.)

The way you can do this is the same no matter where you need your background image.

Let's say you want to add a background image to your services website block. Start by selecting the section. On the left you'll be seeing the editing options across a menu structured like below:

• Layout
• Style
• Advanced

Go to Style -> Background type.

Select "Image". You'll now see an image that you can replace with your own.

When you click on the image you'll be prompted to a screen where you can select an image from the WordPress media gallery, or you can upload another image.

As you might have noticed already, you can even add a video as a background.

And, there's also a toggle option for the parallax effect!

Now, there's another shortcut to do this background image change. When you select a block from the right, you'll be seeing the settings icon. Click on it and you'll see some editing options.

If you select "Change background", you'll be directed inside "Style" to proceed as described above.

This was all folks. Pretty easy, right?

Now, if your theme does not have the background image option, there's a way to do this in the WordPress default editor.

• Adding a background image using WordPress blocks

From the WordPress dashboard, head over to "Pages". Now, select "edit" from beneath your desired page. You'll be seeing an interface as shown below.

The default WordPress editor is block-based, meaning that each website section is made out of blocks. These blocks can be accessed from any "+" sign that you'll see in the interface. Let's click on the one in the upper-left.

Now, select the "Cover" block. You'll see it show up right away on your page.

You can upload an image that's locally stored on your computer or choose from the existing ones in the Media Library.

I selected an image from the Media Library. Now I can add some text to it. The editing options are quite limited here.

If you select the cover you'll see a menu showing up above, where you can align your image, or duplicate your whole block. You can even save your block as a reusable one, to be used again in other designs.

Now, on the right-hand side of the screen, you have some extra editing options.

Inside media settings, if you toggle on the fixed background option, you'll activate the parallax effect.

When the toggle is off, you can adjust the focal point.

This focal point adjustment can be done also on a percentage basis, taking into account the width and height.

Next, you can add an overlay. You can choose its color and opacity.

And, you're kinda done.

• Adding background images via WordPress plugins

Here are some WordPress plugins tagged as background image plugins. I'm going to play a bit with the Simple Full-Screen Background Image plugin because it has the most installs and the best reviews so far.

Now, here's a tutorial on how to install a WordPress plugin.

With this plugin, images will be automatically scaled with the browser, so regardless of the browser size, the image will always fill the screen.

All you have to do is go to Appearance -> Fullscreen BG Image. From here select your image.

When you hit "Save Options", you will see that all the sections on your site, without a background, will receive this image as a background.

Now, this is what's happening in the free version. It's pretty basic and not at all flexible. The paid plan comes with extra options such as:

• Unlimited background images
• Post / page-specific background images
• Multiple images with fade transitions on pages

And, we're done, you've just found out the 3 methods you can use to add background images to your WordPress site.

There's one more thing I want you to know before we can call it a day.

Image sizes

Before you upload any image on your site, pay attention to its size. I know we all look at megapixels, but, on the web, there's a catch. High-resolution images can hurt your site by affecting its loading time. In the long term, any extra loading second might lose you website visitors and conversions. Also, you'll significantly decrease your chances to rank in search engines, because age speed is an important ranking factor.

On the other hand, using images that are too small, can hurt your user experience as well. So, we need to make ends meet.

One way of doing this is by using external apps that can help you resize your images while ensuring proper clarity.

But in WordPress, you can do this easily using a…plugin, as you might have already guessed.

Here, at Colibri, we are Smush fans. Smush can and will compress images without a visible drop in quality.

In the pro version, it will also convert images to WebP, a next-gen image format that can compress image file sizes up to 35%, with no obvious quality loss.

And that's a wrap, folks!

If you liked this article, and you want to learn more about how to design a WordPress website , make sure to subscribe to Colibri's Youtube channel and follow us on Twitter and Facebook!

Alina Belascu

Alina is a digital marketer with a passion for web design. When she's not strategizing she's doing photography, listening to podcasts on history and psychology, and playing with her 2 dogs and cat.

How To Add A Background To Blog Text Wordpress

Source: https://colibriwp.com/blog/wordpress-background-images/

Posted by: poorewiced2001.blogspot.com

Share this post