{"id":14750,"date":"2020-09-09T13:35:24","date_gmt":"2020-09-09T20:35:24","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=14750"},"modified":"2023-12-01T03:59:33","modified_gmt":"2023-12-01T11:59:33","slug":"css-background-image","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/css-background-image\/","title":{"rendered":"CSS Background Image: Step-by-Step Guide"},"content":{"rendered":"\n<p><em>The CSS background image property changes the background of a website to an image. A background image is set using the background-image: url(url_of_image) property. You can specify multiple background images that overlap using the background-image property.<\/em><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>Background images are a common feature on modern sites that create an aesthetically pleasing user experience. <a href=\"https:\/\/careerkarma.com\/blog\/web-design-vs-web-development\/\">Web designers<\/a> customize this feature based on unique predetermined themes through the <a href=\"https:\/\/careerkarma.com\/blog\/how-long-does-it-take-to-learn-css\/\">CSS<\/a> background-image property.<\/p>\n\n\n\n<p>This tutorial and examples will get you familiarized with this CSS property. By the end of this article, you will be an expert on customizing background images.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<label for=\"ez-toc-cssicon-toggle-item-69d4a549d658d\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #000000;color:#000000\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #000000;color:#000000\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69d4a549d658d\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/careerkarma.com\/blog\/css-background-image\/#css-background-image\" >CSS Background Image<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/careerkarma.com\/blog\/css-background-image\/#css-background-image-example\" >CSS Background Image Example<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/careerkarma.com\/blog\/css-background-image\/#css-multiple-background-images\" >CSS Multiple Background Images<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/careerkarma.com\/blog\/css-background-image\/#background-image-size\" >Background Image Size<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/careerkarma.com\/blog\/css-background-image\/#position-background-image\" >Position Background Image<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/careerkarma.com\/blog\/css-background-image\/#conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"css-background-image\"><\/span>CSS Background Image<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The background-image property defines an image as the background for an element on a web page. It is often used to set the background of an entire page, or a section of a page.<\/p>\n\n\n\n<p>When you are designing a web page, you must determine whether the end product will feature a background image.<\/p>\n\n\n\n<p>For instance, you may want a group photo of team members in the background if you are designing an \u2018About Us\u2019 page.&nbsp;If you are designing a website for a caf\u00e9, consider adding a header on a page displaying an image of a cup of coffee.<\/p>\n\n\n\n<p>The background-image property adds images as a background to a <a href=\"https:\/\/careerkarma.com\/blog\/how-long-does-it-take-to-learn-html\/\">HTML<\/a> element. You can add a background image to an element using the following syntax:<\/p>\n\n\n\n<p><code>background-image: url(imageUrl);<\/code><\/p>\n\n\n\n<p>imageUrl refers to the location of the image you wish to display.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"css-background-image-example\"><\/span>CSS Background Image Example<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>We are working on a project designing a site for a local caf\u00e9 called \u2018The Coffee Grind.\u2019 The coffee shop has asked us to create a top page banner, displaying a stock image of a cup of coffee. This banner is to have \u2018Welcome to The Coffee Grind\u201d in the center.<\/p>\n\n\n\n<p>We could create the banner using the following code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>index.html\n\n&lt;div class=&quot;image&quot;&gt;\n\t&lt;p class=&quot;header&quot;&gt;Welcome to The Coffee Grind&lt;\/p&gt;\n&lt;\/div&gt;\n\nstyles.css\n\n.image {\n\tbackground-image: url(https:\/\/images.pexels.com\/photos\/683039\/pexels-photo-683039.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260);\n\theight: 250px;\n}\n\n.header {\n\tpadding-top: 50px;\n\tcolor: white;\n\tfont-size: 20px;\n\ttext-align: center;\n}\n<\/pre><\/div>\n\n\n\n<p>Our code returns:<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"848\" height=\"270\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-08-at-19.33.45.png\" alt=\"\" class=\"wp-image-23916\" srcset=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-08-at-19.33.45.png 848w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-08-at-19.33.45-768x245.png 768w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-08-at-19.33.45-770x245.png 770w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-08-at-19.33.45-385x123.png 385w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-08-at-19.33.45-20x6.png 20w\" sizes=\"auto, (max-width: 848px) 100vw, 848px\" \/><\/figure>\n\n\n\n<p>Let us break down our code. In our HTML file, we <a href=\"https:\/\/careerkarma.com\/blog\/html-div\/\">defined a &lt;div&gt; tag<\/a> with the class \u201cheader\u201d. This tag shows the text \u201cWelcome to the Coffee Grind\u201d on the web page.<\/p>\n\n\n\n<p>In our CSS file, we defined a rule for a <a href=\"https:\/\/careerkarma.com\/blog\/html-css-class-id\/\">HTML class<\/a> called \u201cimage.\u201d This set a background image for our banner and set the height of our banner to 250px. We then defined a class called \u201cheader\u201d, which is used to style the text in our header.<\/p>\n\n\n\n<p>The \u201cheader\u201d class applies a 50px padding to the top of our header text. The &#8220;header&#8221; class sets the color of the text to white. Our styles set the font size of the header to 20px, and aligns the header to the center of the element.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"css-multiple-background-images\"><\/span>CSS Multiple Background Images<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The background-image property lets you assign multiple background images to an element in CSS. The syntax for using multiple background images is as follows:<\/p>\n\n\n\n<p><code>background-image: url(image1), url(image2);<\/code><\/p>\n\n\n\n<p>The first image specified will appear at the top of the element, and subsequent elements will appear behind each other. Suppose we wanted to add an icon of a coffee cup to the front of our banner. We could do so using this code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>index.html\n\n&lt;div class=&quot;image&quot;&gt;\n\t&lt;p class=&quot;header&quot;&gt;Welcome to The Coffee Grind&lt;\/p&gt;\n&lt;\/div&gt;\n\nstyles.css\n\n.image {\n\tbackground-image: url(https:\/\/img.icons8.com\/wired\/64\/000000\/coffee.png), url(https:\/\/images.pexels.com\/photos\/683039\/pexels-photo-683039.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260);\n\theight: 250px;\n}\n\n.header {\n\tpadding-top: 50px;\n\tcolor: white;\n\tfont-size: 20px;\n\ttext-align: center;\n}\n<\/pre><\/div>\n\n\n\n<p>Our code returns:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"849\" height=\"203\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-08-at-19.34.02.png\" alt=\"\" class=\"wp-image-23917\" srcset=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-08-at-19.34.02.png 849w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-08-at-19.34.02-768x184.png 768w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-08-at-19.34.02-770x184.png 770w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-08-at-19.34.02-385x92.png 385w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-08-at-19.34.02-20x5.png 20w\" sizes=\"auto, (max-width: 849px) 100vw, 849px\" \/><\/figure>\n\n\n\n<p>As you can see, our coffee cup icon has been added in front of our background image. Our icon only appears at the front because we specified it as the first background image in our list of background images.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"background-image-size\"><\/span>Background Image Size<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>When you are working with the background-image property, you may want to <a href=\"https:\/\/careerkarma.com\/blog\/css-tutorial-css-crop-image\/\">customize<\/a> the size of the background image within its container. The background-size property is used for this purpose.<\/p>\n\n\n\n<p>The background-size property accepts four possible values. These are:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Auto: This value tells the web browser to decide the best size for the background image (default).<\/li><li>Contain: This value instructs the browser that the actual image size should be visible even if it does not fill the container.&nbsp;If a picture is too small to fill a container, it will appear in its full size. White space will be left in the areas the picture cannot fill.<\/li><li>Cover: This value instructs the browser to stretch out the image to be the size of the whole container.<\/li><li>Length: This is the width and height of the background image. The first value specified sets the width of the image, and the second value specified sets the height.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Changing the Background Size<\/h3>\n\n\n\n<p>Suppose we wanted our coffee banner image from earlier to be contained within our element. This means the full image should be visible, even if it does not fill the container. We could do so using this code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>index.html\n\n&lt;div class=&quot;image&quot;&gt;&lt;\/div&gt;\n\nstyles.css\n\n.image {\n\tbackground-image: url(https:\/\/images.pexels.com\/photos\/683039\/pexels-photo-683039.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260);\n\tbackground-size: contain;\n\theight: 250px;\n}\n<\/pre><\/div>\n\n\n\n<p>Our code returns:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"850\" height=\"378\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-08-at-19.34.24.png\" alt=\"\" class=\"wp-image-23918\" srcset=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-08-at-19.34.24.png 850w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-08-at-19.34.24-768x342.png 768w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-08-at-19.34.24-770x342.png 770w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-08-at-19.34.24-20x9.png 20w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-08-at-19.34.24-385x171.png 385w\" sizes=\"auto, (max-width: 850px) 100vw, 850px\" \/><\/figure>\n\n\n\n<p>As you can see, unlike our first example, our entire background image is visible. This is because we specified the background-size property in our code and set its value to <em>contain<\/em>. Alternatively, we could have used the <em>cover<\/em> value if we wanted our image to cover the size of the whole container.<\/p>\n\n\n\n<p>You can also specify a pixel size for the image. Let us say we want our style image to be 200px tall by 200px wide. We could do so using the following code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>index.html\n\n&lt;div class=&quot;image&quot;&gt;&lt;\/div&gt;\n\nstyles.css\n\n.image {\n\tbackground-image: url(https:\/\/images.pexels.com\/photos\/683039\/pexels-photo-683039.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260);\n\tbackground-size: contain;\n\theight: 200px;\n\twidth: 200px;\n}\n<\/pre><\/div>\n\n\n\n<p>Our code returns:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"850\" height=\"374\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-08-at-19.35.22.png\" alt=\"\" class=\"wp-image-23919\" srcset=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-08-at-19.35.22.png 850w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-08-at-19.35.22-768x338.png 768w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-08-at-19.35.22-770x339.png 770w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-08-at-19.35.22-20x9.png 20w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-08-at-19.35.22-385x169.png 385w\" sizes=\"auto, (max-width: 850px) 100vw, 850px\" \/><\/figure>\n\n\n\n<p>In this example, our image is 200px wide by 200px long.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"position-background-image\"><\/span>Position Background Image<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The background-origin property allows you to <a href=\"https:\/\/careerkarma.com\/blog\/css-center-image\/\">position<\/a> the background image according to the content, <a href=\"https:\/\/careerkarma.com\/blog\/css-borders\/\">borders<\/a>, or <a href=\"https:\/\/careerkarma.com\/blog\/css-padding\/\">padding<\/a> of a web element.<\/p>\n\n\n\n<p>The background-origin property accepts three potential values:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Border-box: Positions the image to appear relative to the border box.<\/li><li>Content-box: Positions the image to appear relative to the content box.<\/li><li>Padding-box: Positions the image to appear relative to the <a href=\"https:\/\/careerkarma.com\/blog\/css-padding-vs-margin\/\">padding<\/a> box (default).<\/li><\/ul>\n\n\n\n<p>To learn more about <a href=\"https:\/\/careerkarma.com\/blog\/border-image\/\">borders<\/a>, content, and padding, read our guide to the <a href=\"https:\/\/careerkarma.com\/blog\/css-box-model\/\">CSS box model<\/a>.<\/p>\n\n\n\n<p>Let&#8217;s say that we want to adjust the positioning of our image. You could, for instance, make a background image to appear relative to the content box using the following code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>index.html\n\n&lt;div class=&quot;image&quot;&gt;&lt;\/div&gt;\n\nstyles.css\n\n.image {\n\tbackground-image: url(https:\/\/images.pexels.com\/photos\/683039\/pexels-photo-683039.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260);\n\tborder: 10px solid black;\n\tpadding: 25px;\n\tbackground-origin: content-box;\n\tbackground-repeat: no-repeat;\n\theight: 250px;\n}\n<\/pre><\/div>\n\n\n\n<p>Our code returns:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"847\" height=\"342\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-08-at-19.35.34.png\" alt=\"\" class=\"wp-image-23920\" srcset=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-08-at-19.35.34.png 847w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-08-at-19.35.34-768x310.png 768w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-08-at-19.35.34-770x311.png 770w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-08-at-19.35.34-20x8.png 20w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-08-at-19.35.34-385x155.png 385w\" sizes=\"auto, (max-width: 847px) 100vw, 847px\" \/><\/figure>\n\n\n\n<p>In this example, our background image appears relative to the content box. As you can see, there is a white gap between our image border and the background image. This shows the relative background position in which our image appears.<\/p>\n\n\n\n<p>We achieved this by specifying the background-origin: content-box property. We specified the background-repeat: no-repeat property. This property limits our image to its content box. The image will not appear in the blank space created by the background-origin property.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>We use the background-image property to set the background of an element to an image in CSS. This technique allows you to create custom backgrounds from images. This is an alternative to using colors or gradients.<\/p>\n\n\n\n<p>In this article, we discussed how to use the background-image property and how to style a background image in CSS. Now you have the knowledge you need to start designing background images in CSS like an expert.<\/p>\n","protected":false},"excerpt":{"rendered":"The CSS background image property changes the background of a website to an image. A background image is set using the background-image: url(url_of_image) property. You can specify multiple background images that overlap using the background-image property. Background images are a common feature on modern sites that create an aesthetically pleasing user experience. Web designers customize&hellip;","protected":false},"author":240,"featured_media":14751,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-14750","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"CSS","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v27.0) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>CSS Background Image: Step-by-Step Guide | Career Karma<\/title>\n<meta name=\"description\" content=\"With this guide, learn how to use the CSS background-image property to set a background image for a web element.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/css-background-image\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Background Image: Step-by-Step Guide\" \/>\n<meta property=\"og:description\" content=\"With this guide, learn how to use the CSS background-image property to set a background image for a web element.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-background-image\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-09T20:35:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T11:59:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/computer-1209641_1920.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"667\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"James Gallagher\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Gallagher\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-background-image\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-background-image\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"CSS Background Image: Step-by-Step Guide\",\"datePublished\":\"2020-09-09T20:35:24+00:00\",\"dateModified\":\"2023-12-01T11:59:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-background-image\/\"},\"wordCount\":1123,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-background-image\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/computer-1209641_1920.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-background-image\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-background-image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/css-background-image\/\",\"name\":\"CSS Background Image: Step-by-Step Guide | Career Karma\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-background-image\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-background-image\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/computer-1209641_1920.jpg\",\"datePublished\":\"2020-09-09T20:35:24+00:00\",\"dateModified\":\"2023-12-01T11:59:33+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"With this guide, learn how to use the CSS background-image property to set a background image for a web element.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-background-image\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-background-image\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-background-image\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/computer-1209641_1920.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/computer-1209641_1920.jpg\",\"width\":1000,\"height\":667},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-background-image\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/careerkarma.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/careerkarma.com\/blog\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Background Image: Step-by-Step Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\",\"url\":\"https:\/\/careerkarma.com\/blog\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/careerkarma.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\",\"name\":\"James Gallagher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"caption\":\"James Gallagher\"},\"description\":\"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.\",\"url\":\"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS Background Image: Step-by-Step Guide | Career Karma","description":"With this guide, learn how to use the CSS background-image property to set a background image for a web element.","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:\/\/careerkarma.com\/blog\/css-background-image\/","og_locale":"en_US","og_type":"article","og_title":"CSS Background Image: Step-by-Step Guide","og_description":"With this guide, learn how to use the CSS background-image property to set a background image for a web element.","og_url":"https:\/\/careerkarma.com\/blog\/css-background-image\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-09-09T20:35:24+00:00","article_modified_time":"2023-12-01T11:59:33+00:00","og_image":[{"width":1000,"height":667,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/computer-1209641_1920.jpg","type":"image\/jpeg"}],"author":"James Gallagher","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"James Gallagher","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-background-image\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-background-image\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"CSS Background Image: Step-by-Step Guide","datePublished":"2020-09-09T20:35:24+00:00","dateModified":"2023-12-01T11:59:33+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-background-image\/"},"wordCount":1123,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-background-image\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/computer-1209641_1920.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-background-image\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-background-image\/","url":"https:\/\/careerkarma.com\/blog\/css-background-image\/","name":"CSS Background Image: Step-by-Step Guide | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-background-image\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-background-image\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/computer-1209641_1920.jpg","datePublished":"2020-09-09T20:35:24+00:00","dateModified":"2023-12-01T11:59:33+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"With this guide, learn how to use the CSS background-image property to set a background image for a web element.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-background-image\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-background-image\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-background-image\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/computer-1209641_1920.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/computer-1209641_1920.jpg","width":1000,"height":667},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-background-image\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/careerkarma.com\/blog\/css\/"},{"@type":"ListItem","position":3,"name":"CSS Background Image: Step-by-Step Guide"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94","name":"James Gallagher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","caption":"James Gallagher"},"description":"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.","url":"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14750","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=14750"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14750\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/14751"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=14750"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=14750"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=14750"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}