Time for action – creating a fullscreen background image

Perform the following steps to create a page with a fullscreen background image:

1. We'll get started by creating a basic HTML document and the associated files and folders just like we created in Chapter 1, Designer, Meet jQuery. Inside the HTML document, we'll add just a few lines of text, as shown in the following code:

   <div class="content">
     <h1>Seychelles</h1>
     <p>Seychelles, officially the Republic of Seychelles, is a 155-island country (as per the Constitution) spanning an archipelago in the Indian Ocean, whose capital, Victoria, lies some 1,500 kilometres (932 mi) east of mainland Southeast Africa, northeast of the island of Madagascar.</p>
   </div>

2. Next, we'll add a few styles for this text. To make sure it's readable over the photo background, let's add a transparent black background to the div element with a class selector of content, as shown in the following code:

   .content {
     background: black...