DEV Community

Sh Raj
Sh Raj

Posted on

Creating a Fullscreen div Element with CSS

#webdev #javascript #css #beginners

Summary 

#fullscreen-div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000; /* Set the background color to your preference */
  z-index: 9999; /* Adjust the z-index as needed */
}
Enter fullscreen mode Exit fullscreen mode
  • You can also create full screen video element like youtube embed links...

Creating a Fullscreen div Element with CSS

When building a website or web application, there may be times when you want to display a div element that covers the entire window. This fullscreen div can be useful for embedding videos, creating overlays, or designing immersive experiences. In this article, we'll explore how to achieve this effect using CSS.

To begin, let's start with a basic HTML structure. Open your preferred code editor and create a new HTML file. Inside the body element, add the following code:

<!DOCTYPE html>
<html>
<head>
  <title>Fullscreen div Example</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div id="fullscreen-div"></div>

  <!-- Your content goes here -->
  <h1>Welcome to my website</h1>
  <p>This is some example content.</p>

  <script src="script.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

In the code snippet above, we have a simple HTML structure with a div element that has an id of "fullscreen-div". This is the element we'll be working with to make it fit the entire window. Feel free to replace the "Your content goes here" section with your own content.

Next, let's move on to the CSS. Create a new file in your code editor and save it as styles.css. In this file, we'll define the styles for our fullscreen div element:

#fullscreen-div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000; /* Set the background color to your preference */
  z-index: 9999; /* Adjust the z-index as needed */
}
Enter fullscreen mode Exit fullscreen mode

In the CSS code snippet above, we select the div element with the id of "fullscreen-div" and apply the following styles:

  • position: fixed ensures that the div remains fixed in place, even if the user scrolls the page.
  • top: 0 and left: 0 position the div element at the top left corner of the viewport.
  • width: 100vw and height: 100vh set the width and height of the div to occupy the entire viewport.
  • background-color can be customized to your preferred color. The example uses "#000" for black.
  • z-index: 9999 sets the stacking order of the div element. Adjust this value if you want the div to appear above or below other elements on the page.

Save the styles.css file and return to your HTML file. Link the CSS file by adding the following line within the head section:

<link rel="stylesheet" type="text/css" href="styles.css">
Enter fullscreen mode Exit fullscreen mode

Finally, open your HTML file in a web browser, and you'll see the div element covering the entire window. Any content you add below the div will appear behind it, giving the effect of a fullscreen overlay.

You can now utilize this fullscreen div element to embed videos, create overlays, or apply any custom design you desire. Experiment with different styles, such as gradients, images, or opacity, to achieve the desired visual effect.

In conclusion, creating a fullscreen div element using CSS is a straightforward process. By setting the appropriate CSS properties, such as position, width, height, and background color, you can easily make a div fit the entire window and enhance the visual experience of your website or web application.

Top comments (0)