{"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":16637,"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":"65ba01a6228b2c1c0f3ab531","content":{"languages":["javascript","typescript"],"difficulty":1},"tags":["javascript","array","code","programming","devtools tech","dsa","easy interview question","problem solving"],"slug":"implement-a-function-that-returns-the-number-of-parameters-expected-by-a-function-in-javascript---qid---AjZai8Do8AMdCq0UHH88","title":"Implement a function that returns the number of parameters expected by a function in JavaScript","questionId":"AjZai8Do8AMdCq0UHH88"},{"_id":"5f6c9dd26d3cda64e470c3f8","content":{"difficulty":1,"languages":"javascript"},"tags":["javascript","new operator","js fundamentals","nodejs"],"slug":"what-would-be-the-output-new-operator-or-explicit-primitive-return---qid---mGk0SsTTqHmfwxtNaIK1","title":"What would be the output? [New Operator | Explicit Primitive Return]","questionId":"mGk0SsTTqHmfwxtNaIK1"},{"_id":"6058cbbbdd90b43b9e8dee08","content":{"difficulty":4,"languages":"javascript"},"tags":["javascript","hoisting","interview","js fundamentals","frontend fundamentals","scoping"],"slug":"what-would-be-the-output-of-the-following-code-scoping-in-javascript---qid---sE7fxd7MMAoOO0t9yXwD","title":"What would be the output of the following code? [Scoping in JavaScript]","questionId":"sE7fxd7MMAoOO0t9yXwD"},{"_id":"658477003e4c0459a450305f","content":{"languages":["javascript","typescript"],"difficulty":1},"tags":["javascript","frontend","razorpay","interview question","pipe","high order functions","problem solving","closures","ui","ux","devtools tech","tutorials","array","objects","functions"],"slug":"how-to-implement-pipe-utility-or-razorpay-interview-question-or-javascript---qid---Dm2i9tr8y3ILsg4Bzn0u","title":"How to implement pipe utility? | Razorpay Interview Question | JavaScript","questionId":"Dm2i9tr8y3ILsg4Bzn0u"},{"_id":"697b2869132ce4e954d59c82","content":{"languages":["javascript","typescript"],"difficulty":1},"tags":["javascript","ui","ux.rippling frontend interview","devtools tech","tutorial","coding","programming challenge"],"slug":"find-employee---qid---Pzyp6NffTFqSDZsVH0k0","title":"Find Employee","questionId":"Pzyp6NffTFqSDZsVH0k0"}],"resources":[{"_id":"6339359342e7761bfac16e89","content":{"difficulty":1,"domain":2,"type":2,"isInternal":false},"tags":["javascript","requestly","frontend","devtools tech","coding","mock server","mock api","headers","redirect","api"],"slug":"how-to-supercharge-your-development-workflow-or-reviewing-requestlyio-or-improving-frontend-dx---rid---vgQNMcZkgncuDninBiYf","title":"How to Supercharge Your Development Workflow!? | Reviewing Requestly.io | Improving Frontend DX","resourceId":"vgQNMcZkgncuDninBiYf"},{"_id":"5f202d38cbec5f7ffc0c2fbc","content":{"difficulty":1,"domain":2,"type":2},"tags":["Slice"," Splice"," Javascript ","Interview Questions "],"slug":"slice-and-splice-oror-javascript-interview-questions-oror-puneet-ahuja---rid---vJoGsYEHYTzhQDdvQJ4O","title":"Slice and Splice || Javascript Interview Questions || Puneet Ahuja","resourceId":"vJoGsYEHYTzhQDdvQJ4O"},{"_id":"6a12e5104b3e6d922c54a0cf","content":{"difficulty":1,"domain":1,"type":1,"isInternal":true,"languages":[]},"tags":["javascript","ui","ux","devtools tech","coding","frontend"," web performance"],"slug":"reducing-image-bytes---rid---eoeW8SDZdwwNWBtFqfOh","title":"Reducing Image Bytes","resourceId":"eoeW8SDZdwwNWBtFqfOh"},{"_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":"69831e01895fc3bf013c2a19","content":{"difficulty":4,"domain":2,"type":1,"isInternal":true,"languages":[]},"tags":["javascript","ui","ux","devtools tech","coding","frontend interview","coding rounds","tutorial","frontend interview experience"],"slug":"microsoft-frontend-interview-experience---rid---XTc4tJoPszAFovxvJjRX","title":"Microsoft Frontend Interview Experience","resourceId":"XTc4tJoPszAFovxvJjRX"}]}}