JS Animated. How replace color background with image in CSS

This tutorial shows how to replace background color with image in CSS.

1. Connect to server via FTP or open cPanel file manager.

2. Open the images folder on server and upload image you would like to set as background into it.

3. When image is uploaded, copy correct path to the image. Usually it’s your site URL+images folder name+image name and format:

   

4. Next, open site in your browser and use the Inspect Element tool to find what file and line you will need to edit:

   

5. Now replace the background property with the background-image one. In order to place image into the property, use the url(“”) value. Insert image path you’ve uploaded into quotation marks:

   background-image: url("http://demolink.org/site/images/header-bg.jpg");

6. In case you’re uploading pattern image or image with smaller width, you can use the background-repeat property. It allows to repeat image vertically and horizontally, only vertically or horizontally or stop image repeating:

   background-repeat: no-repeat;
   background-repeat: repeat-x;
   background-repeat: repeat-y;
   background-repeat: repeat;
   

   By default, background image is loaded in the top left corner of the element. You can move background image by using the background-position property. Final version of the line will look like the following:

   .your element {
   background-image: url("http://demolink.org/site/images/your_image.jpg");
   background-position: center center;
   background-repeat: no-repeat;}
   

7. Copy the edited line from Firebug/Inspect Element with Ctrl/Cmd+C hotkeys. There you can find path to CSS file that should be edited as well:

   

8. Find and edit CSS file required via FTP or cPanel file manager. You can edit file using online editor or any other HTML editor. Use Ctrl/Cmd+F5 hotkeys to find code in case you editor is missing line numbers.

9. Find the line required and replace it with the updated code, i.e. with the one copied from Firebug/Inspect Element.

10. Save changes in the file. Refresh page to check the changes.

Feel free to check the detailed video tutorial below: