{"id":51590,"date":"2015-08-10T02:06:05","date_gmt":"2015-08-10T06:06:05","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=51590"},"modified":"2015-08-10T02:06:05","modified_gmt":"2015-08-10T06:06:05","slug":"js-animated-how-replace-color-background-with-image-in-css","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/js-animated-how-replace-color-background-with-image-in-css.html","title":{"rendered":"JS Animated. How replace color background with image in CSS"},"content":{"rendered":"

This tutorial shows how to replace background color <\/strong>with image in CSS.<\/p>\r\nJS Animated. How replace color background with image in CSS<\/a>\r\n

    \r\n

  1. Connect to server via FTP<\/a> or open cPanel file manager<\/a>.\r\n <\/p><\/li>\r\n

  2. \r\n

    Open the images folder<\/strong> on server and upload image you would like to set as background into it.<\/p><\/li>\r\n\r\n

  3. \r\n

    When image is uploaded, copy correct path to the image. Usually it’s your site URL+images folder name+image name and format<\/strong>:<\/p>\r\n \r\n\"HTML.How<\/a>\r\n<\/li>\r\n

  4. \r\n

    Next, open site in your browser and use the Inspect Element tool<\/a> to find what file and line you will need to edit:<\/p>\r\n \r\n\"HTML.How<\/a>\r\n <\/li>\r\n

  5. \r\n

    Now replace the background<\/strong> property with the background-image<\/strong> one. In order to place image into the property, use the url(“”)<\/strong> value. Insert image path you’ve uploaded into quotation marks:<\/p>\r\n 

    background-image: url("http:\/\/demolink.org\/site\/images\/header-bg.jpg");<\/pre>\r\n  <\/li>\r\n
  6. In case you’re uploading pattern image or image with smaller width, you can use the background-repeat<\/strong> property. It allows to repeat image vertically and horizontally, only vertically or horizontally or stop image repeating:<\/p>\r\n
    background-repeat: no-repeat;\r\nbackground-repeat: repeat-x;\r\nbackground-repeat: repeat-y;\r\nbackground-repeat: repeat;\r\n<\/pre>\r\n  
    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:<\/p>\r\n
    .your element {\r\nbackground-image: url("http:\/\/demolink.org\/site\/images\/your_image.jpg");\r\nbackground-position: center center;\r\nbackground-repeat: no-repeat;}\r\n<\/pre>\r\n<\/li>\r\n  
  7. \r\n    
    Copy the edited line from Firebug\/Inspect Element<\/strong> with Ctrl\/Cmd+C hotkeys<\/strong>. There you can find path to CSS file that should be edited as well:<\/p>\r\n    \r\n\"HTML.How<\/a>\r\n  <\/li>\r\n  
  8. \r\n    
    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<\/strong> to find code in case you editor is missing line numbers.<\/p>\r\n  <\/li>\r\n  
  9. Find the line required and replace it with the updated code, i.e. with the one copied from Firebug\/Inspect Element.<\/p><\/li>\r\n  
  10. Save changes in the file. Refresh page to check the changes. <\/p><\/li>\r\n  <\/ol>\r\n
    Feel free to check the detailed video tutorial below:<\/p>\r\n\r\nJS Animated. How replace color background with image in CSS<\/a>","protected":false},"excerpt":{"rendered":"
    This tutorial shows how to replace background color <\/strong>with image in CSS.<\/p>\n","protected":false},"author":65,"featured_media":51813,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1016],"tags":[1008,520,514,537],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/51590"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=51590"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/51590\/revisions"}],"predecessor-version":[{"id":83727,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/51590\/revisions\/83727"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/51813"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=51590"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=51590"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=51590"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}