{"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":15943,"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":"626640f71195627fe9f1b30d","content":{"languages":["javascript","typescript"],"difficulty":4},"tags":["","javascript","frontend","problem solving","leetcode","advanced js","advanced frontend","frontend fundamentals","frontend masters","egghead","devtools tech","codedamn","youtube","interview question"],"slug":"create-a-dictionary-of-dates-or-frontend-interview-questions-or-problem-solving-practice---qid---Vp3l0UdgJIxFtSyF8nBh","title":"Create a Dictionary of Dates | Frontend Interview Questions | Problem Solving Practice","questionId":"Vp3l0UdgJIxFtSyF8nBh"},{"_id":"62dfadbc77f9961d5b7bf558","content":{"languages":["react","html"],"difficulty":1},"tags":["javascript","ui based","machine coding","coding challenge","frontend practice","css","styling","devtools tech","dictionary","frontend masters","frontend challenge","devkode","codedamn","egghead"],"slug":"build-a-dictionary-app-or-react-js-or-frontend-coding-challenge---qid---rnrC8DZ3wOanc86iJ5hK","title":"Build A Dictionary App | React.js | Frontend Coding Challenge","questionId":"rnrC8DZ3wOanc86iJ5hK"},{"_id":"69568ab8304108b3b5cade69","content":{"languages":["react"],"difficulty":2},"tags":["javascript","ui","ux","devtools tech","coding","frontend coding challenge","tutorial"],"slug":"grid-toggle---qid---nkzq3JC5eXzmCDAzD2nz","title":"Grid Toggle","questionId":"nkzq3JC5eXzmCDAzD2nz"},{"_id":"694e30c490e8879697315d53","content":{"languages":["react","html"],"difficulty":1},"tags":["javascript","ui","ux","devtools tech","frontend interview coding challenge","frontend question","ui component","animation"],"slug":"interactive-voting-poll-component---qid---Dq50V3IUh3JsFhmxU4SL","title":"Interactive Voting Poll Component","questionId":"Dq50V3IUh3JsFhmxU4SL"},{"_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"}],"resources":[{"_id":"69036a803177c39e85554ace","content":{"difficulty":1,"domain":2,"type":1,"isInternal":true,"languages":[]},"tags":["javascript","frontend","ui","ux","uber","senior frontend engineer"],"slug":"uber-senior-frontend-interview-experience---rid---HhAZPA5jvh67sTfzr8cw","title":"Uber Senior Frontend Interview Experience","resourceId":"HhAZPA5jvh67sTfzr8cw"},{"_id":"5f1dd7cbcbec5f7ffc0c2fae","content":{"difficulty":2,"domain":1,"type":1,"isInternal":true},"tags":["node.js","javascript","frontend","frontend fundamentals","js fundamentals","interview questions","backend","backend fundamentals","webpack","inside webpack","advanced webpack","webpack defineplugin","define plugin"],"slug":"optimizing-your-javascript-bundle-or-defineplugin-webpack---rid---kvP5tP0G6isd86ALJUeh","title":"Optimizing your JavaScript Bundle | DefinePlugin Webpack","resourceId":"kvP5tP0G6isd86ALJUeh"},{"_id":"5f59c5186d3cda64e470c3f0","content":{"difficulty":4,"domain":2,"type":2},"tags":["javascript","hoisting","interview","js fundamentals","frontend fundamentals"],"slug":"hoisting-in-javascript-or-frontend-fundamentals-series-or-puneet-ahuja-or-devtools-tech---rid---qUz88zTLcYdK6bMPOmes","title":"Hoisting in Javascript | Frontend Fundamentals Series | Puneet Ahuja | Devtools tech","resourceId":"qUz88zTLcYdK6bMPOmes"},{"_id":"5f202c81cbec5f7ffc0c2fba","content":{"difficulty":1,"domain":2,"type":1},"tags":["Web Development"],"slug":"script-tag-—-defer-and-async---rid---NCXH57kUsnTM2Ev2tzEU","title":"Script Tag — Defer and Async","resourceId":"NCXH57kUsnTM2Ev2tzEU"},{"_id":"69824d07895fc3bf013b40e2","content":{"difficulty":4,"domain":1,"type":1,"isInternal":true,"languages":[]},"tags":["javascript","ui","ux","blog","best practices","code","devtools tech","article"],"slug":"best-code-practices-for-real-world-applications-part-1---rid---8ohjaCmxsxK093sIQad6","title":"Best Code Practices for Real-World Applications - Part 1","resourceId":"8ohjaCmxsxK093sIQad6"}]}}