I am currently working on a programming project called Broadway through Codeacademy. I have been given the task of adding a background image to the webpage. It seems like an easy task to accomplish. The simplest way to achieve this effect is by using the following code snippet:
background: url() no-repeat center center scroll; background-size: cover
The CSS3 property known as background-size has proven to be extremely helpful.
However, I am currently exploring alternative methods to achieve this in CSS without relying on the background and background-size properties.
My goal is to incorporate the above-mentioned image into the provided HTML structure.
<div class="jumbotron">
<div class="container">
<div class="main">
<h1>We are Broadway</h1>
</div>
</div>
</div>
The issue I am facing is that when I insert the image into any div element, it disrupts the layout of other elements (which is understandable). My objective is to make the image fit behind the text "We Are Broadway". In short, where should I place the img element to achieve this, and what changes would need to be made in my stylesheet?
Below is a preview of how the website should appear: