Our Blog

With majority of people choosing WordPress for website development and using Photoshop for images, it is important that you know how to move PSD background to WordPress, whether it is for the entire website or individual sections, such as sidebar, footer, widgets, etc. However, background image is not suitable for all websites and you should be able to figure out where and how to place background images while making PSD to WordPress theme conversion. This article explains the process in detail.

Working with Background Images

Many people do not like background images on their website, but there are situations where it works quite well. But before you place a background image you need to take certain things into consideration.

First, it can slow down the site’s loading, and second, if it’s not a pattern you would need to modify the CSS code so that it doesn’t repeat as it can be quite irritating. Also, if you want the content to overlay the image, you would need to put in extra time and effort on coding and it could adversely affect the flexibility.

That said, there could be situations where a background image is genuinely required, so let’s go through the steps.

Saving a Background Image in Photoshop

Optimize images in Photoshop to make them web-ready. The size of the image and the file matters more if the image is not to be tiled in the background; background images slow down the website’s loading time. You may like the image to be large enough to cover the entire content, but still want to keep their size to the minimum. Otherwise, you could use images that cover only one side of the website.

Updating Your WordPress Website to Use a Background Image

If you wish to update the background for your whole website, you should first explore the Customize option under the Editor in the WordPress Dashboard. Themes usually have an update option, but you may still need to modify the CSS to make the background image behave as desired. If the option is not available, you can check other options. On the other hand, if the option is available and you want to change the default settings or want to change the background images in separate sections of the website continue reading further.

Uploading the Background Image

If the above-mentioned process doesn’t work for you, you will have to upload the image to your website. You can either do this through the Media Library or upload any images used within your CSS code into the child theme directory. To do this, you’ll need an FTP client for which Filezilla is highly recommended. You can create an image folder in the child theme’s folder if it is not already available there. This folder is at an equal level with the style.css file, so it’s important to understand your file structure because you have to indicate to WordPress where to find the background image.

Find Where to Update CSS in Your Theme

If background image updating option is not available in the customize option under the editor or you have to modify how the image is handled, you will have to update the CSS code of your website. First you have to identify the place where CSS code can be updated. Once you have identified the place, you can employ different methods to update the code depending on your theme. Where to update CSS code for your particular theme can be determined by examining three places:

• Update CSS option under Theme Options
• Update CSS using a plugin
• Update CSS under Editor using a child theme

Updating the CSS for Background Image

The final stage of PSD to WordPress theme conversion is to update the CSS. After you have located the place where you can update the CSS, you have to determine what needs to be updated. To add the background image the CSS property that needs to be added is background. If the image is meant for the whole website, you will have to update it for the body tag. If you want to add a background image to a particular section of the website, then you need to update for that section only. If you encounter any difficulty in finding the given section name, take help from the inspect element option. Use the no-repeat option to avoid repetitions.

Use the “background-position” property to position images. Images are positioned with percentage and length expressed in X and Y-axis respectively. You can also use keywords for the horizontal position of the image; the vertical position is assumed to be 50% or centered vertically. To place an image in the center, you will have to use the “background-attachment” property. If you don’t want your image to scroll, you need to assign a fixed value.

If you find the above process too daunting, you can always hire WordPress developers to do the job.