Search for a command to run...
Full Stack Developer | Freelancer | JavaScript | React | Nodejs.
Loves sharing knowledge through technical articles.
Dev.to: https://dev.to/myogeshchavan97
https://linktr.ee/myogeshchavan97
Thank you Andrew Baisden
In this tutorial, you will build a Task Management App using Next.js 16 and Prisma 7 from scratch. By creating this app, you will learn: How to set up Prisma 7 with the new Rust-free architecture How to configure a database with Prisma's driver ada...
If you're a React/Next.js developer who diligently updated your packages last week after the critical React2Shell vulnerability (CVE-2025-55182), I have some frustrating news: you need to update again. Security researchers, while probing the patches ...
Is your React app dragging its feet, but you can’t pinpoint the cause? You might think you’re following the best practices, but some common development patterns are actually degrading your app’s performance behind the scenes. In this article, we’ll u...
How to Use Separate SSH Keys for Company and Personal GitHub Accounts Managing multiple GitHub accounts is a common challenge for developers who juggle both personal and professional projects. It becomes even more complex when you want to use differe...
Have you ever built a React app only to realize that users from different countries can't use it effectively because it only supports English? In this tutorial, you'll learn how to build truly global React application using internationalization (i18n...
You might have seen on many websites, that the initial visible section of the page is completely filled up with background image, and text is displayed on that image to create some cool effect.
In this article, we will see how to achieve that effect.
Take a look at the below CodePen:
Here's a preview of the above CodePen in full-screen mode.
To display the background image to fill up the entire width and height of visible scren, we've used the below CSS:
.header {
width: 100%;
height: 100vh;
background: url("https://cdn.pixabay.com/photo/2016/04/01/12/16/car-1300629__340.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: relative;
}
Here, we've specified a height of 100vh(viewport height) which is visible are on the screen.
The image looks amazing but let's add some text on the top of the image.
Take a look at the below CodePen:
Here's a preview of the above CodePen in full-screen mode.
Below is the code for the above CodePen:
// HTML Code
<div class="header">
<div class="header-text">Porsche Sports Car</div>
</div>
// CSS Code
.header {
width: 100%;
height: 100vh;
background: url("https://cdn.pixabay.com/photo/2016/04/01/12/16/car-1300629__340.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: relative;
}
.header-text {
font-size: 200%;
color: #fff;
letter-spacing: 1px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Here we've added the text exactly at the center of the image. But as the image is bright, the text is not clearly visible so it's common practice to make the image a bit darker to create a beautiful effect.
Take a look at the below CodePen:
Here's a preview of the above CodePen in full-screen mode.
Below is the code for the above CodePen:
.header {
width: 100%;
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url("https://cdn.pixabay.com/photo/2016/04/01/12/16/car-1300629__340.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: relative;
}
To make the image darker, we're using a linear-gradient to make it 40% transparency so the text is clearly visible.
In the above CodePen, we've made the entire image darker but it's also common practice to make the image darker at only the top or bottom side of the image and display the text at that position.
Take a look at the below CodePen:
Here's a preview of the above CodePen in full-screen mode.
Below is the code for the above CodePen:
.header {
width: 100%;
height: 100vh;
background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)),
url("https://cdn.pixabay.com/photo/2016/04/01/12/16/car-1300629__340.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: relative;
}
.header-text {
font-size: 200%;
color: #fff;
letter-spacing: 1px;
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%, -50%);
}
Here we've made the image bit darker at the top side of the image.
Take a look at the below CodePen:
Here's a preview of the above CodePen in full-screen mode.
Below is the code for the above CodePen:
.header {
width: 100%;
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url("https://cdn.pixabay.com/photo/2016/04/01/12/16/car-1300629__340.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
margin: auto;
position: relative;
}
.header-text {
text-align: center;
font-size: 200%;
color: #fff;
letter-spacing: 1px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h1 {
font-size: 120%;
font-weight: 100;
}
.btn:link,
.btn:visited {
font-size: 90%;
font-weight: 100;
display: inline-block;
margin-top: 15px;
text-transform: uppercase;
background: #ca9e57;
text-decoration: none;
color: #fff;
border: 1px solid #ccc;
border-radius: 10px;
padding: 10px;
transition: text-shadow 0.3s;
}
.btn:hover {
text-shadow: 0 0 2px #000;
}
Want to learn all ES6+ features in detail including let and const, promises, various promise methods, array and object destructuring, arrow functions, async/await, import and export and a whole lot more from scratch?
Check out my Mastering Modern JavaScript book. This book covers all the pre-requisites for learning React and helps you to become better at JavaScript and React.
Check out free preview contents of the book here.
Also, you can check out my free Introduction to React Router course to learn React Router from scratch.
Want to stay up to date with regular content regarding JavaScript, React, Node.js? Follow me on LinkedIn.
