{"id":74171,"date":"2020-01-17T11:35:59","date_gmt":"2020-01-17T06:05:59","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=74171"},"modified":"2024-04-12T14:23:20","modified_gmt":"2024-04-12T08:53:20","slug":"css3-multiple-background-images-and-styles","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/css3-multiple-background-images-and-styles\/","title":{"rendered":"CSS3 Multiple Background Images and Styles"},"content":{"rendered":"<div>With CSS3, you can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color.<\/div>\n<div><\/div>\n<div>Specifying multiple backgrounds is easy:<\/div>\n<div><\/div>\n<div>.myclass {<br \/>\nbackground: background1, background 2, &#8230;, backgroundN;<br \/>\n}<\/div>\n<div><\/div>\n<div>You can do this with both the shorthand background property and the individual properties thereof except for background-color. That is, the following background properties can be specified as a list, one per background: background, background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size.<\/div>\n<div><strong>Example<\/strong><br \/>\nIn this example, three backgrounds are stacked: the Firefox logo, a linear gradient, and an image with flowers:<\/div>\n<div><\/div>\n<div>.multi_bg_example {<br \/>\nbackground: url(http:\/\/demos.hacks.mozilla.org\/openweb\/resources\/images\/logos\/firefox-48.png),<br \/>\nlinear-gradient(to right, rgba(255, 255, 255, 0),\u00a0 rgba(255, 255, 255, 1)),<br \/>\nurl(http:\/\/demos.hacks.mozilla.org\/openweb\/resources\/images\/patterns\/flowers-pattern.jpg);<br \/>\nbackground-repeat: no-repeat, no-repeat, repeat;<br \/>\nbackground-position: bottom right, left, right;<br \/>\n}<\/div>\n<div><\/div>\n<div><strong>Result<\/strong><\/div>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-59635 alignleft\" src=\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/CSS3-Multiple-Background-Images-and-Style.png\" alt=\"CSS3 Multiple Background Images and Style\" width=\"210\" height=\"114\" \/><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div>As you can see here, the Firefox logo (listed first) is on top, followed by the gradient, which is layered atop the flowered background. Each subsequent sub-property (background-repeat and background-position) applies to the corresponding backgrounds. So the first listed value for background-repeat applies to the first (frontmost) background, and so forth.<\/div>\n<div>\n<h5 id=\"block-07feabc5-3923-4122-ba70-f7cf1db64a8f\" class=\"block-editor-block-list__block wp-block is-selected rich-text block-editor-rich-text__editable is-hovered wp-block\" tabindex=\"0\" role=\"textbox\" contenteditable=\"true\" aria-label=\"Write heading\u2026\" aria-multiline=\"true\" data-block=\"07feabc5-3923-4122-ba70-f7cf1db64a8f\" data-type=\"core\/heading\" data-title=\"Heading\">Go To-\u00a0<a href=\"https:\/\/www.vskills.in\/certification\/tutorial\/certified-css3-developer\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Certified CSS3 Developer<\/strong>\u00a0<strong>Tutorial<\/strong><\/a><\/h5>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>With CSS3, you can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color. Specifying multiple backgrounds is easy: .myclass { background: background1, background 2, &#8230;, backgroundN; } You&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[8568],"tags":[8575],"class_list":["post-74171","page","type-page","status-publish","hentry","category-css3","tag-css3-multiple-background-images-and-styles"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS3 Multiple Background Images and Styles - Tutorial<\/title>\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.vskills.in\/certification\/tutorial\/css3-multiple-background-images-and-styles\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS3 Multiple Background Images and Styles - Tutorial\" \/>\n<meta property=\"og:description\" content=\"With CSS3, you can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color. Specifying multiple backgrounds is easy: .myclass { background: background1, background 2, &#8230;, backgroundN; } You...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/css3-multiple-background-images-and-styles\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-12T08:53:20+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/CSS3-Multiple-Background-Images-and-Style.png\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/css3-multiple-background-images-and-styles\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/css3-multiple-background-images-and-styles\/\",\"name\":\"CSS3 Multiple Background Images and Styles - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/css3-multiple-background-images-and-styles\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/css3-multiple-background-images-and-styles\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/CSS3-Multiple-Background-Images-and-Style.png\",\"datePublished\":\"2020-01-17T06:05:59+00:00\",\"dateModified\":\"2024-04-12T08:53:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/css3-multiple-background-images-and-styles\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/css3-multiple-background-images-and-styles\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/css3-multiple-background-images-and-styles\/#primaryimage\",\"url\":\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/CSS3-Multiple-Background-Images-and-Style.png\",\"contentUrl\":\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/CSS3-Multiple-Background-Images-and-Style.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/css3-multiple-background-images-and-styles\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS3 Multiple Background Images and Styles\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS3 Multiple Background Images and Styles - Tutorial","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.vskills.in\/certification\/tutorial\/css3-multiple-background-images-and-styles\/","og_locale":"en_US","og_type":"article","og_title":"CSS3 Multiple Background Images and Styles - Tutorial","og_description":"With CSS3, you can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color. Specifying multiple backgrounds is easy: .myclass { background: background1, background 2, &#8230;, backgroundN; } You...","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/css3-multiple-background-images-and-styles\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-04-12T08:53:20+00:00","og_image":[{"url":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/CSS3-Multiple-Background-Images-and-Style.png","type":"","width":"","height":""}],"twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/css3-multiple-background-images-and-styles\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/css3-multiple-background-images-and-styles\/","name":"CSS3 Multiple Background Images and Styles - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/css3-multiple-background-images-and-styles\/#primaryimage"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/css3-multiple-background-images-and-styles\/#primaryimage"},"thumbnailUrl":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/CSS3-Multiple-Background-Images-and-Style.png","datePublished":"2020-01-17T06:05:59+00:00","dateModified":"2024-04-12T08:53:20+00:00","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/css3-multiple-background-images-and-styles\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/css3-multiple-background-images-and-styles\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/css3-multiple-background-images-and-styles\/#primaryimage","url":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/CSS3-Multiple-Background-Images-and-Style.png","contentUrl":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/CSS3-Multiple-Background-Images-and-Style.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/css3-multiple-background-images-and-styles\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"CSS3 Multiple Background Images and Styles"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74171","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=74171"}],"version-history":[{"count":4,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74171\/revisions"}],"predecessor-version":[{"id":85605,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74171\/revisions\/85605"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=74171"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=74171"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=74171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}