Categories

Featured templates

JS Animated. How replace color background with image in CSS

Stacy Martin August 10, 2015
Rating: 5.0/5. From 1 vote.
Please wait...

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

JS Animated. How replace color background 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:

    HTML.How replace color background with image in CSS-1
  4. Next, open site in your browser and use the Inspect Element tool to find what file and line you will need to edit:

    HTML.How replace color background with image in CSS-2
  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:

    HTML.How replace color background with image in CSS-3
  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:

JS Animated. How replace color background with image in CSS
This entry was posted in JS Animated tutorials and tagged background, color, css, image. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket