{"id":9152,"date":"2025-07-25T08:48:16","date_gmt":"2025-07-25T08:48:16","guid":{"rendered":"https:\/\/www.kaashivinfotech.com\/blog\/?p=9152"},"modified":"2025-07-25T11:03:57","modified_gmt":"2025-07-25T11:03:57","slug":"css-background-image-and-example-code","status":"publish","type":"post","link":"https:\/\/www.kaashivinfotech.com\/blog\/css-background-image-and-example-code\/","title":{"rendered":"CSS Background Image : 5 Powerful Ways to Instantly Transform Your Website"},"content":{"rendered":"<p>When you visit a website, the visuals instantly shape your experience. One of the easiest ways to make a webpage look more appealing is by using <strong>CSS background images<\/strong>. They\u2019re much more expressive than plain background colors and can completely change the mood of a section or page.<\/p>\n<p>This guide will walk you through how to add a background image using HTML and CSS, step by step \u2014 with real examples, best practices, and visual tips.<\/p>\n<hr data-start=\"621\" data-end=\"624\" \/>\n<h2>\ud83d\udccc What You\u2019ll Learn:<\/h2>\n<ul>\n<li>How to add a background image in CSS<\/li>\n<li>How to control image position, repeat behavior, and size<\/li>\n<li>How to create gradient backgrounds<\/li>\n<li>Examples with HTML and CSS<\/li>\n<\/ul>\n<figure id=\"attachment_9170\" aria-describedby=\"caption-attachment-9170\" style=\"width: 1536px\" class=\"wp-caption alignnone\"><img fetchpriority=\"high\" decoding=\"async\" class=\"size-full wp-image-9170\" src=\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/07\/CSS-Background-Image.png\" alt=\"CSS Background Image\" width=\"1536\" height=\"1024\" srcset=\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/07\/CSS-Background-Image.png 1536w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/07\/CSS-Background-Image-300x200.png 300w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/07\/CSS-Background-Image-1024x683.png 1024w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/07\/CSS-Background-Image-768x512.png 768w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/07\/CSS-Background-Image-332x221.png 332w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/07\/CSS-Background-Image-664x443.png 664w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/07\/CSS-Background-Image-688x459.png 688w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/07\/CSS-Background-Image-1044x696.png 1044w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/07\/CSS-Background-Image-1400x933.png 1400w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><figcaption id=\"caption-attachment-9170\" class=\"wp-caption-text\">CSS Background Image<\/figcaption><\/figure>\n<hr data-start=\"621\" data-end=\"624\" \/>\n<h2>\ud83e\uddfe How to Add a Background Image in CSS<\/h2>\n<p>To get started, make sure your image is stored in your project folder. For example:<\/p>\n<pre><code class=\"\" data-line=\"\">project\/\n\u2502\n\u251c\u2500\u2500 index.html\n\u251c\u2500\u2500 styles.css\n\u2514\u2500\u2500 images\/\n    \u2514\u2500\u2500 sunset.png\n<\/code><\/pre>\n<p>Use the <code class=\"\" data-line=\"\">background-image<\/code> property in your CSS file like this:<\/p>\n<pre><code class=\"\" data-line=\"\">section {\n  background-image: url(&quot;images\/sunset.png&quot;);\n}<\/code><\/pre>\n<hr data-start=\"621\" data-end=\"624\" \/>\n<h3>\ud83d\udcd6 Explanation:<\/h3>\n<ul>\n<li><code class=\"\" data-line=\"\">section<\/code> is the HTML tag we\u2019re targeting.<\/li>\n<li><code class=\"\" data-line=\"\">url()<\/code> tells CSS where the image is located.<\/li>\n<li><code class=\"\" data-line=\"\">&quot;images\/sunset.png&quot;<\/code> is the relative path to the image.<\/li>\n<li>Quotes are optional, but good practice.<\/li>\n<li>Always end your CSS declarations with a semicolon.<\/li>\n<\/ul>\n<hr data-start=\"621\" data-end=\"624\" \/>\n<h2>\ud83d\uded1 How to Stop Image Repeating (Default Behavior)<\/h2>\n<p>By default, small background images <strong>repeat<\/strong> to fill the space. To stop this:<\/p>\n<pre><code class=\"\" data-line=\"\">section {\n  background-repeat: no-repeat;\n}<\/code><\/pre>\n<h3>Other values:<\/h3>\n<table border=\"1\" cellspacing=\"0\" cellpadding=\"6\">\n<tbody>\n<tr>\n<th>Value<\/th>\n<th>Behavior<\/th>\n<\/tr>\n<tr>\n<td><code class=\"\" data-line=\"\">repeat<\/code><\/td>\n<td>Repeats in both directions<\/td>\n<\/tr>\n<tr>\n<td><code class=\"\" data-line=\"\">no-repeat<\/code><\/td>\n<td>Image shows only once<\/td>\n<\/tr>\n<tr>\n<td><code class=\"\" data-line=\"\">repeat-x<\/code><\/td>\n<td>Repeats horizontally (X-axis)<\/td>\n<\/tr>\n<tr>\n<td><code class=\"\" data-line=\"\">repeat-y<\/code><\/td>\n<td>Repeats vertically (Y-axis)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<figure id=\"attachment_9168\" aria-describedby=\"caption-attachment-9168\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"size-full wp-image-9168\" src=\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/07\/CSS-Background-Repeat-Grid.png\" alt=\"CSS background image\" width=\"1024\" height=\"1024\" srcset=\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/07\/CSS-Background-Repeat-Grid.png 1024w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/07\/CSS-Background-Repeat-Grid-300x300.png 300w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/07\/CSS-Background-Repeat-Grid-150x150.png 150w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/07\/CSS-Background-Repeat-Grid-768x768.png 768w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/07\/CSS-Background-Repeat-Grid-72x72.png 72w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/07\/CSS-Background-Repeat-Grid-144x144.png 144w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/07\/CSS-Background-Repeat-Grid-332x332.png 332w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/07\/CSS-Background-Repeat-Grid-664x664.png 664w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/07\/CSS-Background-Repeat-Grid-688x688.png 688w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/07\/CSS-Background-Repeat-Grid-24x24.png 24w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/07\/CSS-Background-Repeat-Grid-48x48.png 48w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/07\/CSS-Background-Repeat-Grid-96x96.png 96w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption id=\"caption-attachment-9168\" class=\"wp-caption-text\">CSS Background Repeat Grid<\/figcaption><\/figure>\n<hr data-start=\"621\" data-end=\"624\" \/>\n<h2>\ud83c\udfaf How to Position a Background Image<\/h2>\n<p>Use <code class=\"\" data-line=\"\">background-position<\/code> to control where the image appears inside its container.<\/p>\n<pre><code class=\"\" data-line=\"\">section {\n  background-position: center center;\n}<\/code><\/pre>\n<h3>You can use:<\/h3>\n<ul>\n<li><strong>Keywords<\/strong>: <code class=\"\" data-line=\"\">left<\/code>, <code class=\"\" data-line=\"\">right<\/code>, <code class=\"\" data-line=\"\">top<\/code>, <code class=\"\" data-line=\"\">bottom<\/code>, <code class=\"\" data-line=\"\">center<\/code><\/li>\n<li><strong>Percentages<\/strong>: <code class=\"\" data-line=\"\">20% 40%<\/code><\/li>\n<li><strong>Pixels<\/strong>: <code class=\"\" data-line=\"\">30px 100px<\/code><\/li>\n<\/ul>\n<pre><code class=\"\" data-line=\"\">section {\n  background-position: right top;\n}<\/code><\/pre>\n<figure id=\"attachment_9165\" aria-describedby=\"caption-attachment-9165\" style=\"width: 1536px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"size-full wp-image-9165\" src=\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/07\/IMAGE-Positioning-Diagram.png\" alt=\"CSS background image\" width=\"1536\" height=\"1024\" srcset=\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/07\/IMAGE-Positioning-Diagram.png 1536w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/07\/IMAGE-Positioning-Diagram-300x200.png 300w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/07\/IMAGE-Positioning-Diagram-1024x683.png 1024w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/07\/IMAGE-Positioning-Diagram-768x512.png 768w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/07\/IMAGE-Positioning-Diagram-332x221.png 332w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/07\/IMAGE-Positioning-Diagram-664x443.png 664w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/07\/IMAGE-Positioning-Diagram-688x459.png 688w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/07\/IMAGE-Positioning-Diagram-1044x696.png 1044w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/07\/IMAGE-Positioning-Diagram-1400x933.png 1400w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><figcaption id=\"caption-attachment-9165\" class=\"wp-caption-text\">IMAGE Positioning Diagram<\/figcaption><\/figure>\n<hr data-start=\"621\" data-end=\"624\" \/>\n<h2>\ud83d\udcd0 How to Resize a Background Image<\/h2>\n<p>Use <code class=\"\" data-line=\"\">background-size<\/code> to control how the image scales.<\/p>\n<h3>Option 1: Use fixed units<\/h3>\n<pre><code class=\"\" data-line=\"\">section {\n  background-size: 100px 200px;\n}<\/code><\/pre>\n<h3>Option 2: Use special keywords<\/h3>\n<table border=\"1\" cellspacing=\"0\" cellpadding=\"6\">\n<tbody>\n<tr>\n<th>Value<\/th>\n<th>Description<\/th>\n<\/tr>\n<tr>\n<td><code class=\"\" data-line=\"\">cover<\/code><\/td>\n<td>Image stretches to cover the container (may crop edges)<\/td>\n<\/tr>\n<tr>\n<td><code class=\"\" data-line=\"\">contain<\/code><\/td>\n<td>Image shrinks to fit the container (may leave empty space)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<pre><code class=\"\" data-line=\"\">section {\n  background-size: cover;\n  background-repeat: no-repeat;\n}<\/code><\/pre>\n<hr data-start=\"621\" data-end=\"624\" \/>\n<h2>\ud83e\uddf7 How to Fix Background Image While Scrolling<\/h2>\n<p>Use <code class=\"\" data-line=\"\">background-attachment<\/code> to control whether the image scrolls with the page or stays in place.<\/p>\n<pre><code class=\"\" data-line=\"\">section {\n  background-attachment: fixed;\n}<\/code><\/pre>\n<table border=\"1\" cellspacing=\"0\" cellpadding=\"6\">\n<tbody>\n<tr>\n<th>Value<\/th>\n<th>Behavior<\/th>\n<\/tr>\n<tr>\n<td><code class=\"\" data-line=\"\">scroll<\/code><\/td>\n<td>Background scrolls with the element (default)<\/td>\n<\/tr>\n<tr>\n<td><code class=\"\" data-line=\"\">fixed<\/code><\/td>\n<td>Background stays fixed on the screen (parallax-like effect)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\ud83d\uddbc\ufe0f <a href=\"https:\/\/codepen.io\/deniselemonaki\/pen\/xyz\" target=\"_blank\" rel=\"noopener\">Try this parallax effect on CodePen<\/a><\/p>\n<hr data-start=\"621\" data-end=\"624\" \/>\n<h2>\ud83c\udfa8 How to Use Gradient in CSS Background Image<\/h2>\n<p>CSS allows you to use gradients with <code class=\"\" data-line=\"\">background-image<\/code> without needing any image file.<\/p>\n<pre><code class=\"\" data-line=\"\">section {\n  background-image: linear-gradient(to right, #ff7e5f, #feb47b);\n}<\/code><\/pre>\n<h3>Common directions:<\/h3>\n<ul>\n<li><code class=\"\" data-line=\"\">to right<\/code>: Left \u2192 Right (0\u00b0)<\/li>\n<li><code class=\"\" data-line=\"\">to bottom<\/code>: Top \u2192 Bottom (90\u00b0)<\/li>\n<li><code class=\"\" data-line=\"\">to left<\/code>: Right \u2192 Left (180\u00b0)<\/li>\n<li><code class=\"\" data-line=\"\">to top<\/code>: Bottom \u2192 Top (270\u00b0)<\/li>\n<\/ul>\n<h3>Use more than two colors:<\/h3>\n<pre><code class=\"\" data-line=\"\">section {\n  background-image: linear-gradient(to right, #00f260, #0575e6, #3023ae);\n}<\/code><\/pre>\n<hr data-start=\"621\" data-end=\"624\" \/>\n<h2>\ud83e\uddea Complete Example: HTML + CSS<\/h2>\n<h3>HTML:<\/h3>\n<pre><code class=\"\" data-line=\"\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n&lt;head&gt;\n  &lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt;\n  &lt;title&gt;Background Image Demo&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;section class=&quot;hero&quot;&gt;\n    &lt;h1&gt;Hello World&lt;\/h1&gt;\n  &lt;\/section&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<h3>CSS:<\/h3>\n<pre><code class=\"\" data-line=\"\">.hero {\n  height: 400px;\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  \n  background-image: url(&quot;images\/sunset.png&quot;);\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n  background-attachment: fixed;\n}\n<\/code><\/pre>\n<hr data-start=\"621\" data-end=\"624\" \/>\n<h2>\ud83d\udcac Common Mistakes to Avoid<\/h2>\n<ul>\n<li>\u274c Forgetting the semicolon after CSS declarations<\/li>\n<li>\u274c Using wrong file paths (double-check your image location)<\/li>\n<li>\u274c Using large CSS background image without compressing it<\/li>\n<li>\u274c Forgetting <code class=\"\" data-line=\"\">background-repeat: no-repeat<\/code> when using <code class=\"\" data-line=\"\">background-size: contain<\/code><\/li>\n<\/ul>\n<hr data-start=\"621\" data-end=\"624\" \/>\n<h2>\u2753FAQ On CSS Background Image<\/h2>\n<p><strong>Q: Can I add multiple css background image?<\/strong><br \/>\nYes! Separate them with commas:<\/p>\n<pre><code class=\"\" data-line=\"\">background-image: url(&quot;img1.png&quot;), url(&quot;img2.png&quot;);<\/code><\/pre>\n<p><strong>Q: Will background images work on mobile?<\/strong><br \/>\nYes, but use responsive units or media queries to optimize for small screens.<\/p>\n<p data-start=\"137\" data-end=\"210\"><strong>Q: What\u2019s the Difference Between <code class=\"\" data-line=\"\">background<\/code> and <code class=\"\" data-line=\"\">background-image<\/code>?<\/strong><\/p>\n<p data-start=\"212\" data-end=\"337\">The <code class=\"\" data-line=\"\">background<\/code> property in CSS is a <strong data-start=\"250\" data-end=\"263\">shorthand<\/strong> that lets you set multiple background-related styles at once \u2014 including:<\/p>\n<ul data-start=\"339\" data-end=\"457\">\n<li data-start=\"339\" data-end=\"359\">\n<p data-start=\"341\" data-end=\"359\"><code class=\"\" data-line=\"\">background-image<\/code><\/p>\n<\/li>\n<li data-start=\"360\" data-end=\"380\">\n<p data-start=\"362\" data-end=\"380\"><code class=\"\" data-line=\"\">background-color<\/code><\/p>\n<\/li>\n<li data-start=\"381\" data-end=\"402\">\n<p data-start=\"383\" data-end=\"402\"><code class=\"\" data-line=\"\">background-repeat<\/code><\/p>\n<\/li>\n<li data-start=\"403\" data-end=\"422\">\n<p data-start=\"405\" data-end=\"422\"><code class=\"\" data-line=\"\">background-size<\/code><\/p>\n<\/li>\n<li data-start=\"423\" data-end=\"457\">\n<p data-start=\"425\" data-end=\"457\"><code class=\"\" data-line=\"\">background-position<\/code>, and more.<\/p>\n<\/li>\n<\/ul>\n<p data-start=\"459\" data-end=\"619\">On the other hand, <code class=\"\" data-line=\"\">background-image<\/code> is <strong data-start=\"500\" data-end=\"517\">just one part<\/strong> of the shorthand \u2014 it only controls the background image itself, not the color, size, or positioning.<\/p>\n<hr data-start=\"621\" data-end=\"624\" \/>\n<h3 data-start=\"626\" data-end=\"647\">\ud83c\udfc1 Final Thoughts<\/h3>\n<p data-start=\"649\" data-end=\"878\">CSS background image isn&#8217;t just visual fluff \u2014 they help shape the <strong data-start=\"712\" data-end=\"720\">look<\/strong>, <strong data-start=\"722\" data-end=\"730\">feel<\/strong>, and <strong data-start=\"736\" data-end=\"744\">vibe<\/strong> of your website. From full-width hero sections to elegant textures or gradients, background images can totally transform your layout.<\/p>\n<p data-start=\"649\" data-end=\"878\">If you&#8217;re excited to take your skills further, consider applying for a <a href=\"https:\/\/www.kaashivinfotech.com\/web-development-internship\/\"><strong data-start=\"532\" data-end=\"565\"> Web\u00a0 Developer Internship<\/strong><\/a> where you can build real-world projects and strengthen your portfolio. And if you&#8217;re just getting started or want a structured path, our <a href=\"https:\/\/www.kaashivinfotech.com\/front-end-developer-course\/\"><strong data-start=\"703\" data-end=\"727\">Frontend Developer Course<\/strong><\/a> is designed to take you from beginner to job-ready\u2014fast, practical, and beginner-friendly.<\/p>\n<p data-start=\"880\" data-end=\"1050\">\ud83c\udfa8 Don\u2019t be afraid to mix and match properties like <code class=\"\" data-line=\"\">background-size: cover<\/code>, <code class=\"\" data-line=\"\">background-repeat: no-repeat<\/code>, and <code class=\"\" data-line=\"\">background-position: center<\/code> to get the perfect result.<\/p>\n<p>Happy designing, and keep coding \ud83d\ude80<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When you visit a website, the visuals instantly shape your experience. One of the easiest ways to make a webpage look more appealing is by using CSS background images. They\u2019re much more expressive than plain background colors and can completely change the mood of a section or page. This guide will walk you through how [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":9171,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7949],"tags":[7951,7961,7958,7952,7950,7953,7956,7954,7960,7957,655,7959,7962,7955,617],"class_list":["post-9152","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-background","tag-background-image-tips","tag-background-vs-background-image","tag-background-image","tag-css","tag-css-background","tag-css-properties","tag-css-shorthand","tag-css-styling","tag-css-tutorial","tag-front-end-development","tag-hero-section","tag-responsive-design","tag-web-design","tag-web-development"],"_links":{"self":[{"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/posts\/9152","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/comments?post=9152"}],"version-history":[{"count":0,"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/posts\/9152\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/media\/9171"}],"wp:attachment":[{"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/media?parent=9152"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/categories?post=9152"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/tags?post=9152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}