{"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":18589,"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":"640d964bc809473cf30b0134","content":{"languages":["javascript","typescript"],"difficulty":2},"tags":["javascript","frontend","lodash","ui","ux","code","programming","problem solving","lodash polyfills","set method","object","object property","mutate js objects","property setting","js objects","javascript interview question"],"slug":"how-to-set-value-in-an-object-by-path-or-implement-lodash-set-method-or-javascript-interview-question---qid---Ri7ZHw8NH20KPbTlgNkp","title":"How to set value in an object by path? | Implement Lodash Set Method | JavaScript Interview Question","questionId":"Ri7ZHw8NH20KPbTlgNkp"},{"_id":"636cdeb520622762d08cff03","content":{"languages":["javascript"],"difficulty":1},"tags":["javascript","frontend","coding","devtools tech","interview questions","interview preparation","mcq","programming paradigm","tooling","mdn","js paradigm","programming questions","variables","let","const","var"],"slug":"which-of-the-following-keywords-are-used-to-define-a-variable-in-javascript---qid---WbDSiPnjbvPsb5iKKWJw","title":"Which of the following keywords are used to define a variable in JavaScript?","questionId":"WbDSiPnjbvPsb5iKKWJw"},{"_id":"696e3abc132ce4e954ba40b7","content":{"languages":["javascript","typescript"],"difficulty":2},"tags":["javascript","ui","ux","devtools tech","coding","interview frontend","flipkart interview question"],"slug":"resolve-function-values-in-a-nested-object---qid---Fjc1QXbghtZUOmrgQdUw","title":"Resolve Function Values in a Nested Object","questionId":"Fjc1QXbghtZUOmrgQdUw"},{"_id":"6255a79c3ecc8e41a79f0c6a","content":{"languages":["javascript","typescript"],"difficulty":3},"tags":["javascript","classnames","package","polyfills","devtools","frontend","interview questions"],"slug":"implement-classnames-or-javascript-interview-question---qid---3QbZnesP6zJgC2jdLDjf","title":"Implement classNames() | JavaScript Interview Question","questionId":"3QbZnesP6zJgC2jdLDjf"},{"_id":"696e107a132ce4e954ba21ec","content":{"languages":["react"],"difficulty":2},"tags":["javascript","ui","ux","devtools tech","coding","frontend ui challenge","flipkart question"],"slug":"feedback-review-system---qid---YHERU8PhP4QMDVhMjNUR","title":"Feedback Review System","questionId":"YHERU8PhP4QMDVhMjNUR"}],"resources":[{"_id":"69970bdb58fa65a0ece72546","content":{"difficulty":2,"domain":2,"type":1,"isInternal":true,"languages":[]},"tags":["javascript","ui","ux","devtools tech","coding","frontend","ui","ux"],"slug":"what-is-the-significance-of-the-react-fiber-architecture---rid---2tPtREBBpVUslyJcRGrw","title":"What is the significance of the React Fiber architecture?","resourceId":"2tPtREBBpVUslyJcRGrw"},{"_id":"5f1dd537cbec5f7ffc0c2fa8","content":{"difficulty":2,"domain":3,"type":1,"isInternal":true},"tags":["node.js","mongodb","backend","database","db","tools","performance","mongo queries"],"slug":"speed-up-mongodb-search-queries---rid---1KlpHxujFKhN2HVJ3AQk","title":"Speed up MongoDB Search Queries","resourceId":"1KlpHxujFKhN2HVJ3AQk"},{"_id":"5f1dd74dcbec5f7ffc0c2fac","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-3---rid---6mHfnu0fQoPw4RBpexRV","title":"Build your own expressjs | Part 3","resourceId":"6mHfnu0fQoPw4RBpexRV"},{"_id":"5fc7215a6d3cda64e470c415","content":{"difficulty":4,"domain":1,"type":5},"tags":["linkedin","jobs","skills","career","indemand","devtools"],"slug":"move-close-to-your-dream-job-find-out-top-skills-in-the-market---rid---layhD7GHUKsulhIM25yM","title":"Move close to your dream job. Find out top skills in the market.","resourceId":"layhD7GHUKsulhIM25yM"},{"_id":"5f6994e06d3cda64e470c3f5","content":{"difficulty":2,"domain":2,"type":2,"isInternal":false},"tags":["javascript","reduce","array","polyfill","advanced javascript","interview question"],"slug":"implementation-of-reduce-polyfill-or-devtools-tech---rid---RPwJsAj15EZKfZsMT4V7","title":"Implementation of Reduce Polyfill | Devtools Tech","resourceId":"RPwJsAj15EZKfZsMT4V7"}]}}