{"id":20708,"date":"2021-02-22T17:00:11","date_gmt":"2021-02-22T16:00:11","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=20708"},"modified":"2021-02-22T14:03:43","modified_gmt":"2021-02-22T13:03:43","slug":"how-to-add-background-image-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-add-background-image-wordpress\/","title":{"rendered":"How to Add a Background Image in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Background images can go a long way towards <strong>making your website more appealing to your visitors<\/strong>. More compelling than a monochrome background, they can illustrate a point you are making or set the mood for your entire site.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this tutorial, we will show you several ways in which you can add a background image in WordPress. Here is what we will be discussing:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#themes-settings\">How to Add a Background Image Using Your Theme\u2019s Settings<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#css\">How to Add a Background Image Using CSS<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#specific-content-sections\">How to Add a Background to Specific Content Sections<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]But before we begin, we have to note that it\u2019s not possible to give a single, definitive answer as to <strong>how to add a background image in WordPress<\/strong>, due to many factors affecting the overall layout and look of a webpage. The theme, above all, dictates the ability or inability to add a background image to parts or the entirety of a page. We have provided you with three different ways, but they may not all work, or may work differently, depending on the theme you are using. Even the term \u201cbackground\u201d may relate to different areas of different themes. Still, read on as one of these methods might be just the thing you need.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"themes-settings\"><\/a>How to Add a Background Image Using Your Theme\u2019s Settings<\/h2>\n<p>[\/vc_column_text][vc_column_text]This might be a good moment to point out that large, high-quality images tend to slow down loading times. Still, there are things you can do to <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-optimize-images-for-web\/\">optimize your images<\/a> and make them as easy to load as possible. If you are building a website with loading speed in mind, we have also covered repeating (tiled) backgrounds.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If your theme has a <strong>background setting<\/strong>, as many popular themes nowadays do, you could use it to set up your background image. Most themes which have this functionality work much the same. We used WordPress\u2019s default Twenty Twenty theme.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]First, you need to navigate to the theme customizer from <strong>Appearance&gt;Customize<\/strong> in your WordPress dashboard.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Appearance-Customize.jpg\" class=\"attachment-full size-full\" alt=\"Appearance Customize\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Appearance-Customize.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Appearance-Customize-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Appearance-Customize-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Appearance-Customize-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, you want the <strong>Background Image<\/strong> submenu on the left-hand side of the screen.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Background-Image-Submenu.jpg\" class=\"attachment-full size-full\" alt=\"Background Image Submenu\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Background-Image-Submenu.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Background-Image-Submenu-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Background-Image-Submenu-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Background-Image-Submenu-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Clicking that will bring you to the <strong>Select image<\/strong> button. You can add a background image from your media library, or you can upload one. We have selected one from our media library.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Select-Image-Button.jpg\" class=\"attachment-full size-full\" alt=\"Select Image Button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Select-Image-Button.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Select-Image-Button-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Select-Image-Button-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Select-Image-Button-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And there you go, you have now changed your background.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Background.jpg\" class=\"attachment-full size-full\" alt=\"Background\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Background.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Background-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Background-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Background-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The Twenty Twenty theme we are using gives us some options here. You could use an image which can be tiled (repeated), such as our little green leaf there, or you could use a single image for your background.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If so, you will need high definition images for your website which will take up the full width of your page, but they can take a lot of time to load and may lead to poor user experiences. It is really up to you to find out which images and settings work for your theme and your website style.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Note, though, that while many themes do have the option of adding a background image in this way, most don\u2018t, which is why you may need to resort to one of the other two methods we have outlined in this article.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"css\"><\/a>How to Add a Background Image Using CSS<\/h2>\n<p>[\/vc_column_text][vc_column_text]If you are more of a hands-on user, you also have the option of <strong>changing your CSS in order to set up a background image<\/strong> for individual posts, but also categories, authors, and other CSS classes.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can change the background for a category, or for the entire website, using the theme customizer. Navigate to it from your WordPress dashboard by clicking on <strong>Appearance&gt;Customize<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Appearance-Customize.jpg\" class=\"attachment-full size-full\" alt=\"Appearance Customize\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Appearance-Customize.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Appearance-Customize-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Appearance-Customize-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Appearance-Customize-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once there, open the <strong>Additional CSS<\/strong> section.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Open-the-Additional-CSS-section.jpg\" class=\"attachment-full size-full\" alt=\"Open the Additional CSS section\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Open-the-Additional-CSS-section.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Open-the-Additional-CSS-section-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Open-the-Additional-CSS-section-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Open-the-Additional-CSS-section-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You will need to add some lines of code to the CSS field in order to add a background image. To change the background for the entire website, use this code:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">body {\r\nbackground-image: url(\"XXX\");\r\nbackground-position: center center;\r\nbackground-size: cover;\r\nbackground-repeat: no-repeat;\r\nbackground-attachment: fixed;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You will, of course, need to replace XXX with the URL of the image you would like to use. We have selected one from our media library.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/How-to-Add-a-Background-Image-Using-CSS.jpg\" class=\"attachment-full size-full\" alt=\"How to Add a Background Image Using CSS\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/How-to-Add-a-Background-Image-Using-CSS.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/How-to-Add-a-Background-Image-Using-CSS-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/How-to-Add-a-Background-Image-Using-CSS-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/How-to-Add-a-Background-Image-Using-CSS-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you want to change it for pages with a certain category, though, it works a little different. The code you want is this:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">body.category-YYY {\r\nbackground-image: url(\"XXX\");\r\nbackground-position: center center;\r\nbackground-size: cover;\r\nbackground-repeat: no-repeat;\r\nbackground-attachment: fixed;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You will, as above, need to change XXX to a valid image URL, while also swapping YYY with a valid category.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]And that\u2018s really all there is to it!<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"specific-content-sections\"><\/a>How to Add a Background To Specific Content Sections<\/h2>\n<p>[\/vc_column_text][vc_column_text]Now, as always, our suggestion is to use a theme\u2018s functionality whenever you can, as it is tried and tested to work. However, if a theme you are using does not have the functionality you need, <strong>you can probably find a plugin<\/strong> that does. Our plugin of choice is <a href=\"https:\/\/wordpress.org\/plugins\/advanced-backgrounds\/\" target=\"_blank\" rel=\"noopener\">Advanced WordPress Backgrounds<\/a>. Once you have installed and activated the plugin, you will have gained a special Gutenberg block which you can use to set up a dynamic background.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This plugin primarily works by setting up a kind of a meta-block, which acts as a background, and which you then need to populate with another block or blocks.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We will show you how to do this in a post.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]First, we will create a post from our WordPress dashboard by selecting <strong>Post&gt;Add New<\/strong>. Then, after typing in the title and populating it with two paragraph blocks, we will hit enter after the first paragraph, and then click the <strong>plus<\/strong> sign and add a <strong>Background<\/strong> block.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Background-Block.jpg\" class=\"attachment-full size-full\" alt=\"Background Block\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Background-Block.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Background-Block-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Background-Block-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Background-Block-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now you need to configure the block. The default setting is <strong>Color<\/strong>, which is a simple block of color you can choose if you want a monochrome background. Another interesting option is the <strong>Video<\/strong> background. You can use this plugin to set up a video background, whether on loop or single-play, and you don\u2018t even need to host it on your website: the plugin supports YouTube- and Vimeo-hosted videos. For this demonstration, though, we are mainly concerned with the <strong>Image<\/strong> background.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Clicking the <strong>Image<\/strong> button, you will find a set of controls for this plugin. In the <strong>Image<\/strong> section, click the <strong>Select image<\/strong> button, and either upload an image or select an image from your media library.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Select-Image.jpg\" class=\"attachment-full size-full\" alt=\"Select Image\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Select-Image.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Select-Image-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Select-Image-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Select-Image-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you have done that, you will find that the image has taken up part of the background. On the right-hand side, you will find parallax and spacing options which you can use if you want to make your website look a little more dynamic. At the very top, you will find the positional controls. You can select which part of the image will be shown based on the position of the indicator on the axes. The default (50% horizontal and 50% vertical) is where we will leave it now \u2013 right smack in the middle of the image.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Image-Config.jpg\" class=\"attachment-full size-full\" alt=\"Image Config\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Image-Config.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Image-Config-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Image-Config-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Image-Config-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, we will need to add the content this image will be background to. To do that, simply click on the <strong>plus<\/strong> sign in the middle of the background block. We will go for a paragraph block, but you can choose any block you like. A quote or a heading, for instance, might look great against a parallax background.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Add-Paragraph-Block.jpg\" class=\"attachment-full size-full\" alt=\"Add Paragraph Block\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Add-Paragraph-Block.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Add-Paragraph-Block-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Add-Paragraph-Block-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Add-Paragraph-Block-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We have pasted our text and changed its colour in the block settings tab to white, the better to be offset by the background. And that\u2018s really it.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Paste-Text.jpg\" class=\"attachment-full size-full\" alt=\"Paste Text\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Paste-Text.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Paste-Text-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Paste-Text-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Paste-Text-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, clicking on the preview button, we can see the plugin in action.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Preview-Image.jpg\" class=\"attachment-full size-full\" alt=\"Preview Image\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Preview-Image.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Preview-Image-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Preview-Image-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Preview-Image-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And now you can add whatever kind of background you want to whichever individual content section on your website you wish to emphasize.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]A background image can really make your website stand out to your users like a big, shiny needle in a haystack of drab straw. However, that does come with a cost: you will probably need to store large-format media, and they will adversely affect loading times. Still, gorgeous graphics remain the best way of making a lasting first impression, and internet users have come to expect professional, eye-catching design. The background is likely going to be the largest single graphic element on your visitors\u2018s screens. If you can afford the increased loading time, why not make your visitors\u2019 experience visually interesting? So, whether you do it using your theme\u2018s native settings, a plugin, or CSS, you now know how to do it.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Make your website really pop with an eye-catching background. We will show you how.<\/p>\n","protected":false},"author":16990,"featured_media":20799,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[4,13],"class_list":["post-20708","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/20708","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/16990"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=20708"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/20708\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/20799"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=20708"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=20708"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=20708"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}