{"id":6788,"date":"2015-09-04T12:15:19","date_gmt":"2015-09-04T09:15:19","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=6788"},"modified":"2017-12-21T16:41:05","modified_gmt":"2017-12-21T14:41:05","slug":"jquery-css-background-image-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-css-background-image-example\/","title":{"rendered":"jQuery CSS Background Image Example"},"content":{"rendered":"<p>In this example, we&#8217;ll learn how to use jQuery to add CSS properties to HTML elements and specifically how to add backgrounds like colors or images using the <code>.css()<\/code> method.<\/p>\n<p>The <code>.css()<\/code> method is a convenient way to get a computed style property from the first matched element, especially in light of the different ways browsers access most of those properties (the <code>getComputedStyle()<\/code> method in standards-based browsers versus the <code>currentStyle<\/code> and <code>runtimeStyle<\/code> properties in Internet Explorer) and the different terms browsers use for certain properties.<\/p>\n<p>For example, Internet Explorer&#8217;s DOM implementation refers to the <code>float<\/code> property as <code>styleFloat<\/code>, while W3C standards-compliant browsers refer to it as <code>cssFloat<\/code>. For consistency, you can simply use &#8220;<code>float<\/code>&#8220;, and jQuery will translate it to the correct value for each browser.<br \/>\n&nbsp;<br \/>\n[ulp id=&#8217;qGGDqWnle19VavkM&#8217;]<\/p>\n<h2>1. Basic Setup<\/h2>\n<h3>1.1 Initial Document Setup<\/h3>\n<p>To begin, create a new HTML document and add the following sections and links:<\/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;jQuery CSS Background Image Example&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;!-- STYLE SECTION  --&gt;\r\n\r\n&lt;!-- HTML SECTION  --&gt;\r\n\r\n&lt;!-- JAVASCRIPT SECTION  --&gt;\r\n&lt;script src=\"jquery-1.11.3.min.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;script type=\"text\/javascript\"&gt;\r\n\/\/ our jQuery code goes here\r\n&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<h3>1.2 Understanding the <strong>.css()<\/strong> method<\/h3>\n<p><code>.css( propertyName )<\/code> &#8211; Get the computed style properties for the first element in the set of matched elements.<br \/>\npropertyName will be a string containing the name of a CSS property. Look at the following example: <\/p>\n<pre class=\"brush:xml\">\r\n&lt;!-- HTML SECTION  --&gt;\r\n&lt;span class=\"result\"&gt;&nbsp;&lt;\/span&gt;  &lt;!-- show the computed results here --&gt;\r\n&lt;div class=\"content\"&gt;Click to show two of my css properties.&lt;\/div&gt;\r\n<\/pre>\n<pre class=\"brush:css\">\r\n&lt;!-- STYLE SECTION  --&gt;\r\n&lt;style type=\"text\/css\"&gt;\r\n.content {\r\n    width: 20em;\r\n    height: 10em;\r\n    margin: 1em;\r\n    background-color: #FB2A59;\r\n    text-align: center;\r\n    line-height: 10em;\r\n    color: white;\r\n    border-radius: 0.5em;\r\n}\r\n&lt;\/style&gt;\r\n<\/pre>\n<pre class=\"brush:java\">\r\n&lt;!-- JAVASCRIPT SECTION  --&gt;\r\n&lt;script src=\"jquery-1.11.3.min.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;script type=\"text\/javascript\"&gt;\r\n    $(function (){\r\n        $('.content').click(function(){ \/*results will be shown on click*\/\r\n            var width = $(this).css(\"width\");   \/*store the width in a variable*\/\r\n            var height = $(this).css(\"height\"); \/*store the height in a variable*\/\r\n            \/*concatinate several properties and attach them to some other element*\/\r\n            $('.result').html(\"Width: \" + width + \"&lt;br&gt;\" + \"Height: \" + height);\r\n        });\r\n    })\r\n&lt;\/script&gt;\r\n<\/pre>\n<figure id=\"attachment_6804\" aria-describedby=\"caption-attachment-6804\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/08\/css-bgimage-1.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/08\/css-bgimage-1.jpg\" alt=\"Using .css() - Single Property\" width=\"820\" height=\"365\" class=\"size-full wp-image-6804\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/08\/css-bgimage-1.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/08\/css-bgimage-1-300x134.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-6804\" class=\"wp-caption-text\">Using .css() &#8211; Single Property<\/figcaption><\/figure>\n<p>But you can use the .css() method with multiple properties inside: <code>.css( propertyNames )<\/code> where <code>propertyNames<\/code> would represent an array of one or more CSS properties. Modifying the example above, we&#8217;d get:<\/p>\n<pre class=\"brush:java\">\r\n&lt;!-- JAVASCRIPT SECTION  --&gt;\r\n&lt;script src=\"jquery-1.11.3.min.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;script type=\"text\/javascript\"&gt;\r\n    $(function (){\r\n        var html = [ \"The clicked div has the following styles:\" ];\r\n        $('.content').click(function(){ \/*results will be shown on click*\/\r\n            \/*store the css properties array in a variable*\/\r\n            var properties = $(this).css([\"width\", \"height\", \"background-color\", \"color\"]);\r\n            \/*concatinate several properties and attach them to some other element*\/\r\n              $.each( properties, function( prop, value ) {\r\n                html.push( prop + \": \" + value );\r\n              });\r\n              $( \".result\" ).html( html.join( \"<br>\" ) );\r\n        });\r\n    })\r\n&lt;\/script&gt;\r\n<\/pre>\n<figure id=\"attachment_6806\" aria-describedby=\"caption-attachment-6806\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/08\/css-bgimage-2.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/08\/css-bgimage-2.jpg\" alt=\"Using .css() - Multiple Properties\" width=\"820\" height=\"365\" class=\"size-full wp-image-6806\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/08\/css-bgimage-2.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/08\/css-bgimage-2-300x134.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-6806\" class=\"wp-caption-text\">Using .css() &#8211; Multiple Properties<\/figcaption><\/figure>\n<h2>2. Background Image using .css()<\/h2>\n<p>Now let&#8217;s try to add a background color and then a background image in a content box. The easiest way to do this is to refer to the element you want to give a background color and then use <code>.css('background-color', '#eee')<\/code> like so:<\/p>\n<pre class=\"brush:java\">\r\n&lt;!-- JAVASCRIPT SECTION  --&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\n    $(function (){\r\n        $('.content').css('background-color', '#51326F');\r\n    })\r\n&lt;\/script&gt;\r\n<\/pre>\n<figure id=\"attachment_6813\" aria-describedby=\"caption-attachment-6813\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/08\/css-bgimage-3.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/08\/css-bgimage-3.jpg\" alt=\"jQuery Background Image\" width=\"820\" height=\"235\" class=\"size-full wp-image-6813\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/08\/css-bgimage-3.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/08\/css-bgimage-3-300x86.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-6813\" class=\"wp-caption-text\">jQuery Background Image<\/figcaption><\/figure>\n<p>In a similar manner, we can use the syntax <code>.css('background-image', 'url(image.jpg)')<\/code> to add a background image like so:<\/p>\n<pre class=\"brush:java\">\r\n&lt;!-- JAVASCRIPT SECTION  --&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\n    $(function (){\r\n        $('.content').css('background-image', 'url(bg.jpg)');\r\n    })\r\n&lt;\/script&gt;\r\n<\/pre>\n<figure id=\"attachment_6811\" aria-describedby=\"caption-attachment-6811\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/08\/css-bgimage-4.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/08\/css-bgimage-4.jpg\" alt=\"jQuery Background Image\" width=\"820\" height=\"235\" class=\"size-full wp-image-6811\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/08\/css-bgimage-4.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/08\/css-bgimage-4-300x86.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-6811\" class=\"wp-caption-text\">jQuery Background Image<\/figcaption><\/figure>\n<p>You can choose to show the background image we just set with jQuery only on click. You can do that like this:<\/p>\n<pre class=\"brush:java\">\r\n&lt;!-- JAVASCRIPT SECTION  --&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\n    $('.content1').click(function(){\r\n            $(this).css('background-image','url(bg1.jpg)');\r\n            $(this).find('p').hide();\r\n            $(this).html(\"Nice Job, User!\");\r\n    });\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>The result would be:<br \/>\n<figure id=\"attachment_6816\" aria-describedby=\"caption-attachment-6816\" style=\"width: 800px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/08\/css-bgimage-5.gif\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/08\/css-bgimage-5.gif\" alt=\"Trigger Background Image on Click\" width=\"800\" height=\"370\" class=\"size-full wp-image-6816\" \/><\/a><figcaption id=\"caption-attachment-6816\" class=\"wp-caption-text\">Trigger Background Image on Click<\/figcaption><\/figure><\/p>\n<h2>3. Conclusion<\/h2>\n<p>To conclude, changing the background of an element with jQuery becomes really useful and necessary when you want to trigger these events on certain actions taken by the user or when you want to create functions to manipulate the background for some reason like animation ect. At all times, keep in mind the basic syntax of .css() method as it is an essential jQuery method to be used to set or change CSS properties.<\/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\/08\/jQuery-CSS-Background-Image.zip\"><strong>jQuery CSS Background Image<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>In this example, we&#8217;ll learn how to use jQuery to add CSS properties to HTML elements and specifically how to add backgrounds like colors or images using the .css() method. The .css() method is a convenient way to get a computed style property from the first matched element, especially in light of the different ways &hellip;<\/p>\n","protected":false},"author":75,"featured_media":919,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-6788","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>jQuery CSS Background Image Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"In this example, we&#039;ll learn how to use jQuery to add CSS properties to HTML elements and specifically how to add backgrounds like colors or images using\" \/>\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\/javascript\/jquery\/jquery-css-background-image-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jQuery CSS Background Image Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"In this example, we&#039;ll learn how to use jQuery to add CSS properties to HTML elements and specifically how to add backgrounds like colors or images using\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-css-background-image-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-09-04T09:15:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-21T14:41:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-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\/javascript\/jquery\/jquery-css-background-image-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-css-background-image-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"jQuery CSS Background Image Example\",\"datePublished\":\"2015-09-04T09:15:19+00:00\",\"dateModified\":\"2017-12-21T14:41:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-css-background-image-example\/\"},\"wordCount\":451,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-css-background-image-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-css-background-image-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-css-background-image-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-css-background-image-example\/\",\"name\":\"jQuery CSS Background Image Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-css-background-image-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-css-background-image-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"datePublished\":\"2015-09-04T09:15:19+00:00\",\"dateModified\":\"2017-12-21T14:41:05+00:00\",\"description\":\"In this example, we'll learn how to use jQuery to add CSS properties to HTML elements and specifically how to add backgrounds like colors or images using\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-css-background-image-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-css-background-image-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-css-background-image-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-css-background-image-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"jQuery\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"jQuery CSS Background Image 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":"jQuery CSS Background Image Example - Web Code Geeks - 2026","description":"In this example, we'll learn how to use jQuery to add CSS properties to HTML elements and specifically how to add backgrounds like colors or images using","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\/javascript\/jquery\/jquery-css-background-image-example\/","og_locale":"en_US","og_type":"article","og_title":"jQuery CSS Background Image Example - Web Code Geeks - 2026","og_description":"In this example, we'll learn how to use jQuery to add CSS properties to HTML elements and specifically how to add backgrounds like colors or images using","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-css-background-image-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-09-04T09:15:19+00:00","article_modified_time":"2017-12-21T14:41:05+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-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\/javascript\/jquery\/jquery-css-background-image-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-css-background-image-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"jQuery CSS Background Image Example","datePublished":"2015-09-04T09:15:19+00:00","dateModified":"2017-12-21T14:41:05+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-css-background-image-example\/"},"wordCount":451,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-css-background-image-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-css-background-image-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-css-background-image-example\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-css-background-image-example\/","name":"jQuery CSS Background Image Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-css-background-image-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-css-background-image-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","datePublished":"2015-09-04T09:15:19+00:00","dateModified":"2017-12-21T14:41:05+00:00","description":"In this example, we'll learn how to use jQuery to add CSS properties to HTML elements and specifically how to add backgrounds like colors or images using","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-css-background-image-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-css-background-image-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-css-background-image-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-css-background-image-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"jQuery","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/"},{"@type":"ListItem","position":4,"name":"jQuery CSS Background Image 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\/6788","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=6788"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/6788\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/919"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=6788"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=6788"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=6788"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}