{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-background-image/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"5691d3f7-67d5-5990-86bf-ac85d050c5f6","title":"Tailwind CSS Background Image","slug":"/classes/tailwind-background-image/"},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n \"lastUpdated\": \"18 May 2024\",\n \"title\": \"Tailwind CSS Background Image\",\n \"metaTitle\": \"Tailwind Css Background Image\",\n \"metaDescription\": \"The tailwind background-image utility class allows you to easily add background images to elements.\",\n \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-background-image\"\n};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"h1\", null, \"Tailwind Background Image\"), mdx(\"p\", null, \"The Tailwind \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"background-image\"), \" utility class allows you to easily add background images to elements. With Tailwind background image classes, you can enhance the visual appeal of your web pages by adding captivating images as backgrounds.\"), mdx(\"h2\", null, \"Applying Tailwind Background Image\"), mdx(\"p\", null, \"To apply a tailwind background image to an element, you can use the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"bg-{image}\"), \" utility class, where \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"{image}\"), \" represents the desired image. Tailwind CSS provides a straightforward syntax to specify background images.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"
\\n This element has a gradient background image.\\n
\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n className: \"rounded-t-xl overflow-hidden bg-green-100 p-10 \"\n }, mdx(\"div\", {\n className: \"rounded-md text-white text-center font-extrabold bg-gradient-to-r from-blue-500 to-purple-500 h-12 flex justify-center items-center\"\n }, \"This element has a gradient background image.\")), mdx(\"h2\", null, \"Predefined Tailwind Background Image Classes\"), mdx(\"p\", null, \"Tailwind CSS offers a set of predefined background image classes that you can use out of the box. Some of the commonly used ones include:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"bg-fixed\"), \": Sets the background image as fixed, preventing it from scrolling with the rest of the content.\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"bg-cover\"), \": Scales the background image proportionally to cover the entire element, cropping any excess.\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"bg-contain\"), \": Scales the background image proportionally to fit within the element, preserving its aspect ratio.\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"bg-repeat\"), \": Repeats the background image both vertically and horizontally to fill the element.\"))), mdx(\"p\", null, \"You can combine these classes with color classes or custom CSS to create unique background image effects.\"), mdx(\"h2\", null, \"Custom Tailwind Background Images\"), mdx(\"p\", null, \"Tailwind CSS allows you to define your own custom background images using the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"bg-{name}\"), \" utility class. This feature is particularly useful when you want to use specific images in your project.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"
\\n This element has a custom background image.\\n
\\n\")), mdx(\"p\", null, \"In the above example, the bg-custom-image class is applied to the\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"
\"), \" element, which corresponds to a custom background image defined in the Tailwind CSS configuration file.\"), mdx(\"h2\", null, \"Responsive Tailwind Background Image\"), mdx(\"p\", null, \"Tailwind CSS enables you to apply background images responsively at different breakpoints. To use responsive tailwind background image classes, you can append the\\nbreakpoint prefix to the background image class. For example, \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"md:bg-cover\"), \" applies the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"bg-cover\"), \" background image starting from the medium breakpoint and above.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"
\\n This element has a cover background image by default, but switches to contain starting from the\\n medium breakpoint.\\n
\\n\")), mdx(\"p\", null, \"In the above example, \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"the bg-cover\"), \" class is applied by default, setting the background image to cover the element. However, starting from the medium breakpoint and above \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"(md:bg-contain)\"), \", the background image changes to be contained within the element.\"), mdx(\"h2\", null, \"Tailwind Background Image Classes table\"), mdx(\"table\", null, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Class\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Properties\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"bg-none\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"background-image: none;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"bg-gradient-to-t\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"background-image: linear-gradient(to top, var(--tw-gradient-stops));\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"bg-gradient-to-tr\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"background-image: linear-gradient(to top right, var(--tw-gradient-stops));\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"bg-gradient-to-r\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"background-image: linear-gradient(to right, var(--tw-gradient-stops));\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"bg-gradient-to-br\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"bg-gradient-to-b\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"background-image: linear-gradient(to bottom, var(--tw-gradient-stops));\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"bg-gradient-to-bl\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"bg-gradient-to-l\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"background-image: linear-gradient(to left, var(--tw-gradient-stops));\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"bg-gradient-to-tl\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"background-image: linear-gradient(to top left, var(--tw-gradient-stops));\")))), mdx(\"h2\", null, \"Windframe Tailwind blocks\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://app.windframe.dev/editor?id=timelines1\"\n }, \"Timeline\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#tailwind-background-image","title":"Tailwind Background Image","items":[{"url":"#applying-tailwind-background-image","title":"Applying Tailwind Background Image"},{"url":"#preview","title":"Preview"},{"url":"#predefined-tailwind-background-image-classes","title":"Predefined Tailwind Background Image Classes"},{"url":"#custom-tailwind-background-images","title":"Custom Tailwind Background Images"},{"url":"#responsive-tailwind-background-image","title":"Responsive Tailwind Background Image"},{"url":"#tailwind-background-image-classes-table","title":"Tailwind Background Image Classes table"},{"url":"#windframe-tailwind-blocks","title":"Windframe Tailwind blocks"}]}]},"parent":{"__typename":"File","relativePath":"classes/tailwind-background-image.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Tailwind Css Background Image","lastUpdated":"18 May 2024","metaDescription":"The tailwind background-image utility class allows you to easily add background images to elements."}}},"pageContext":{"id":"5691d3f7-67d5-5990-86bf-ac85d050c5f6"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","4045616534","956403285"]}