[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"blog-categories":6,"topic:css-backgrounds":35,"course-tree":165},{"data":4},{"google_site_verification":5,"ga4_measurement_id":5,"site_name":5,"default_og_image":5,"twitter_handle":5},null,{"data":7},[8,14,19,25,30],{"name":9,"slug":10,"description":11,"post_count":12,"subcategories":13},"CSS","css","Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",2,[],{"name":15,"slug":16,"description":17,"post_count":12,"subcategories":18},"HTML","html","Learn HTML with practical tutorials and examples for beginners. Explore HTML tags, elements, attributes, links, images, forms, semantic HTML, and more with clear explanations and real code examples.",[],{"name":20,"slug":21,"description":22,"post_count":23,"subcategories":24},"WPF","wpf","Learn WPF with practical tutorials and examples covering XAML, windows, controls, layouts, data binding, MVVM, commands, styles, templates, debugging, and modern WPF UI development.",1,[],{"name":26,"slug":27,"description":28,"post_count":23,"subcategories":29},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":31,"slug":32,"description":33,"post_count":23,"subcategories":34},"Java","java","Learn Java with practical tutorials and examples for beginners. Explore Java syntax, variables, data types, classes, objects, methods, inheritance, exceptions, collections, and more with clear explanations and real code examples.",[],{"data":36},{"id":37,"title":38,"slug":39,"content":40,"course":41,"subcategory":42,"author":45,"reading_time_minutes":51,"cornerstone":52,"schema_type":53,"faq_json":5,"video_url":5,"canonical_url":54,"meta_title":55,"meta_description":56,"og_image":5,"toc_json":57,"code_examples":118,"quiz":135,"exercises":141,"published_at":5,"updated_at":156,"prev":157,"next":161},96,"CSS Backgrounds","css-backgrounds","\u003Ch2 id=\"what-are-css-backgrounds\">What Are CSS Backgrounds?\u003C\u002Fh2>\u003Cp>\u003Cstrong>CSS backgrounds\u003C\u002Fstrong> paint the area behind an element's content and padding (and border, depending on settings). Our focus keyword is \u003Cstrong>CSS backgrounds\u003C\u002Fstrong>, and you will learn every background property, plus trending techniques: CSS background-size cover vs contain, multiple backgrounds, background-clip text (gradient text), background-blend-mode, CSS patterns without images, and responsive hero sections.\u003C\u002Fp>\u003Ch2 id=\"the-background-properties\">The Background Properties\u003C\u002Fh2>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Property\u003C\u002Fth>\u003Cth>Purpose\u003C\u002Fth>\u003Cth>Common values\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode>background-color\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Solid color behind everything\u003C\u002Ftd>\u003Ctd>\u003Ccode>#fff\u003C\u002Fcode>, \u003Ccode>transparent\u003C\u002Fcode>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>background-image\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Image or gradient layer\u003C\u002Ftd>\u003Ctd>\u003Ccode>url(hero.jpg)\u003C\u002Fcode>, \u003Ccode>linear-gradient()\u003C\u002Fcode>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>background-repeat\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Tiling behavior\u003C\u002Ftd>\u003Ctd>\u003Ccode>repeat\u003C\u002Fcode>, \u003Ccode>no-repeat\u003C\u002Fcode>, \u003Ccode>repeat-x\u003C\u002Fcode>, \u003Ccode>space\u003C\u002Fcode>, \u003Ccode>round\u003C\u002Fcode>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>background-position\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Where the image sits\u003C\u002Ftd>\u003Ctd>\u003Ccode>center\u003C\u002Fcode>, \u003Ccode>top right\u003C\u002Fcode>, \u003Ccode>50% 20%\u003C\u002Fcode>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>background-size\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Image scaling\u003C\u002Ftd>\u003Ctd>\u003Ccode>auto\u003C\u002Fcode>, \u003Ccode>cover\u003C\u002Fcode>, \u003Ccode>contain\u003C\u002Fcode>, \u003Ccode>200px 100px\u003C\u002Fcode>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>background-attachment\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Scroll behavior\u003C\u002Ftd>\u003Ctd>\u003Ccode>scroll\u003C\u002Fcode>, \u003Ccode>fixed\u003C\u002Fcode>, \u003Ccode>local\u003C\u002Fcode>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>background-origin\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Where position starts\u003C\u002Ftd>\u003Ctd>\u003Ccode>padding-box\u003C\u002Fcode>, \u003Ccode>border-box\u003C\u002Fcode>, \u003Ccode>content-box\u003C\u002Fcode>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>background-clip\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Where the paint is cut off\u003C\u002Ftd>\u003Ctd>\u003Ccode>border-box\u003C\u002Fcode>, \u003Ccode>padding-box\u003C\u002Fcode>, \u003Ccode>content-box\u003C\u002Fcode>, \u003Ccode>text\u003C\u002Fcode>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>background-blend-mode\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>How layers blend\u003C\u002Ftd>\u003Ctd>\u003Ccode>multiply\u003C\u002Fcode>, \u003Ccode>overlay\u003C\u002Fcode>, \u003Ccode>screen\u003C\u002Fcode>\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Ch2 id=\"background-color\">background-color\u003C\u002Fh2>\u003Cp>The color is painted below all image layers. Always set a background color as a fallback in case an image fails to load, and to guarantee text contrast.\u003C\u002Fp>\u003Ch2 id=\"background-image\">background-image\u003C\u002Fh2>\u003Cp>Accepts \u003Ccode>url()\u003C\u002Fcode>, gradients and \u003Ccode>image-set()\u003C\u002Fcode> for high-DPI images. Use CSS backgrounds for \u003Cem>decorative\u003C\u002Fem> images. If the image carries meaning, use an HTML \u003Ccode><img>\u003C\u002Fcode> with alt text instead, because backgrounds are invisible to screen readers and search engines.\u003C\u002Fp>\u003Ch2 id=\"background-size-cover-vs-contain\">background-size: cover vs contain\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Ccode>cover\u003C\u002Fcode> scales the image to fill the whole box and crops the overflow. Best for hero sections.\u003C\u002Fli>\u003Cli>\u003Ccode>contain\u003C\u002Fcode> scales the image so it fully fits inside the box, possibly leaving empty space.\u003C\u002Fli>\u003Cli>\u003Ccode>auto\u003C\u002Fcode> uses the natural size. Two values set width and height, for example \u003Ccode>40px 40px\u003C\u002Fcode>.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"background-position-and-repeat\">background-position and repeat\u003C\u002Fh2>\u003Cp>Position accepts keywords, lengths and percentages. Use \u003Ccode>center\u003C\u002Fcode> to focus the subject. The four-value syntax \u003Ccode>right 20px bottom 10px\u003C\u002Fcode> offsets from edges. For patterns, use \u003Ccode>repeat\u003C\u002Fcode>. For a single logo, use \u003Ccode>no-repeat\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch2 id=\"background-attachment\">background-attachment\u003C\u002Fh2>\u003Cp>\u003Ccode>fixed\u003C\u002Fcode> pins the background to the viewport for a simple parallax effect. It can be janky on mobile browsers, and iOS Safari historically ignores it, so test carefully.\u003C\u002Fp>\u003Ch2 id=\"background-clip-and-origin\">background-clip and origin\u003C\u002Fh2>\u003Cp>\u003Ccode>background-clip: text\u003C\u002Fcode> with a transparent text color creates \u003Cstrong>gradient text\u003C\u002Fstrong>. Add \u003Ccode>-webkit-background-clip: text\u003C\u002Fcode> for older Safari and Chrome versions. \u003Ccode>padding-box\u003C\u002Fcode> and \u003Ccode>content-box\u003C\u002Fcode> help make borders and inner frames.\u003C\u002Fp>\u003Ch2 id=\"multiple-backgrounds\">Multiple Backgrounds\u003C\u002Fh2>\u003Cp>Separate layers with commas. The \u003Cstrong>first layer is on top\u003C\u002Fstrong>. Only the last layer may contain a \u003Ccode>background-color\u003C\u002Fcode> in the shorthand.\u003C\u002Fp>\u003Cpre>\u003Ccode>.hero {\n  background:\n    linear-gradient(to top, rgb(0 0 0 \u002F 70%), transparent) ,\n    url(hero.jpg) center \u002F cover no-repeat,\n    #0f172a;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2 id=\"the-background-shorthand\">The background Shorthand\u003C\u002Fh2>\u003Cp>Syntax order: \u003Ccode>background: color image position \u002F size repeat attachment origin clip\u003C\u002Fcode>. Position and size must be written with a slash between them: \u003Ccode>center \u002F cover\u003C\u002Fcode>. Remember that the shorthand resets every unspecified sub-property to its initial value, which can accidentally erase earlier settings.\u003C\u002Fp>\u003Ch2 id=\"background-blend-mode\">background-blend-mode\u003C\u002Fh2>\u003Cp>Blend an image with the background color or another layer. Example: \u003Ccode>background-color: #2563eb; background-image: url(photo.jpg); background-blend-mode: multiply;\u003C\u002Fcode> gives a duotone look, a very trendy effect.\u003C\u002Fp>\u003Ch2 id=\"patterns-without-images\">Patterns Without Images\u003C\u002Fh2>\u003Cp>Gradients can draw stripes, grids and dots using tiny repeating tiles, saving HTTP requests. Combine \u003Ccode>background-size\u003C\u002Fcode> with gradients to build any pattern.\u003C\u002Fp>\u003Ch2 id=\"performance-and-accessibility\">Performance and Accessibility\u003C\u002Fh2>\u003Cul>\u003Cli>Compress images and use modern formats (WebP, AVIF). Use \u003Ccode>image-set()\u003C\u002Fcode> for retina versions.\u003C\u002Fli>\u003Cli>Large hero backgrounds affect LCP. For above-the-fold hero images, an \u003Ccode><img>\u003C\u002Fcode> with \u003Ccode>fetchpriority='high'\u003C\u002Fcode> is often faster than a CSS background.\u003C\u002Fli>\u003Cli>Always ensure text over images has enough contrast, using overlay gradients.\u003C\u002Fli>\u003Cli>Do not put essential content in background images.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"best-practices\">Best Practices\u003C\u002Fh2>\u003Cul>\u003Cli>Set a fallback \u003Ccode>background-color\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Use \u003Ccode>cover\u003C\u002Fcode> plus \u003Ccode>center\u003C\u002Fcode> for hero backgrounds.\u003C\u002Fli>\u003Cli>Add a dark gradient overlay for readable text.\u003C\u002Fli>\u003Cli>Use the shorthand carefully, or use longhand properties for clarity.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"common-mistakes\">Common Mistakes\u003C\u002Fh2>\u003Cul>\u003Cli>Forgetting the slash in \u003Ccode>center \u002F cover\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Placing a color in a non-final layer of the shorthand.\u003C\u002Fli>\u003Cli>Expecting a background image to show without giving the element a height.\u003C\u002Fli>\u003Cli>Using \u003Ccode>background-attachment: fixed\u003C\u002Fcode> on mobile without testing.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"summary\">Summary\u003C\u002Fh2>\u003Cp>Backgrounds combine color, images and gradients in stackable layers. Learn \u003Ccode>size\u003C\u002Fcode>, \u003Ccode>position\u003C\u002Fcode>, \u003Ccode>repeat\u003C\u002Fcode>, \u003Ccode>clip\u003C\u002Fcode> and blend modes, and you can build heroes, patterns and gradient text with pure CSS. Try the examples below.\u003C\u002Fp>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  .box { width: 200px; height: 120px; margin: 6px; display: inline-block; border: 2px solid #334155; background: linear-gradient(135deg, #f59e0b, #ef4444) no-repeat; font: 12px sans-serif; color: #fff; }\n  .cover { background-size: cover; }\n  .contain { background-size: contain; }\n  .fixed-size { background-size: 60px 60px; background-position: center; }\n<\u002Fstyle>\n<div class='box fixed-size'>60px x 60px, centered<\u002Fdiv>\n<div class='box contain'>contain<\u002Fdiv>\n<div class='box cover'>cover<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  .hero { height: 200px; max-width: 420px; border-radius: 12px; display: flex; align-items: flex-end; padding: 16px; color: #fff; font-family: sans-serif;\n    background:\n      linear-gradient(to top, rgb(0 0 0 \u002F 75%), transparent 70%),\n      radial-gradient(circle at 80% 20%, #38bdf8, transparent 40%),\n      linear-gradient(135deg, #1e3a8a, #7c3aed);\n  }\n<\u002Fstyle>\n<div class='hero'><h2>Readable text on a layered hero<\u002Fh2><\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  .gt { font: 800 56px\u002F1.1 sans-serif; margin: 0; background: linear-gradient(90deg, #ec4899, #8b5cf6, #06b6d4); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }\n<\u002Fstyle>\n<h1 class='gt'>Gradient Text<\u002Fh1>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  .dots { height: 140px; border-radius: 10px; background-color: #f8fafc; background-image: radial-gradient(#94a3b8 2px, transparent 2px); background-size: 20px 20px; margin-bottom: 10px; }\n  .grid { height: 140px; border-radius: 10px; background-color: #0f172a; background-image: linear-gradient(#334155 1px, transparent 1px), linear-gradient(90deg, #334155 1px, transparent 1px); background-size: 24px 24px; margin-bottom: 10px; }\n  .stripes { height: 140px; border-radius: 10px; background: repeating-linear-gradient(45deg, #fde68a 0 12px, #fbbf24 12px 24px); }\n<\u002Fstyle>\n<div class='dots'><\u002Fdiv>\n<div class='grid'><\u002Fdiv>\n<div class='stripes'><\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  .duo { height: 180px; max-width: 420px; border-radius: 12px; background-color: #2563eb; background-image: linear-gradient(45deg, #f97316, #fde047 40%, #22c55e 70%, #0ea5e9); background-blend-mode: multiply; }\n  .clip { margin-top: 12px; padding: 16px; border: 12px dashed #f97316; background: #2563eb; background-clip: content-box; color: #fff; font-family: sans-serif; max-width: 380px; }\n<\u002Fstyle>\n<div class='duo'><\u002Fdiv>\n<div class='clip'>background-clip: content-box paints only inside the padding<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":9,"slug":10},{"name":43,"slug":44},"Colors, Backgrounds & Effects","colors-backgrounds-effects",{"slug":46,"display_name":47,"job_title":5,"short_bio":5,"expertise_tags":48,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":49,"posts":50},"badar-khalil","Badar Khalil",[],[],[],4,false,"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fcss-backgrounds","CSS Backgrounds: Image, Size, Position & Clip","Master CSS backgrounds: background-color, image, size, position, repeat, multiple backgrounds, background-clip text and blend modes.",[58,62,66,69,72,76,80,83,87,91,95,98,102,106,110,114],{"id":59,"text":60,"level":12,"children":61},"what-are-css-backgrounds","What Are CSS Backgrounds?",[],{"id":63,"text":64,"level":12,"children":65},"the-background-properties","The Background Properties",[],{"id":67,"text":67,"level":12,"children":68},"background-color",[],{"id":70,"text":70,"level":12,"children":71},"background-image",[],{"id":73,"text":74,"level":12,"children":75},"background-size-cover-vs-contain","background-size: cover vs contain",[],{"id":77,"text":78,"level":12,"children":79},"background-position-and-repeat","background-position and repeat",[],{"id":81,"text":81,"level":12,"children":82},"background-attachment",[],{"id":84,"text":85,"level":12,"children":86},"background-clip-and-origin","background-clip and origin",[],{"id":88,"text":89,"level":12,"children":90},"multiple-backgrounds","Multiple Backgrounds",[],{"id":92,"text":93,"level":12,"children":94},"the-background-shorthand","The background Shorthand",[],{"id":96,"text":96,"level":12,"children":97},"background-blend-mode",[],{"id":99,"text":100,"level":12,"children":101},"patterns-without-images","Patterns Without Images",[],{"id":103,"text":104,"level":12,"children":105},"performance-and-accessibility","Performance and Accessibility",[],{"id":107,"text":108,"level":12,"children":109},"best-practices","Best Practices",[],{"id":111,"text":112,"level":12,"children":113},"common-mistakes","Common Mistakes",[],{"id":115,"text":116,"level":12,"children":117},"summary","Summary",[],[119,123,126,129,132],{"id":120,"language":16,"code":121,"is_editable":122},259,"\u003Cstyle>\n  .box { width: 200px; height: 120px; margin: 6px; display: inline-block; border: 2px solid #334155; background: linear-gradient(135deg, #f59e0b, #ef4444) no-repeat; font: 12px sans-serif; color: #fff; }\n  .cover { background-size: cover; }\n  .contain { background-size: contain; }\n  .fixed-size { background-size: 60px 60px; background-position: center; }\n\u003C\u002Fstyle>\n\u003Cdiv class='box fixed-size'>60px x 60px, centered\u003C\u002Fdiv>\n\u003Cdiv class='box contain'>contain\u003C\u002Fdiv>\n\u003Cdiv class='box cover'>cover\u003C\u002Fdiv>",true,{"id":124,"language":16,"code":125,"is_editable":122},260,"\u003Cstyle>\n  .hero { height: 200px; max-width: 420px; border-radius: 12px; display: flex; align-items: flex-end; padding: 16px; color: #fff; font-family: sans-serif;\n    background:\n      linear-gradient(to top, rgb(0 0 0 \u002F 75%), transparent 70%),\n      radial-gradient(circle at 80% 20%, #38bdf8, transparent 40%),\n      linear-gradient(135deg, #1e3a8a, #7c3aed);\n  }\n\u003C\u002Fstyle>\n\u003Cdiv class='hero'>\u003Ch2>Readable text on a layered hero\u003C\u002Fh2>\u003C\u002Fdiv>",{"id":127,"language":16,"code":128,"is_editable":122},261,"\u003Cstyle>\n  .gt { font: 800 56px\u002F1.1 sans-serif; margin: 0; background: linear-gradient(90deg, #ec4899, #8b5cf6, #06b6d4); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }\n\u003C\u002Fstyle>\n\u003Ch1 class='gt'>Gradient Text\u003C\u002Fh1>",{"id":130,"language":16,"code":131,"is_editable":122},262,"\u003Cstyle>\n  .dots { height: 140px; border-radius: 10px; background-color: #f8fafc; background-image: radial-gradient(#94a3b8 2px, transparent 2px); background-size: 20px 20px; margin-bottom: 10px; }\n  .grid { height: 140px; border-radius: 10px; background-color: #0f172a; background-image: linear-gradient(#334155 1px, transparent 1px), linear-gradient(90deg, #334155 1px, transparent 1px); background-size: 24px 24px; margin-bottom: 10px; }\n  .stripes { height: 140px; border-radius: 10px; background: repeating-linear-gradient(45deg, #fde68a 0 12px, #fbbf24 12px 24px); }\n\u003C\u002Fstyle>\n\u003Cdiv class='dots'>\u003C\u002Fdiv>\n\u003Cdiv class='grid'>\u003C\u002Fdiv>\n\u003Cdiv class='stripes'>\u003C\u002Fdiv>",{"id":133,"language":16,"code":134,"is_editable":122},263,"\u003Cstyle>\n  .duo { height: 180px; max-width: 420px; border-radius: 12px; background-color: #2563eb; background-image: linear-gradient(45deg, #f97316, #fde047 40%, #22c55e 70%, #0ea5e9); background-blend-mode: multiply; }\n  .clip { margin-top: 12px; padding: 16px; border: 12px dashed #f97316; background: #2563eb; background-clip: content-box; color: #fff; font-family: sans-serif; max-width: 380px; }\n\u003C\u002Fstyle>\n\u003Cdiv class='duo'>\u003C\u002Fdiv>\n\u003Cdiv class='clip'>background-clip: content-box paints only inside the padding\u003C\u002Fdiv>",{"id":136,"slug":137,"title":138,"time_limit_seconds":5,"pass_percentage":139,"question_count":140},36,"css-backgrounds-quiz","CSS Backgrounds Quiz",70,5,[142,149],{"id":143,"title":144,"slug":145,"prompt":146,"starter_code":147,"expected_output":148,"language":16,"order_index":23},107,"Create a Hero With an Overlay","hero-with-overlay","Style .hero so it is 240px tall, uses two background layers (a dark gradient overlay from bottom to transparent on top, and a blue-to-purple linear gradient below), and has a fallback background color. The heading must be white and readable.","\u003Cstyle>\n  .hero { \u002F* your code *\u002F }\n  .hero h2 { color: #fff; margin: 0; }\n\u003C\u002Fstyle>\n\u003Cdiv class='hero'>\u003Ch2>Learn CSS Backgrounds\u003C\u002Fh2>\u003C\u002Fdiv>","A 240px hero with a layered gradient and readable white text.",{"id":150,"title":151,"slug":152,"prompt":153,"starter_code":154,"expected_output":155,"language":16,"order_index":12},108,"Make Gradient Text","make-gradient-text","Use background-clip: text to give the h1 a horizontal gradient from orange to pink. Include the -webkit- prefixed version too.","\u003Cstyle>\n  h1 { font: 800 48px sans-serif; \u002F* your code *\u002F }\n\u003C\u002Fstyle>\n\u003Ch1>Gradient Heading\u003C\u002Fh1>","The heading text shows an orange to pink gradient.","2026-09-29T18:53:27+00:00",{"id":158,"slug":159,"title":160},95,"css-colors-hex-rgb-hsl-oklch","CSS Colors (HEX, RGB, HSL, OKLCH)",{"id":162,"slug":163,"title":164},97,"css-gradients-linear-radial-conic","CSS Gradients (Linear, Radial, Conic)",{"data":166},[167,485],{"id":23,"name":15,"slug":168,"icon":5,"icon_url":5,"short_description":169,"meta_title":170,"meta_description":171,"og_image":172,"locale":173,"subcategories":174},"html-tutorial","Welcome to our HTML Tutorial for Beginners, a complete guide designed to help you learn HTML from the ground up.\n\nHTML, which stands for HyperText Markup Language, is the standard language used to structure content on the web. Whether you want to become a web developer, build your own website, or continue learning CSS and JavaScript, understanding HTML is an essential first step.\n\nThis HTML course takes you through the fundamentals step by step, using simple explanations and practical examples. ","HTML Tutorial for Beginners - Learn HTML Step by Step","Learn HTML from scratch with our beginner-friendly HTML tutorial. Understand HTML tags, elements, forms, tables, links, images, semantic HTML and more with practical examples.","https:\u002F\u002Fwpfsharp.com\u002Fstorage\u002Fcourses\u002Fog\u002F01M2GK0XN45C0B937NF9XFAD4S.webp","en",[175,199,235,259,334,368,382,410,434,450],{"id":23,"name":176,"slug":177,"order_index":23,"topics":178},"HTML Fundamentals & Setup","html-fundamentals-setup",[179,182,185,189,192,195],{"id":12,"title":180,"slug":181,"order_index":23,"cornerstone":52,"reading_time_minutes":12},"HTML Editors & Environment Setup","html-editors-and-environment-setup",{"id":23,"title":183,"slug":184,"order_index":23,"cornerstone":52,"reading_time_minutes":23},"HTML Introduction & History","html-introduction-and-history",{"id":186,"title":187,"slug":188,"order_index":186,"cornerstone":52,"reading_time_minutes":12},3,"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":51,"title":190,"slug":191,"order_index":51,"cornerstone":52,"reading_time_minutes":12},"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":140,"title":193,"slug":194,"order_index":140,"cornerstone":52,"reading_time_minutes":12},"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":196,"title":197,"slug":198,"order_index":196,"cornerstone":52,"reading_time_minutes":12},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":12,"name":200,"slug":201,"order_index":12,"topics":202},"Text & Content Basics","text-content-basics",[203,207,211,215,219,223,227,231],{"id":204,"title":205,"slug":206,"order_index":204,"cornerstone":52,"reading_time_minutes":12},7,"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":208,"title":209,"slug":210,"order_index":208,"cornerstone":52,"reading_time_minutes":12},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":212,"title":213,"slug":214,"order_index":212,"cornerstone":52,"reading_time_minutes":23},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":216,"title":217,"slug":218,"order_index":216,"cornerstone":52,"reading_time_minutes":12},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":220,"title":221,"slug":222,"order_index":220,"cornerstone":52,"reading_time_minutes":12},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":224,"title":225,"slug":226,"order_index":224,"cornerstone":52,"reading_time_minutes":12},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":228,"title":229,"slug":230,"order_index":228,"cornerstone":52,"reading_time_minutes":12},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":232,"title":233,"slug":234,"order_index":232,"cornerstone":52,"reading_time_minutes":12},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":186,"name":236,"slug":237,"order_index":186,"topics":238},"Links, Media & Navigation","links-media-navigation",[239,243,247,251,255],{"id":240,"title":241,"slug":242,"order_index":240,"cornerstone":52,"reading_time_minutes":12},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":244,"title":245,"slug":246,"order_index":244,"cornerstone":52,"reading_time_minutes":12},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":248,"title":249,"slug":250,"order_index":248,"cornerstone":52,"reading_time_minutes":23},17,"HTML Favicon Setup","html-favicon-setup",{"id":252,"title":253,"slug":254,"order_index":252,"cornerstone":52,"reading_time_minutes":12},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":256,"title":257,"slug":258,"order_index":256,"cornerstone":52,"reading_time_minutes":12},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":51,"name":260,"slug":261,"order_index":51,"topics":262},"Structuring Content","structuring-content",[263,268,273,278,283,287,291,295,299,303,307,311,315,319,323,327,331],{"id":264,"title":265,"slug":266,"order_index":267,"cornerstone":52,"reading_time_minutes":12},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":269,"title":270,"slug":271,"order_index":272,"cornerstone":52,"reading_time_minutes":12},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":274,"title":275,"slug":276,"order_index":277,"cornerstone":52,"reading_time_minutes":12},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":279,"title":280,"slug":281,"order_index":282,"cornerstone":52,"reading_time_minutes":23},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":284,"title":285,"slug":286,"order_index":264,"cornerstone":52,"reading_time_minutes":12},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":288,"title":289,"slug":290,"order_index":269,"cornerstone":52,"reading_time_minutes":23},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":292,"title":293,"slug":294,"order_index":274,"cornerstone":52,"reading_time_minutes":12},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":296,"title":297,"slug":298,"order_index":279,"cornerstone":52,"reading_time_minutes":12},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":300,"title":301,"slug":302,"order_index":284,"cornerstone":52,"reading_time_minutes":12},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":304,"title":305,"slug":306,"order_index":288,"cornerstone":52,"reading_time_minutes":186},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":308,"title":309,"slug":310,"order_index":292,"cornerstone":52,"reading_time_minutes":12},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":312,"title":313,"slug":314,"order_index":296,"cornerstone":52,"reading_time_minutes":12},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":316,"title":317,"slug":318,"order_index":300,"cornerstone":52,"reading_time_minutes":23},77,"HTML Symbols","html-symbols",{"id":320,"title":321,"slug":322,"order_index":320,"cornerstone":52,"reading_time_minutes":23},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":324,"title":325,"slug":326,"order_index":324,"cornerstone":52,"reading_time_minutes":12},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":328,"title":329,"slug":330,"order_index":328,"cornerstone":52,"reading_time_minutes":23},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":136,"title":332,"slug":333,"order_index":136,"cornerstone":52,"reading_time_minutes":23},"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":204,"name":335,"slug":336,"order_index":140,"topics":337},"Forms & User Input","forms-user-input",[338,343,348,353,358,363],{"id":339,"title":340,"slug":341,"order_index":342,"cornerstone":52,"reading_time_minutes":12},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":344,"title":345,"slug":346,"order_index":347,"cornerstone":52,"reading_time_minutes":23},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":349,"title":350,"slug":351,"order_index":352,"cornerstone":52,"reading_time_minutes":23},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":354,"title":355,"slug":356,"order_index":357,"cornerstone":52,"reading_time_minutes":12},52,"HTML Input Types (Modern Types: email, date, color, range)","html-input-types-modern-email-date-color-range",40,{"id":359,"title":360,"slug":361,"order_index":362,"cornerstone":52,"reading_time_minutes":12},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":364,"title":365,"slug":366,"order_index":367,"cornerstone":52,"reading_time_minutes":12},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":208,"name":369,"slug":370,"order_index":196,"topics":371},"Graphics & Visuals","graphics-visuals",[372,377],{"id":373,"title":374,"slug":375,"order_index":376,"cornerstone":52,"reading_time_minutes":186},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":378,"title":379,"slug":380,"order_index":381,"cornerstone":52,"reading_time_minutes":186},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":212,"name":383,"slug":384,"order_index":204,"topics":385},"Multimedia","multimedia",[386,391,396,401,406],{"id":387,"title":388,"slug":389,"order_index":390,"cornerstone":52,"reading_time_minutes":12},57,"HTML Media Overview","html-media-overview",45,{"id":392,"title":393,"slug":394,"order_index":395,"cornerstone":52,"reading_time_minutes":12},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":397,"title":398,"slug":399,"order_index":400,"cornerstone":52,"reading_time_minutes":12},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":402,"title":403,"slug":404,"order_index":405,"cornerstone":52,"reading_time_minutes":12},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":407,"title":408,"slug":409,"order_index":339,"cornerstone":52,"reading_time_minutes":12},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":216,"name":411,"slug":412,"order_index":208,"topics":413},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[414,418,422,426,430],{"id":415,"title":416,"slug":417,"order_index":344,"cornerstone":52,"reading_time_minutes":12},62,"HTML Geolocation API","html-geolocation-api",{"id":419,"title":420,"slug":421,"order_index":349,"cornerstone":52,"reading_time_minutes":12},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":423,"title":424,"slug":425,"order_index":354,"cornerstone":52,"reading_time_minutes":12},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":427,"title":428,"slug":429,"order_index":359,"cornerstone":52,"reading_time_minutes":12},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":431,"title":432,"slug":433,"order_index":364,"cornerstone":52,"reading_time_minutes":12},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":220,"name":435,"slug":436,"order_index":212,"topics":437},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[438,442,446],{"id":439,"title":440,"slug":441,"order_index":373,"cornerstone":52,"reading_time_minutes":12},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":443,"title":444,"slug":445,"order_index":378,"cornerstone":52,"reading_time_minutes":12},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":447,"title":448,"slug":449,"order_index":387,"cornerstone":52,"reading_time_minutes":12},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":224,"name":451,"slug":452,"order_index":216,"topics":453},"Reference & Practice","reference-practice",[454,457,461,465,469,473,477,481],{"id":139,"title":455,"slug":456,"order_index":23,"cornerstone":52,"reading_time_minutes":12},"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":458,"title":459,"slug":460,"order_index":12,"cornerstone":52,"reading_time_minutes":12},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":462,"title":463,"slug":464,"order_index":186,"cornerstone":52,"reading_time_minutes":12},72,"HTML Events Reference","html-events-reference",{"id":466,"title":467,"slug":468,"order_index":51,"cornerstone":52,"reading_time_minutes":12},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":470,"title":471,"slug":472,"order_index":140,"cornerstone":52,"reading_time_minutes":12},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":474,"title":475,"slug":476,"order_index":196,"cornerstone":52,"reading_time_minutes":12},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":478,"title":479,"slug":480,"order_index":204,"cornerstone":52,"reading_time_minutes":186},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":482,"title":483,"slug":484,"order_index":208,"cornerstone":52,"reading_time_minutes":23},81,"HTML Quiz & Practice Exercises","html-quiz-practice-exercises",{"id":12,"name":9,"slug":10,"icon":5,"icon_url":5,"short_description":486,"meta_title":487,"meta_description":488,"og_image":5,"locale":173,"subcategories":489},"Master CSS from basics to advanced. Learn styling, layouts, Flexbox, Grid, and responsive design with practical examples.","CSS Course - Learn CSS from Scratch to Advanced","Learn CSS (Cascading Style Sheets) step by step. Master selectors, layouts, Flexbox, Grid, animations, and responsive web design with hands-on examples.",[490,515,536],{"id":228,"name":491,"slug":492,"order_index":493,"topics":494},"CSS Fundamentals & Setup","css-fundamentals-setup",0,[495,499,503,507,511],{"id":496,"title":497,"slug":498,"order_index":23,"cornerstone":52,"reading_time_minutes":51},82,"CSS Introduction & History: What Is CSS and Why It Matters","css-introduction-and-history",{"id":500,"title":501,"slug":502,"order_index":12,"cornerstone":52,"reading_time_minutes":51},83,"CSS Syntax & How Browsers Apply Styles","css-syntax-how-browsers-apply-styles",{"id":504,"title":505,"slug":506,"order_index":186,"cornerstone":52,"reading_time_minutes":186},84,"Setting Up Your CSS Workspace: Linking Files & Live Server","setting-up-css-workspace-linking-files-live-server",{"id":508,"title":509,"slug":510,"order_index":51,"cornerstone":52,"reading_time_minutes":186},85,"CSS Comments & Code Formatting Best Practices","css-comments-and-code-formatting",{"id":512,"title":513,"slug":514,"order_index":140,"cornerstone":52,"reading_time_minutes":140},86,"Browser DevTools for CSS: Inspect, Debug & Edit Styles Live","browser-devtools-for-css",{"id":240,"name":43,"slug":44,"order_index":493,"topics":516},[517,518,519,520,524,528,532],{"id":158,"title":160,"slug":159,"order_index":232,"cornerstone":52,"reading_time_minutes":140},{"id":37,"title":38,"slug":39,"order_index":240,"cornerstone":52,"reading_time_minutes":51},{"id":162,"title":164,"slug":163,"order_index":244,"cornerstone":52,"reading_time_minutes":140},{"id":521,"title":522,"slug":523,"order_index":248,"cornerstone":52,"reading_time_minutes":140},98,"CSS Borders, Outlines & Rounded Corners","css-borders-outlines-rounded-corners",{"id":525,"title":526,"slug":527,"order_index":252,"cornerstone":52,"reading_time_minutes":196},99,"CSS Box Shadow & Text Shadow","css-box-shadow-text-shadow",{"id":529,"title":530,"slug":531,"order_index":256,"cornerstone":52,"reading_time_minutes":140},100,"CSS Opacity & Blend Modes","css-opacity-blend-modes",{"id":533,"title":534,"slug":535,"order_index":267,"cornerstone":52,"reading_time_minutes":196},101,"CSS Filters & backdrop-filter (Glassmorphism)","css-filters-backdrop-filter-glassmorphism",{"id":232,"name":537,"slug":538,"order_index":493,"topics":539},"Selectors & the Cascade","selectors-the-cascade",[540,544,548,552,556,560,564,568],{"id":541,"title":542,"slug":543,"order_index":196,"cornerstone":52,"reading_time_minutes":51},87,"CSS Basic Selectors: Type, Class, ID, Universal & Grouping","css-basic-selectors",{"id":545,"title":546,"slug":547,"order_index":204,"cornerstone":52,"reading_time_minutes":51},88,"CSS Combinators: Descendant, Child, Adjacent & General Sibling","css-combinators",{"id":549,"title":550,"slug":551,"order_index":208,"cornerstone":52,"reading_time_minutes":51},89,"CSS Attribute Selectors: [attr], ^=, $=, *= and More","css-attribute-selectors",{"id":553,"title":554,"slug":555,"order_index":212,"cornerstone":52,"reading_time_minutes":196},90,"CSS Pseudo-classes: :hover, :focus, :nth-child & Modern Selectors","css-pseudo-classes",{"id":557,"title":558,"slug":559,"order_index":216,"cornerstone":52,"reading_time_minutes":140},91,"CSS Pseudo-elements (::before, ::after)","css-pseudo-elements-before-after",{"id":561,"title":562,"slug":563,"order_index":220,"cornerstone":52,"reading_time_minutes":140},92,"Modern CSS Selectors: :is(), :where(), :has()","modern-css-selectors-is-where-has",{"id":565,"title":566,"slug":567,"order_index":224,"cornerstone":52,"reading_time_minutes":51},93,"CSS Specificity Explained","css-specificity-explained",{"id":569,"title":570,"slug":571,"order_index":228,"cornerstone":52,"reading_time_minutes":140},94,"Cascade, Inheritance & !important","css-cascade-inheritance-important"]