{"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":19680,"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":"5ebb86d33f4a621665113a48","content":{"difficulty":2,"languages":"javascript"},"tags":["javascript"],"title":"What will be the output for below in the browser?","questionId":"BNZqx9cIjQd433HzPSjJ","slug":"what-will-be-the-output-for-below-in-the-browser---qid---BNZqx9cIjQd433HzPSjJ"},{"_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":"696e2b69132ce4e954ba3481","content":{"languages":["javascript","typescript"],"difficulty":1},"tags":["javascript","ui","ux","devtools tech","coding","frontend interview question","flipkart interview question","interview problem"],"slug":"repeat-characters---qid---9I0hQBRdt4d5buJYVUss","title":"Repeat Characters","questionId":"9I0hQBRdt4d5buJYVUss"},{"_id":"6a4244f5ce3a43c7a208b2e9","content":{"languages":["react"],"difficulty":1},"tags":["javascript","ui","ux","devtools tech","coding","frontend","devtools tech"],"slug":"multi-stepper-component---qid---SUE3NwsiVwW2gR19qUs5","title":"Multi-Stepper Component","questionId":"SUE3NwsiVwW2gR19qUs5"},{"_id":"6830406f7556c04fdb68c7bf","content":{"languages":["react","html"],"difficulty":2},"tags":["ui","ux","bookmyshow","cinema hall structure","coding","devtools tech","frontend","coding architecture"],"slug":"cinema-hall-layout-structure---qid---iesvxlR6cUmOm8RhyatL","title":"Cinema Hall Layout Structure","questionId":"iesvxlR6cUmOm8RhyatL"}],"resources":[{"_id":"636cd77320622762d08cfe22","content":{"difficulty":1,"domain":2,"type":1,"isInternal":true},"tags":["javascript","frontend","code","array","interview questions","array polyfills","advanced javascript","js interview questions","hackerrank","codedamn","coding","interview preparation"],"slug":"top-10-javascript-interview-questions-based-on-array-polyfills---rid---oNzRUjONl4YB5ixIEGrl","title":"Top 10 JavaScript Interview Questions based on Array Polyfills","resourceId":"oNzRUjONl4YB5ixIEGrl"},{"_id":"66a4ca5daac82a58634c2bfe","content":{"difficulty":4,"domain":2,"type":1,"isInternal":true,"languages":["undefined"]},"tags":["javascript","frontend","ui","ux","coding","atlassian","frontend coding challenge","feature flags","interactive shape"],"slug":"top-atlassian-frontend-interview-questions-and-process---rid---Bu7bJx9jNVoIsrH71Byb","title":"Top Atlassian Frontend Interview Questions and Process","resourceId":"Bu7bJx9jNVoIsrH71Byb"},{"_id":"692339ccbf1a48f85e0d1d38","content":{"difficulty":4,"domain":2,"type":2,"isInternal":false,"languages":[]},"tags":[""],"slug":"quick-way-to-fix-uncompressed-javascript/css-files-devtools-trick---rid---bz9xmaeXqGkkZaLgj3tL","title":"Quick way to fix Uncompressed JavaScript/CSS Files (DevTools Trick)","resourceId":"bz9xmaeXqGkkZaLgj3tL"},{"_id":"5f1dedb6cbec5f7ffc0c2fb2","content":{"difficulty":2,"domain":2,"type":1,"isInternal":true},"tags":["reactjs","frontend","javascript","setstate","ui","code","devtools","react setstate"],"slug":"understanding-react-setstate---rid---eA1TtSO9ANI5xpBvb0nA","title":"Understanding React setState","resourceId":"eA1TtSO9ANI5xpBvb0nA"},{"_id":"6a47f2cd9d0d3621161949c7","content":{"difficulty":1,"domain":1,"type":1,"isInternal":true,"languages":[]},"tags":["javascript","ui","ux","devtools tech","coding","frontend","challenges","web performance"],"slug":"optimising-web-performance-for-low-powered-devices---rid---v6b2cw5kovr4LEqgNImK","title":"Optimising Web Performance for Low-Powered Devices","resourceId":"v6b2cw5kovr4LEqgNImK"}]}}