Fullscreen Background With Css

Often when coding an article or a page you need a fullscreen image in top with text over it. It`s sort of the basic magazine way of doing things and it also looks good. So, let`s cut the crap! This is your html.

The Markup:

<section class="fullscreen">
    <h1>Call to action!<h1>
<section>

It`s up to you to decide if your are using a div or section. The important part here is the classname. Note that you are free to play around with the height property. In this case I used a minimum-height of 50 view-height (50% of the window height).

The CSS:

.fullscreen {
   position: relative;
   min-height:50vh;
   background: url(img/fullscreenbg.jpg) no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover; background-size: cover;
}

h1{
   font-size: 40px;
   font-weight: bold;
   text-transform: uppercase;
}

So, that`s pretty much it! If you are new to html and css you can put this in one file like this:

<html>
<body>

<style>
.fullscreen { 
   position: relative;
   min-height: 50vh;
   background: url(img/fullscreenbg.jpg) no-repeat center center fixed; 
   -webkit-background-size: cover; 
   -moz-background-size: cover; 
   -o-background-size: cover; background-size: cover; 
}

h1{
   font-size: 40px;
   font-weight: bold;
   text-transform: uppercase;
}
</style>

<section class="fullscreen">
    <h1>Call to action!<h1>
<section>

</body>
</html>

For more documentation see:
https://www.w3schools.com/howto/howto_css_full_page.asp
https://css-tricks.com/perfect-full-page-background-image/

Fullscreen Background With Css

The Markup:

The CSS:

Other posts:

Hide Folders and Files With Robots.txt

Adding Meta Tags to Next.js With Headless WordPress.