Inhaltsverzeichnis<\/h2>\n \n - \n How to Change the Background Color in WordPress<\/a>\n
\n - Change Background Color Using WordPress Theme Customizer<\/a><\/li>\n
- Change Background Color By Adding Custom CSS<\/a><\/li>\n
- Change Background Color for Individual Posts<\/a><\/li>\n
- Change Background Color for Patterns<\/a><\/li>\n <\/ul>\n <\/li>\n\n
- \n How to Add Background Images in WordPress<\/a>\n
\n - Add a Background Image Using WordPress Theme Settings<\/a><\/li>\n
- Add a Background Image in WordPress Using a Plugin<\/a><\/li>\n
- Add Background Images in WordPress Using CSS Code<\/a><\/li>\n <\/ul>\n <\/li>\n\n
- Fazit<\/a><\/li>\n <\/ol>\n<\/div>\n\n\n\n
1<\/span> How to Change the Background Color in WordPress<\/h2>\n\n\n\nThere are various ways to change the background color in WordPress. You can do so with the help of a theme customizer or use custom CSS. Let us look at the various ways in detail.<\/p>\n\n\n\n
1.1<\/span> Change Background Color Using WordPress Theme Customizer<\/h3>\n\n\n\nUsing the WordPress Theme Customizer, you can change the background color depending on your theme. It allows you to change the look of your site in real-time without having to change the code.<\/p>\n\n\n\n
Log in to your website and navigate to Appearance \u2192 Themes \u2192 Customize<\/strong> to use the WordPress Theme Customizer.<\/p>\n\n\n\n![\"change](\"https:\/\/rankmath.com\/wp-content\/uploads\/2025\/09\/customize-theme.jpg\")
<\/figure>\n\n\n\nThis will bring up the Theme Customizer, where you can tweak your theme in various ways. To change the background color of your website, go ahead and click on the Styles \u2192 Colors<\/strong> settings tab from the menu on your right.<\/p>\n\n\n\n![\"find](\"https:\/\/rankmath.com\/wp-content\/uploads\/2025\/09\/style-colors-scaled.jpg\")
<\/figure>\n\n\n\nThe next step is to pick a backdrop color for your website. You can use the color picker tool or enter a hex color code for your background.<\/p>\n\n\n\n![\"choose](\"https:\/\/rankmath.com\/wp-content\/uploads\/2025\/09\/choose-color-1-scaled.jpg\")
<\/figure>\n\n\n\nDon’t forget to hit the Save\/Publish<\/strong> button when you’re done making changes. You may now see the new background color in action on your website.<\/p>\n\n\n\n![\"background-color](\"https:\/\/rankmath.com\/wp-content\/uploads\/2025\/09\/page-published-scaled.jpg\")
<\/figure>\n\n\n\n1.2<\/span> Change Background Color By Adding Custom CSS<\/h3>\n\n\n\nYou can add a custom CSS code to change the background color of your site. To do so, navigate to Appearance \u2192 Customize<\/strong> aus Ihrem WordPress-Dashboard. <\/p>\n\n\n\n![\"navigate](\"https:\/\/rankmath.com\/wp-content\/uploads\/2022\/06\/Customize.jpg\")
<\/figure>\n\n\n\nNavigieren Sie dann zu Zus\u00e4tzliches CSS<\/strong> section and add the following code.<\/p>\n\n\n\nbody {\n background-color: #FFFFFF;\n}<\/code><\/pre>\n\n\n\nReplace the background color code with the color code that you want to use on your website. Once you’ve added the code, click Ver\u00f6ffentlichen<\/strong> button and visit your site to view the new background color.<\/p>\n\n\n\n![\"add](\"https:\/\/rankmath.com\/wp-content\/uploads\/2022\/06\/add-background-color-code-scaled.jpg\")
<\/figure>\n\n\n\n1.3<\/span> Change Background Color for Individual Posts<\/h3>\n\n\n\nInstead of having a single color throughout your website, you may change the background color of each blog post in WordPress using custom CSS.<\/p>\n\n\n\n
It allows you to customize the look of individual posts and their backgrounds. For example, you can change the background color of your most commented article or adjust each post’s layout based on the authors.<\/p>\n\n\n\n
You’ll need to look in your theme’s CSS for the post ID <\/strong>class. You may do this by browsing any blog post and then right-clicking to use your browser’s Inspect tool<\/a>.<\/p>\n\n\n\n![\"find](\"https:\/\/rankmath.com\/wp-content\/uploads\/2022\/06\/find-class-id.jpg\")
<\/figure>\n\n\n\nOnce you have your post ID, you may use the following custom CSS to modify the background color of a single post. Replace the post ID with your own and the desired background color code.<\/p>\n\n\n\n
.postid-1349 {\nbackground: #D7DEB5\n}<\/code><\/pre>\n\n\n\nThe WordPress Theme Customizer can be used to add custom CSS. Add the code to the Zus\u00e4tzliches CSS <\/strong>section and click on Ver\u00f6ffentlichen<\/strong> Taste.<\/p>\n\n\n\n![\"change](\"https:\/\/rankmath.com\/wp-content\/uploads\/2022\/06\/change-background-color-1-scaled.jpg\")
<\/figure>\n\n\n\nYou can now check the post and view the new background color. <\/p>\n\n\n\n
1.4<\/span> Change Background Color for Patterns<\/h3>\n\n\n\nPatterns are predefined block layouts accessed on the block inserter’s patterns tab. To add a pattern, click on the ‘+’ sign in the upper left corner, as shown below.<\/p>\n\n\n\n![\"Click](\"https:\/\/rankmath.com\/wp-content\/uploads\/2022\/06\/click-plus-sign.jpg\")
<\/figure>\n\n\n\n<\/p>\n\n\n\n
Navigieren Sie zu Patterns<\/strong> tab, where you can select categories such as headers, footers, gallery, etc.<\/p>\n\n\n\n![\"navigate](\"https:\/\/rankmath.com\/wp-content\/uploads\/2022\/06\/patterns.jpg\")
<\/figure>\n\n\n\nFor instance, we’ve added columns. Select the column you want to change the background color and navigate to the Farbe<\/strong> section on the right-hand side, as shown below.<\/p>\n\n\n\n![\"change](\"https:\/\/rankmath.com\/wp-content\/uploads\/2022\/06\/change-pattern-background-scaled.jpg\")
<\/figure>\n\n\n\nSelect the background color from the color picker. Once you’ve updated the post, click on the Ver\u00f6ffentlichen<\/strong> button. You can then visit your post and view the background color for the pattern.<\/p>\n\n\n\n![\"Pattern](\"https:\/\/rankmath.com\/wp-content\/uploads\/2022\/06\/pattern-color-changed-scaled.jpg\")
<\/figure>\n\n\n\n1.5<\/span> Add Random Background Colors in WordPress<\/h3>\n\n\n\nYour users may become bored if you use a single background color. The finest thing you can do on your WordPress website is randomly change the background colors. <\/p>\n\n\n\n
To begin, you’ll need to look for the CSS class of the area where you want to change the background color randomly. Navigate to your post and, with the help of the Inspect tool, locate the CSS class.<\/p>\n\n\n\n
Once you’ve located the CSS class, open a plain text editor such as notepad and create a new file. Save the file as ‘background.js’ on your desktop. Add the following code snippet to the JS file.<\/p>\n\n\n\n
jQuery(function($) {\n $('#masthead').each(function() {\n var $this = $(this),\n colors = ['#e5d1d2', '#d2d1e1', '#c0ebf1'];\n\n setInterval(function() {\n var color = colors.shift();\n colors.push(color);\n $this.animate({ backgroundColor: color }, 2000);\n }, 4000);\n });\n});<\/code><\/pre>\n\n\n\nYou’ll notice that we’ve used the hex color code to create four different colors. For your background, you can use as many colors as you wish. Simply add the color codes in the snippet and separate them with a comma and single quotes. Be sure to change the CSS selector #masthead<\/code> from the above example to the one that is relevant for your website.<\/p>\n\n\n\nYou\u2019ll now need to upload the JS file to your WordPress theme\u2019s JS folder using a file transfer protocol (FTP) service<\/a>. Log in to your site’s FTP server. Navigate to the JS folder in your site\u2019s theme under the Remote site<\/strong> column. <\/p>\n\n\n\nYou can make a js folder if your theme doesn’t have one. Simply right-click your theme’s folder in your FTP client and select Create directory<\/strong> M\u00f6glichkeit.<\/p>\n\n\n\n![\"Create](\"https:\/\/rankmath.com\/wp-content\/uploads\/2022\/07\/Create-directory-in-Filezilla.png\")
<\/figure>\n\n\n\nThen navigate to the Local site<\/strong> column and open the location of your JS file. Then right-click the file and click the Hochladen<\/strong> option to include it in your theme.<\/p>\n\n\n\n![\"Upload](\"https:\/\/rankmath.com\/wp-content\/uploads\/2022\/07\/Upload-background.js-file.png\")
<\/figure>\n\n\n\nAdd the following code snippet into your theme\u2019s funtions.php file<\/p>\n\n\n\n
function wpb_bg_color_scripts() { \nwp_enqueue_script( 'background', get_stylesheet_directory_uri() . '\/js\/background.js', array( 'jquery-color' ), '1.0.0', true ); \n } \nadd_action( 'wp_enqueue_scripts', 'wpb_bg_color_scripts' ); <\/code><\/pre>\n\n\n\nYou can now visit your website to view the randomly changing background colors on your site.<\/p>\n\n\n\n![\"Adding](\"https:\/\/rankmath.com\/wp-content\/uploads\/2022\/07\/Adding-Random-Colors-in-WordPress.gif\")
<\/figure>\n\n\n\n2<\/span> How to Add Background Images in WordPress<\/h2>\n\n\n\nBackground images can make your website more visually appealing and engaging. Now let’s see how to add background images to your WordPress site. <\/p>\n\n\n\n
2.1<\/span> Add a Background Image Using WordPress Theme Settings<\/h3>\n\n\n\nNavigieren Sie zu Appearance \u2192 Customize<\/strong> settings from your WordPress dashboard. You’ll be navigated to the theme customizer, where you can manage different theme settings.<\/p>\n\n\n\n![\"navigate](\"https:\/\/rankmath.com\/wp-content\/uploads\/2022\/06\/background-image-scaled.jpg\")
<\/figure>\n\n\n\nAfter that, select the Background Image<\/strong> option. The window will slide in, revealing the options for uploading or selecting a background image for your website. Click on the Select image<\/strong> Taste.<\/p>\n\n\n\n![\"Select](\"https:\/\/rankmath.com\/wp-content\/uploads\/2022\/06\/add-background-image.jpg\")
<\/figure>\n\n\n\nThe WordPress media uploader pop-up will appear, allowing you to upload an image from your computer. You can also use the media library to find a previously uploaded image.<\/p>\n\n\n\n![\"Choose](\"https:\/\/rankmath.com\/wp-content\/uploads\/2022\/06\/choose-background-image-scaled.jpg\")
<\/figure>\n\n\n\nOnce selected, you will view your selected image\u2019s preview in the theme customizer. <\/p>\n\n\n\n
You’ll also notice the background image options below the image. You can choose whether you want the background image to fill the screen, fit the screen, repeat, or be custom under Preset<\/strong>.<\/p>\n\n\n\nBy using the arrows below, you may also change the position of the background picture. The image will be aligned to the centre of the screen if you click on the centre button.<\/p>\n\n\n\n![\"change](\"https:\/\/rankmath.com\/wp-content\/uploads\/2022\/06\/change-background-image-scaled.jpg\")
<\/figure>\n\n\n\nOnce you’ve updated the image settings, click on the Ver\u00f6ffentlichen<\/strong> button, and your background image will be added to your site.<\/p>\n\n\n\n2.2<\/span> Add a Background Image in WordPress Using a Plugin<\/h3>\n\n\n\nIf your theme’s settings don’t allow you to add a background image, you can add a background image with the help of a plugin. <\/p>\n\n\n\n
One of the most popular drag-and-drop page builder plugins for WordPress is Elementar<\/a>. The plugin has several features that allow you to create a fully functional website utilizing an interactive dashboard without writing a single line of code.<\/p>\n\n\n\nTo begin with, you need to install and activate the Elementar<\/a> plugin from your WordPress dashboard. Refer to our dedicated tutorial to install and activate a plugin<\/a> in WordPress.<\/p>\n\n\n\n![\"Install](\"https:\/\/rankmath.com\/wp-content\/uploads\/2022\/06\/install-elementor.jpg\")
<\/figure>\n\n\n\nNavigate to your page\/post where you want to add the background image. Click the Bearbeiten mit Elementor<\/strong> button on the page editor to open the dashboard.<\/p>\n\n\n\n![\"Bearbeiten](\"https:\/\/rankmath.com\/wp-content\/uploads\/2022\/06\/edit-with-elementor-1.jpg\")
<\/figure>\n\n\n\nTo add a background image to your page, click on the settings icon, as shown below.<\/p>\n\n\n\n![\"Click](\"https:\/\/rankmath.com\/wp-content\/uploads\/2022\/06\/click-settings-icon.jpg\")
<\/figure>\n\n\n\nClick the Background dropdown on the Stil<\/strong> tab. After that, click on the pen icon and then on Choose Image.<\/strong><\/p>\n\n\n\n![\"choose](\"https:\/\/rankmath.com\/wp-content\/uploads\/2022\/06\/choose-image-scaled.jpg\")
<\/figure>\n\n\n\nYou can now choose an image from the WordPress media library or upload a new one. Click on Ver\u00f6ffentlichen<\/strong> button, and the background image will be added to your site.<\/p>\n\n\n\n![\"background](\"https:\/\/rankmath.com\/wp-content\/uploads\/2022\/06\/background-image-added-scaled.jpg\")
<\/figure>\n\n\n\n2.3<\/span> Add Background Images in WordPress Using CSS Code<\/h3>\n\n\n\nIf you’re a tech-savvy, you can use custom CSS codes and add backgrounds to your pages and posts.<\/p>\n\n\n\n
You have a lot of flexibility and control over the appearance and placement of the images when you use custom CSS. <\/p>\n\n\n\n
Navigieren Sie dazu zu Appearance \u2192 Customize<\/strong> from your WordPress dashboard. Navigate to the Zus\u00e4tzliches CSS<\/strong> section. In the Additional CSS section, add the following code snippet.<\/p>\n\n\n\nbody\n{\n\tbackground: url(example-image.jpg);\n}<\/code><\/pre>\n\n\n\nEnsure you replace example-image.jpg with the URL you want to use as your background image.<\/p>\n\n\n\n![\"Background](\"https:\/\/rankmath.com\/wp-content\/uploads\/2022\/06\/background-image-custom-css-1-scaled.jpg\")
<\/figure>\n\n\n\nThe above code will set a global background image for all of your website’s pages. You can visit your site and see the new background image added to your site.<\/p>\n\n\n\n
Fazit<\/h2>\n\n\n\n
It takes no time or effort to change the background that will appear across your page. It’s a feature incorporated into the WordPress Core, making it simple to change the backgrounds for special occasions. You can also choose a single background for the rest of your life.<\/p>\n\n\n\n
You can use custom CSS code, plugins, and page builders to change the backgrounds on your WordPress site. The possibilities are endless, from image backgrounds on certain pages to background colors for your site. <\/p>\n\n\n\n
It\u2019s now time to change the background you\u2019ve always wanted on your WordPress site.<\/p>\n\n\n\n
- \n
- Change Background Color Using WordPress Theme Customizer<\/a><\/li>\n
- Change Background Color By Adding Custom CSS<\/a><\/li>\n
- Change Background Color for Individual Posts<\/a><\/li>\n
- Change Background Color for Patterns<\/a><\/li>\n <\/ul>\n <\/li>\n\n
- \n How to Add Background Images in WordPress<\/a>\n
- \n
- Add a Background Image Using WordPress Theme Settings<\/a><\/li>\n
- Add a Background Image in WordPress Using a Plugin<\/a><\/li>\n
- Add Background Images in WordPress Using CSS Code<\/a><\/li>\n <\/ul>\n <\/li>\n\n
- Fazit<\/a><\/li>\n <\/ol>\n<\/div>\n\n\n\n
1<\/span> How to Change the Background Color in WordPress<\/h2>\n\n\n\n
There are various ways to change the background color in WordPress. You can do so with the help of a theme customizer or use custom CSS. Let us look at the various ways in detail.<\/p>\n\n\n\n
1.1<\/span> Change Background Color Using WordPress Theme Customizer<\/h3>\n\n\n\n
Using the WordPress Theme Customizer, you can change the background color depending on your theme. It allows you to change the look of your site in real-time without having to change the code.<\/p>\n\n\n\n
Log in to your website and navigate to Appearance \u2192 Themes \u2192 Customize<\/strong> to use the WordPress Theme Customizer.<\/p>\n\n\n\n
<\/figure>\n\n\n\nThis will bring up the Theme Customizer, where you can tweak your theme in various ways. To change the background color of your website, go ahead and click on the Styles \u2192 Colors<\/strong> settings tab from the menu on your right.<\/p>\n\n\n\n
<\/figure>\n\n\n\nThe next step is to pick a backdrop color for your website. You can use the color picker tool or enter a hex color code for your background.<\/p>\n\n\n\n
<\/figure>\n\n\n\nDon’t forget to hit the Save\/Publish<\/strong> button when you’re done making changes. You may now see the new background color in action on your website.<\/p>\n\n\n\n
<\/figure>\n\n\n\n1.2<\/span> Change Background Color By Adding Custom CSS<\/h3>\n\n\n\n
You can add a custom CSS code to change the background color of your site. To do so, navigate to Appearance \u2192 Customize<\/strong> aus Ihrem WordPress-Dashboard. <\/p>\n\n\n\n
<\/figure>\n\n\n\nNavigieren Sie dann zu Zus\u00e4tzliches CSS<\/strong> section and add the following code.<\/p>\n\n\n\n
body {\n background-color: #FFFFFF;\n}<\/code><\/pre>\n\n\n\nReplace the background color code with the color code that you want to use on your website. Once you’ve added the code, click Ver\u00f6ffentlichen<\/strong> button and visit your site to view the new background color.<\/p>\n\n\n\n
<\/figure>\n\n\n\n1.3<\/span> Change Background Color for Individual Posts<\/h3>\n\n\n\n
Instead of having a single color throughout your website, you may change the background color of each blog post in WordPress using custom CSS.<\/p>\n\n\n\n
It allows you to customize the look of individual posts and their backgrounds. For example, you can change the background color of your most commented article or adjust each post’s layout based on the authors.<\/p>\n\n\n\n
You’ll need to look in your theme’s CSS for the post ID <\/strong>class. You may do this by browsing any blog post and then right-clicking to use your browser’s Inspect tool<\/a>.<\/p>\n\n\n\n
<\/figure>\n\n\n\nOnce you have your post ID, you may use the following custom CSS to modify the background color of a single post. Replace the post ID with your own and the desired background color code.<\/p>\n\n\n\n
.postid-1349 {\nbackground: #D7DEB5\n}<\/code><\/pre>\n\n\n\nThe WordPress Theme Customizer can be used to add custom CSS. Add the code to the Zus\u00e4tzliches CSS <\/strong>section and click on Ver\u00f6ffentlichen<\/strong> Taste.<\/p>\n\n\n\n
<\/figure>\n\n\n\nYou can now check the post and view the new background color. <\/p>\n\n\n\n
1.4<\/span> Change Background Color for Patterns<\/h3>\n\n\n\n
Patterns are predefined block layouts accessed on the block inserter’s patterns tab. To add a pattern, click on the ‘+’ sign in the upper left corner, as shown below.<\/p>\n\n\n\n
<\/figure>\n\n\n\n<\/p>\n\n\n\n
Navigieren Sie zu Patterns<\/strong> tab, where you can select categories such as headers, footers, gallery, etc.<\/p>\n\n\n\n
<\/figure>\n\n\n\nFor instance, we’ve added columns. Select the column you want to change the background color and navigate to the Farbe<\/strong> section on the right-hand side, as shown below.<\/p>\n\n\n\n
<\/figure>\n\n\n\nSelect the background color from the color picker. Once you’ve updated the post, click on the Ver\u00f6ffentlichen<\/strong> button. You can then visit your post and view the background color for the pattern.<\/p>\n\n\n\n
<\/figure>\n\n\n\n1.5<\/span> Add Random Background Colors in WordPress<\/h3>\n\n\n\n
Your users may become bored if you use a single background color. The finest thing you can do on your WordPress website is randomly change the background colors. <\/p>\n\n\n\n
To begin, you’ll need to look for the CSS class of the area where you want to change the background color randomly. Navigate to your post and, with the help of the Inspect tool, locate the CSS class.<\/p>\n\n\n\n
Once you’ve located the CSS class, open a plain text editor such as notepad and create a new file. Save the file as ‘background.js’ on your desktop. Add the following code snippet to the JS file.<\/p>\n\n\n\n
jQuery(function($) {\n $('#masthead').each(function() {\n var $this = $(this),\n colors = ['#e5d1d2', '#d2d1e1', '#c0ebf1'];\n\n setInterval(function() {\n var color = colors.shift();\n colors.push(color);\n $this.animate({ backgroundColor: color }, 2000);\n }, 4000);\n });\n});<\/code><\/pre>\n\n\n\nYou’ll notice that we’ve used the hex color code to create four different colors. For your background, you can use as many colors as you wish. Simply add the color codes in the snippet and separate them with a comma and single quotes. Be sure to change the CSS selector
#masthead<\/code> from the above example to the one that is relevant for your website.<\/p>\n\n\n\nYou\u2019ll now need to upload the JS file to your WordPress theme\u2019s JS folder using a file transfer protocol (FTP) service<\/a>. Log in to your site’s FTP server. Navigate to the JS folder in your site\u2019s theme under the Remote site<\/strong> column. <\/p>\n\n\n\n
You can make a js folder if your theme doesn’t have one. Simply right-click your theme’s folder in your FTP client and select Create directory<\/strong> M\u00f6glichkeit.<\/p>\n\n\n\n
<\/figure>\n\n\n\nThen navigate to the Local site<\/strong> column and open the location of your JS file. Then right-click the file and click the Hochladen<\/strong> option to include it in your theme.<\/p>\n\n\n\n
<\/figure>\n\n\n\nAdd the following code snippet into your theme\u2019s funtions.php file<\/p>\n\n\n\n
function wpb_bg_color_scripts() { \nwp_enqueue_script( 'background', get_stylesheet_directory_uri() . '\/js\/background.js', array( 'jquery-color' ), '1.0.0', true ); \n } \nadd_action( 'wp_enqueue_scripts', 'wpb_bg_color_scripts' ); <\/code><\/pre>\n\n\n\nYou can now visit your website to view the randomly changing background colors on your site.<\/p>\n\n\n\n
<\/figure>\n\n\n\n2<\/span> How to Add Background Images in WordPress<\/h2>\n\n\n\n
Background images can make your website more visually appealing and engaging. Now let’s see how to add background images to your WordPress site. <\/p>\n\n\n\n
2.1<\/span> Add a Background Image Using WordPress Theme Settings<\/h3>\n\n\n\n
Navigieren Sie zu Appearance \u2192 Customize<\/strong> settings from your WordPress dashboard. You’ll be navigated to the theme customizer, where you can manage different theme settings.<\/p>\n\n\n\n
<\/figure>\n\n\n\nAfter that, select the Background Image<\/strong> option. The window will slide in, revealing the options for uploading or selecting a background image for your website. Click on the Select image<\/strong> Taste.<\/p>\n\n\n\n
<\/figure>\n\n\n\nThe WordPress media uploader pop-up will appear, allowing you to upload an image from your computer. You can also use the media library to find a previously uploaded image.<\/p>\n\n\n\n
<\/figure>\n\n\n\nOnce selected, you will view your selected image\u2019s preview in the theme customizer. <\/p>\n\n\n\n
You’ll also notice the background image options below the image. You can choose whether you want the background image to fill the screen, fit the screen, repeat, or be custom under Preset<\/strong>.<\/p>\n\n\n\n
By using the arrows below, you may also change the position of the background picture. The image will be aligned to the centre of the screen if you click on the centre button.<\/p>\n\n\n\n
<\/figure>\n\n\n\nOnce you’ve updated the image settings, click on the Ver\u00f6ffentlichen<\/strong> button, and your background image will be added to your site.<\/p>\n\n\n\n
2.2<\/span> Add a Background Image in WordPress Using a Plugin<\/h3>\n\n\n\n
If your theme’s settings don’t allow you to add a background image, you can add a background image with the help of a plugin. <\/p>\n\n\n\n
One of the most popular drag-and-drop page builder plugins for WordPress is Elementar<\/a>. The plugin has several features that allow you to create a fully functional website utilizing an interactive dashboard without writing a single line of code.<\/p>\n\n\n\n
To begin with, you need to install and activate the Elementar<\/a> plugin from your WordPress dashboard. Refer to our dedicated tutorial to install and activate a plugin<\/a> in WordPress.<\/p>\n\n\n\n
<\/figure>\n\n\n\nNavigate to your page\/post where you want to add the background image. Click the Bearbeiten mit Elementor<\/strong> button on the page editor to open the dashboard.<\/p>\n\n\n\n
<\/figure>\n\n\n\nTo add a background image to your page, click on the settings icon, as shown below.<\/p>\n\n\n\n
<\/figure>\n\n\n\nClick the Background dropdown on the Stil<\/strong> tab. After that, click on the pen icon and then on Choose Image.<\/strong><\/p>\n\n\n\n
<\/figure>\n\n\n\nYou can now choose an image from the WordPress media library or upload a new one. Click on Ver\u00f6ffentlichen<\/strong> button, and the background image will be added to your site.<\/p>\n\n\n\n
<\/figure>\n\n\n\n2.3<\/span> Add Background Images in WordPress Using CSS Code<\/h3>\n\n\n\n
If you’re a tech-savvy, you can use custom CSS codes and add backgrounds to your pages and posts.<\/p>\n\n\n\n
You have a lot of flexibility and control over the appearance and placement of the images when you use custom CSS. <\/p>\n\n\n\n
Navigieren Sie dazu zu Appearance \u2192 Customize<\/strong> from your WordPress dashboard. Navigate to the Zus\u00e4tzliches CSS<\/strong> section. In the Additional CSS section, add the following code snippet.<\/p>\n\n\n\n
body\n{\n\tbackground: url(example-image.jpg);\n}<\/code><\/pre>\n\n\n\nEnsure you replace example-image.jpg with the URL you want to use as your background image.<\/p>\n\n\n\n
<\/figure>\n\n\n\nThe above code will set a global background image for all of your website’s pages. You can visit your site and see the new background image added to your site.<\/p>\n\n\n\n
Fazit<\/h2>\n\n\n\n
It takes no time or effort to change the background that will appear across your page. It’s a feature incorporated into the WordPress Core, making it simple to change the backgrounds for special occasions. You can also choose a single background for the rest of your life.<\/p>\n\n\n\n
You can use custom CSS code, plugins, and page builders to change the backgrounds on your WordPress site. The possibilities are endless, from image backgrounds on certain pages to background colors for your site. <\/p>\n\n\n\n
It\u2019s now time to change the background you\u2019ve always wanted on your WordPress site.<\/p>\n\n\n\n
- Add a Background Image in WordPress Using a Plugin<\/a><\/li>\n
- Change Background Color By Adding Custom CSS<\/a><\/li>\n