{"id":3015,"date":"2016-11-10T06:43:30","date_gmt":"2016-11-10T12:43:30","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=1976"},"modified":"2016-11-10T06:43:30","modified_gmt":"2016-11-10T12:43:30","slug":"using-images-as-backgrounds-with-css3","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/using-images-as-backgrounds-with-css3\/","title":{"rendered":"Using Images as Backgrounds with CSS3"},"content":{"rendered":"

With CSS you can make an image the background not only of the entire body of pages, but also of individual elements too. All you need to do is use the background property and provide the path to the image.<\/p>\n

Let’s say you have this boring page, and you want to punch it up by using a fun image as the background:<\/p>\n

\"Screen<\/p>\n

Here’s the CSS you would use to add a fun background:<\/p>\n

\r\n\r\n\t\t
\r\n\r\n\t\t
\r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
css<\/div>\r\n\r\n\t\t\r\n\t\t
\r\n\r\n\t<\/div>\r\n\t\r\n\t
\r\n\t\t
  1. body{<\/span><\/div><\/li>\n
  2. background<\/span>:<\/span> url<\/span>(<\/span>path\/to\/image.jpg<\/span>)<\/span>;<\/span><\/div><\/li>\n
  3. background-size:<\/span> cover;<\/span><\/div><\/li>\n
  4. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    Make sure to put the path to your image — either a locally hosted image or a live URL to an image you’ve found online (although saving the background to your server and linking to a local image is definitely the best way to go) in the url parameters for the background property. In this particular case we also used the background-size property to make sure that the image was appropriately sized to the browser). Other properties you can use to customize the way your background image appears on your site are background-position, background-repeat, and background-attachment. Keep in mind that this same CSS technique can be used to set images as backgrounds for elements other than the body, such as divs. Here are the results (results will vary based on which image you choose to use!):<\/p>\n

    \"Screen<\/p>\n

     <\/p>\n

    Share and Enjoy !<\/h3>
    0<\/span><\/span>Shares<\/small><\/div>
    <\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

    With CSS you can make an image the background not only of the entire body of pages, but also of individual elements too. All you need to do is use the background property and provide the path to the image.<\/p>\n

    Let’s […]<\/p>\n

    Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2778,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[173,174],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3015"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=3015"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3015\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2778"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=3015"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=3015"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=3015"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}