{"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":19696,"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":"69d242fda18a6decde9626ad","content":{"languages":["javascript"],"difficulty":1},"tags":["javascript","ui","ux","code tooling","output","frontend","coding","output based questions","interview challenge"],"slug":"can-you-predict-the-answer-this-keyword---qid---BfcD5gdHrq3qCG3q1Znx","title":"Can you predict the answer? (this keyword)","questionId":"BfcD5gdHrq3qCG3q1Znx"},{"_id":"6887701050393ab5508b47e2","content":{"languages":["react"],"difficulty":2},"tags":["javascript","ui","ux","devtools","coding","frontend","glean","coding challenge","frontend","ui challenge"],"slug":"phone-home-screen---qid---kcPmsCl2o1mep1FN8Xvw","title":"Phone Home Screen","questionId":"kcPmsCl2o1mep1FN8Xvw"},{"_id":"697a002c132ce4e954c67f28","content":{"languages":["react"],"difficulty":2},"tags":["javascript","ui","ux","devtools tech","frontend interview question","hackerrank frontend interview question"],"slug":"spreadsheet-grid---qid---nBrwdTgAJo99lGIYefmC","title":"Spreadsheet Grid","questionId":"nBrwdTgAJo99lGIYefmC"},{"_id":"636b87fa20622762d08cede0","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","custom unshift","array unshift","array pop"],"slug":"how-to-implement-array-prototype-pop-javascript-interview-question-or-problem-solving-or-javascript-polyfills---qid---lujToJoIqX1KHvWPiqQf","title":"How to implement Array.prototype.pop? JavaScript Interview Question | Problem Solving | JavaScript Polyfills","questionId":"lujToJoIqX1KHvWPiqQf"},{"_id":"68ac01a9e72b278539e270b6","content":{"languages":["javascript","typescript"],"difficulty":2},"tags":["javascript","frontend","ui","ux","devtools","coding challenge","google","coding examples"],"slug":"composeasync---qid---N88NIj0YWjhkkVezECdm","title":"ComposeAsync","questionId":"N88NIj0YWjhkkVezECdm"}],"resources":[{"_id":"694fda82e4605484c24c29de","content":{"difficulty":4,"domain":1,"type":1,"isInternal":true,"languages":[]},"tags":["javascript","urls","ui","ux","frontend system design","questions","resources","tooling"],"slug":"urls-and-routing-in-frontend-applications---rid---n9dDAOaX0nmLvjnDn0uU","title":"URLs and Routing in Frontend Applications","resourceId":"n9dDAOaX0nmLvjnDn0uU"},{"_id":"5f1dedf2cbec5f7ffc0c2fb3","content":{"difficulty":2,"domain":2,"type":1,"isInternal":true,"languages":[]},"tags":["node.js","javascript","temporal dead zone","js tdz","es6","scoping","js","advanced javascript","advanced frontend"],"slug":"understanding-temporal-dead-zone-in-javascript---rid---0KEfke08AOZuNXVxRXPW","title":"Understanding Temporal Dead Zone in JavaScript","resourceId":"0KEfke08AOZuNXVxRXPW"},{"_id":"6a12f5ac4b3e6d922c54a48c","content":{"difficulty":1,"domain":1,"type":1,"isInternal":true,"languages":[]},"tags":["javascript","ui","ux","devtools tech","coding","frontend","lazy loading images","responsive images","web performance"],"slug":"lazy-loading-images---rid---YdibwFfrwv3NjOL8RtUV","title":"Lazy Loading Images","resourceId":"YdibwFfrwv3NjOL8RtUV"},{"_id":"5f1dd731cbec5f7ffc0c2fab","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-2---rid---negw30VulwpaVLRpxxMl","title":"Build your own expressjs | Part 2","resourceId":"negw30VulwpaVLRpxxMl"},{"_id":"69a7c86a92f33c7d8aa04cd9","content":{"difficulty":1,"domain":1,"type":2,"isInternal":false,"languages":[]},"tags":["javascript","ui","ux","devtools tech","coding","frontend","interview","growth","promotion"],"slug":"how-i-got-promoted-at-my-job---rid---mqhADdzPtZMdtHG2vbuU","title":"How I got promoted at my job?","resourceId":"mqhADdzPtZMdtHG2vbuU"}]}}