{"resource":{"author":{"id":"3eh0kijZwMrHum8TkMqX","name":"Devtools Tech","username":"devtoolstech"},"content":{"link":null,"difficulty":1,"domain":2,"type":1,"isInternal":true,"body":"In this article, we are going to learn how to create a faded background using HTML, CSS, and JavaScript. \r\n\r\n## Use case \r\n\r\nThis is particularly help when we want to add an overlay to our `hero` sections to add heading text. Suppose we have the following hero section on our website.\r\n\r\n```html\r\n\r\n\r\n \r\n Devtools Tech Sandbox\r\n \r\n \r\n \r\n \r\n
\r\n Mountains Are Calling\r\n
\r\n \r\n \r\n \r\n```\r\n\r\n```css\r\n.hero {\r\n width: 100%;\r\n height: 700px;\r\n background: url(https://images.unsplash.com/photo-1517048953202-826f67b3b313?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3571&q=80);\r\n background-size: cover;\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n display: flex;\r\n align-items: center;\r\n padding: 30px;\r\n box-sizing: border-box;\r\n}\r\n\r\n.hero h1 {\r\n color: white;\r\n font-size: 70px;\r\n font-weight: 400;\r\n}\r\n```\r\n\r\n### Without Faded Background Output\r\n\r\n\r\n\r\n## Add Faded Background\r\n\r\nThe above section looks okay but we can make it better by adding a faded background to our background image. Let us update our `hero` class and a gradient to the background image.\r\n\r\n```css\r\n.hero {\r\n width: 100%;\r\n height: 700px;\r\n background: linear-gradient(\r\n to right,\r\n rgba(0, 0, 0, .8), rgba(0, 0, 0, 0)\r\n ), url(https://images.unsplash.com/photo-1517048953202-826f67b3b313?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3571&q=80);\r\n ...\r\n}\r\n\r\n```\r\n\r\nWe are adding a linear gradient that moves from `left to right` direction. On the left we are adding `black color with 0.8 opacity` (`rgba(0, 0, 0, 0.8)`) and we keep the right section transparent (`rgba(0, 0, 0, 0)`). Let us see the result below!\r\n\r\n### With Faded Background Output\r\n\r\n\r\n\r\nI hope this blog post helped you in some way. Please do share it and show our content much-needed love! 😄\r\n\r\nReach out to us [here](https://twitter.com/devtoolstech).","languages":[],"editorConfig":{}},"stats":{"views":13013,"used":0,"likes":0},"description":"","published":true,"isActive":true,"tags":["javascript","frontend code","faded background","html","css","js","ui","ux","styling","sass","linear gradient","css opacity"],"slug":"how-to-create-faded-background-using-html-css-and-javascript---rid---biuSrrx7QmDLJ8iCN0Uh","isPremium":false,"categories":[],"requires":[],"_id":"636b69d7c958c137b34c4eaf","title":"How to Create Faded Background using HTML, CSS, and JavaScript","resourceId":"biuSrrx7QmDLJ8iCN0Uh","createdAt":1667983831394,"modifiedAt":1667985918126},"currentUser":null,"isOwner":false,"recommendations":{"questions":[{"_id":"6255355d3ecc8e41a79f0832","content":{"languages":["javascript","typescript"],"difficulty":1},"tags":["","javascript","format","currency","frontend","interview","problem solving","leetcode"],"slug":"implement-a-currency-formatting-utility-or-javascript-interview-question---qid---ZWwL12l2uqKZOQSAGvrl","title":"Implement a Currency Formatting Utility | JavaScript Interview Question","questionId":"ZWwL12l2uqKZOQSAGvrl"},{"_id":"64270fcb6577005718b7c555","content":{"languages":["react","html"],"difficulty":1},"tags":["javascript","frontend","ui","ux","figma","login page design","frontend projects","devkode","real world interview question","practice project","devtools tech"],"slug":"design-a-login-page-or-version-1-or-react-js-or-html-or-css-or-javascript-or-frontend-projects-for-beginners---qid---XbwRiIWYgOl8DpgCqwx6","title":"Design a Login Page | Version 1 | React.js | HTML | CSS | JavaScript | Frontend Projects for Beginners","questionId":"XbwRiIWYgOl8DpgCqwx6"},{"_id":"635172709efd8c366a2e80f4","content":{"languages":["javascript","typescript"],"difficulty":1},"tags":["","javascript","arrays","javascript polyfills","interview question","frontend","coding","devtools tech","programming","codedamn","frontend masters","egghead","razorpay","hotstar","tata1mg","swiggy","zomato","array","array findLastIndex"],"slug":"how-to-implement-array-prototype-findlastindex-javascript-interview-question-or-problem-solving-or-javascript-polyfills---qid---irZ7BX4HZ8iVyTJ7YDrv","title":"How to implement Array.prototype.findLastIndex? JavaScript Interview Question | Problem Solving | JavaScript Polyfills","questionId":"irZ7BX4HZ8iVyTJ7YDrv"},{"_id":"5e8cde7cb2cdcd5697fea7bc","content":{"difficulty":2,"languages":"javascript"},"tags":["node.js","javascript","frontend","programming","new constructor"],"title":"JS Constructor via New Keyword ","questionId":"FJ3qdetSIIobBegZdL1d","slug":"js-constructor-via-new-keyword---qid---FJ3qdetSIIobBegZdL1d"},{"_id":"6908ce763177c39e8559f7c9","content":{"languages":["react","html"],"difficulty":1},"tags":["javascript","ui","ux","infinite scroll","dom","virtual dom","disney hotstar","programming question"],"slug":"infinite-scroll-pagination---qid---FZH2HcNLF3zUMqxmlNMW","title":"Infinite Scroll Pagination","questionId":"FZH2HcNLF3zUMqxmlNMW"}],"resources":[{"_id":"5f1dd63acbec5f7ffc0c2faa","content":{"difficulty":2,"domain":3,"type":1,"isInternal":true},"tags":["node.js","express","rest","api","framework","backend","tools","devtools","framework development","build express"],"slug":"build-your-own-expressjs-or-part-1---rid---qoos1dgnByAcEaCp2rbl","title":"Build your own expressjs | Part 1","resourceId":"qoos1dgnByAcEaCp2rbl"},{"_id":"6963e277132ce4e954b04414","content":{"difficulty":4,"domain":2,"type":1,"isInternal":true,"languages":[]},"tags":["javascript","ui","ux","devtools tech","coding","frontend performance","browser rendering cycle"],"slug":"mastering-critical-rendering-path---rid---VyhOczhtA0Ds1kp2s4TN","title":"Mastering Critical Rendering Path","resourceId":"VyhOczhtA0Ds1kp2s4TN"},{"_id":"6924ac08bf1a48f85e0ddb2d","content":{"difficulty":4,"domain":1,"type":2,"isInternal":false,"languages":[]},"tags":["javascript","promises","frontend","ui","ux","devtools tech","coding","async await","async programming","coding"],"slug":"javascript-promises-complete-course---basics-to-advanced---rid---2lf744w157vmmYfDP14Q","title":"JavaScript Promises Complete Course – Basics to Advanced","resourceId":"2lf744w157vmmYfDP14Q"},{"_id":"601c195f0858864c592fb52e","content":{"difficulty":2,"domain":2,"type":2},"tags":["Javascript","Interview Questions","Web Development","Frontend"],"slug":"chained-calculator-or-frontend-interview-series-or-puneet-ahuja-or-devtools-tech---rid---ohM3pdtnJDCKDgW5nZOy","title":"Chained Calculator | Frontend Interview Series | Puneet Ahuja | Devtools Tech","resourceId":"ohM3pdtnJDCKDgW5nZOy"},{"_id":"698b2bde895fc3bf01415e40","content":{"difficulty":4,"domain":2,"type":1,"isInternal":true,"languages":[]},"tags":["javascript","ui","ux","coding","frontend","devtools tech","frontend interview experience"],"slug":"zomato-frontend-interview-experience-or-sde-2---rid---7hUoqLgUfYf13XaOXRlq","title":"Zomato Frontend Interview Experience | SDE 2","resourceId":"7hUoqLgUfYf13XaOXRlq"}]}}