{"id":5265,"date":"2015-07-07T12:15:28","date_gmt":"2015-07-07T09:15:28","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=5265"},"modified":"2018-01-08T14:21:29","modified_gmt":"2018-01-08T12:21:29","slug":"css-multiple-background-images-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/css\/css-multiple-background-images-example\/","title":{"rendered":"CSS Multiple Background Images Example"},"content":{"rendered":"<p>The aim of this example is to go through the application of multiple background images to a webpage or a specific elements within the page.<\/p>\n<p>CSS3 allows you to add multiple background images for an element, through the background-image property built right into the core CSS.<\/p>\n<p>The different background images are separated by commas, just like a comma separated list, and the images are stacked on top of each other.<\/p>\n<p>Browser support for multiple backgrounds is relatively widespread with Mozilla Firefox (3.6+), Safari\/Chrome (1.0\/1.3+), Opera (10.5+) and even Internet Explorer (9.0+) all implementing the feature.<br \/>\n&nbsp;<br \/>\n[ulp id=&#8217;nAkUl5IbAjqlXSla&#8217;]<\/p>\n<h2>1. Basic Setup &amp; Application <\/h2>\n<p>Go ahead and create a new html document and add the basic sytnax in it like so:<\/p>\n<pre class=\"brush:xml\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n\t&lt;title&gt;CSS3 Multiple Background Images Example&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;!-- STYLE SECTION --&gt;\r\n\r\n&lt;style type=\"text\/css\"&gt;\r\n\r\n&lt;\/style&gt;\r\n\r\n&lt;!-- HTML SECTION --&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>Before moving on, know the structure: <code>background-image: url(image.jpg\/png\/gif), url (another_image.jpg\/png\/gif)<\/code>.<\/p>\n<p>To see a basic application lets first add two text elements in html inside a wrapping div element.<\/p>\n<pre class=\"brush:xml\">\r\n&lt;!-- HTML SECTION  --&gt;\r\n&lt;div class=\"basic\"&gt;\r\n\t&lt;h2&gt;The basic application!&lt;\/h2&gt;\r\n\t&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\r\n\ttempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\r\n\tquis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\r\n\tconsequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\r\n\tcillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\r\n\tproident, sunt in culpa qui officia deserunt mollit anim id est laborum. &lt;\/p&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>Then apply the property in css following the guide\/structure above. It would look like so:<\/p>\n<pre class=\"brush:css\">\r\n&lt;!-- STYLE  SECTION --&gt;\r\n&lt;style type=\"text\/css\"&gt;\r\n.basic {\r\n\tbackground-image: url(bg2.png), url(bg1.jpg); \/* set two bg images *\/\r\n\tbackground-position: center, center; \/* centered both images *\/\r\n\twidth: 600px;\t\/* restricted images into a specified width *\/\r\n\theight: 300px;\t\/* restricted images into a specified height *\/\r\n}\r\n&lt;\/style&gt;\r\n<\/pre>\n<p>We just applied it and positioned both images in the center. In the browser, you would have something like this:<br \/>\n<figure id=\"attachment_5275\" aria-describedby=\"caption-attachment-5275\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/multiple1.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/multiple1.jpg\" alt=\"Basic Application of Multiple Backgorund Images \" width=\"820\" height=\"463\" class=\"size-full wp-image-5275\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/multiple1.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/multiple1-300x169.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-5275\" class=\"wp-caption-text\">Basic Application of Multiple Backgorund Images<\/figcaption><\/figure><\/p>\n<h2>2. Cases and Examples <\/h2>\n<p>Below, we&#8217;ll have a look at some interesting and popular usage of multiple backgrounds. We will leave the html for now.<\/p>\n<h3>2.1 Combining a JPG with a PNG as backgrounds<\/h3>\n<p>If you want a clear background, and see any text in it, you&#8217;ll probably love png images that support transparency. <\/p>\n<p>Look at the code below:<\/p>\n<pre class=\"brush:css\">\r\n.basic {\r\n  \tbackground-image: url(bg3.png), url(bg4.png), url(bg1.jpg); \/* set three bg images *\/\r\n  \tbackground-position: right bottom, center bottom, center; \/* positioned images *\/\r\n  \tbackground-repeat: no-repeat;  \/* no bg images should repeat *\/\r\n  \twidth: 600px;\t\/* restricted images into a specified width *\/\r\n  \theight: 300px;\t\/* restricted images into a specified height *\/\r\n}\r\n<\/pre>\n<p>We added one jpg background and two png&#8217;s. But you can add as many as you want. The example above would this way:<br \/>\n<figure id=\"attachment_5279\" aria-describedby=\"caption-attachment-5279\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/multiple2.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/multiple2.jpg\" alt=\"Combining Image Formats for Multiple Backgrounds\" width=\"820\" height=\"463\" class=\"size-full wp-image-5279\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/multiple2.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/multiple2-300x169.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-5279\" class=\"wp-caption-text\">Combining Image Formats for Multiple Backgrounds<\/figcaption><\/figure><\/p>\n<h3>2.2 Full Page Backgrounds and Opacity <\/h3>\n<p>Just like we applied a bg image to a div element, we can have a full page bg image alongside with nested bg images inside div elements,and add opacity to specific backgrounds to achieve the design\/view you need and make it more attractive. For example, look at this:<\/p>\n<pre class=\"brush:css\">\r\nbody {\r\n\tfont-family: \"Montserrat\";\r\n\tbackground-image: url(bg1.jpg);\t\/* set the full page backgrounf *\/\r\n\tbackground-position:  center;\r\n}\r\n.basic {\r\n\tbackground-image: url(bg5.png), url(bg6.png); \/* set two bg images *\/\r\n\topacity: 0.5; \/* reduced opacity *\/\r\n\tbackground-position:  center, left center; \/* centered both images *\/\r\n\tbackground-repeat: no-repeat;\r\n\twidth: 60em;\t\/* restricted images into a specified width *\/\r\n\theight: 60em;\t\/* restricted images into a specified height *\/\r\n}\r\n<\/pre>\n<p>This case represents a complete exmaple of a nice usage of bg images. Look at this view:<br \/>\n<figure id=\"attachment_5284\" aria-describedby=\"caption-attachment-5284\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/multiple3.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/multiple3.jpg\" alt=\"A complete example on a real-world scenario!\" width=\"820\" height=\"708\" class=\"size-full wp-image-5284\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/multiple3.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/multiple3-300x259.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-5284\" class=\"wp-caption-text\">A complete example on a real-world scenario!<\/figcaption><\/figure><\/p>\n<h2>3. Conclusion<\/h2>\n<p>To conclude, the multiple backgrounds in CSS3 are a great way to create visually stunning webpages and add relevant content in it, and are pretty easy to apply, just by using commas after each image. Keep in mind that the arrangement of the front or back positioning of the image depends on the way you write them.<\/p>\n<p>The image you add first in the <code>url()<\/code> syntax will be the most front one, and other images coming back one after the other. <\/p>\n<h2>4. Download<\/h2>\n<div class=\"download\"><strong>Download<\/strong><br \/>\nYou can download the full source code of this example here: <a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/CSS-Multiple-Background-Image.zip\"><strong>CSS Multiple Background Image<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The aim of this example is to go through the application of multiple background images to a webpage or a specific elements within the page. CSS3 allows you to add multiple background images for an element, through the background-image property built right into the core CSS. The different background images are separated by commas, just &hellip;<\/p>\n","protected":false},"author":75,"featured_media":917,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-5265","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS Multiple Background Images Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"The aim of this example is to go through the application of multiple background images to a webpage or a specific elements within the page. CSS3 allows\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/css\/css-multiple-background-images-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Multiple Background Images Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"The aim of this example is to go through the application of multiple background images to a webpage or a specific elements within the page. CSS3 allows\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/css\/css-multiple-background-images-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-07-07T09:15:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-08T12:21:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-multiple-background-images-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-multiple-background-images-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"CSS Multiple Background Images Example\",\"datePublished\":\"2015-07-07T09:15:28+00:00\",\"dateModified\":\"2018-01-08T12:21:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-multiple-background-images-example\/\"},\"wordCount\":476,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-multiple-background-images-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-multiple-background-images-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-multiple-background-images-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/css\/css-multiple-background-images-example\/\",\"name\":\"CSS Multiple Background Images Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-multiple-background-images-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-multiple-background-images-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"datePublished\":\"2015-07-07T09:15:28+00:00\",\"dateModified\":\"2018-01-08T12:21:29+00:00\",\"description\":\"The aim of this example is to go through the application of multiple background images to a webpage or a specific elements within the page. CSS3 allows\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-multiple-background-images-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-multiple-background-images-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-multiple-background-images-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-multiple-background-images-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Multiple Background Images Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Multiple Background Images Example - Web Code Geeks - 2026","description":"The aim of this example is to go through the application of multiple background images to a webpage or a specific elements within the page. CSS3 allows","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/css\/css-multiple-background-images-example\/","og_locale":"en_US","og_type":"article","og_title":"CSS Multiple Background Images Example - Web Code Geeks - 2026","og_description":"The aim of this example is to go through the application of multiple background images to a webpage or a specific elements within the page. CSS3 allows","og_url":"https:\/\/www.webcodegeeks.com\/css\/css-multiple-background-images-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-07-07T09:15:28+00:00","article_modified_time":"2018-01-08T12:21:29+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/css\/css-multiple-background-images-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-multiple-background-images-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"CSS Multiple Background Images Example","datePublished":"2015-07-07T09:15:28+00:00","dateModified":"2018-01-08T12:21:29+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-multiple-background-images-example\/"},"wordCount":476,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-multiple-background-images-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/css\/css-multiple-background-images-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/css\/css-multiple-background-images-example\/","url":"https:\/\/www.webcodegeeks.com\/css\/css-multiple-background-images-example\/","name":"CSS Multiple Background Images Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-multiple-background-images-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-multiple-background-images-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","datePublished":"2015-07-07T09:15:28+00:00","dateModified":"2018-01-08T12:21:29+00:00","description":"The aim of this example is to go through the application of multiple background images to a webpage or a specific elements within the page. CSS3 allows","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-multiple-background-images-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/css\/css-multiple-background-images-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/css\/css-multiple-background-images-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/css\/css-multiple-background-images-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/www.webcodegeeks.com\/category\/css\/"},{"@type":"ListItem","position":3,"name":"CSS Multiple Background Images Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/5265","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=5265"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/5265\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/917"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=5265"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=5265"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=5265"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}