'how to apply background outside of text

I'm a newbie in html & css. I'm trying to code the output in this image https://i.stack.imgur.com/Qy7Sd.png

The only problem here is that when I add the brick background it also appears on the white portion of the output which I don't want. Here is the code I've written so far:

<!DOCTYPE html>
<html>
    <head>
        <title>Terps Calculators Inc</title>
        <style>
           body{padding: 70px; border-style: ridge; border-width: 20px; border-color: grey;}
           header, nav, main, footer{background-color: rgb(254, 189, 173); border: 4px solid grey;}
            header{font-family: Kunstler Script; font-size: 70px; padding: 30px 237px;}
            nav{font-family: sans-serif; font-size: 19px; text-align: center;}
            a:link{color: red;}
            main{padding: 30px 200px; color: black; font-weight: bold;}
            .intro{ font-weight: bold; text-decoration: underline; font-size: 30px;}
            p{font-size: 18px;}
            .head{font-weight: bold; font-size: 22px; font-family: arial;}
            .text{font-style: italic;}
            .color{text-decoration: underline; color: red; font-size: 25px; font-style: italic;}
            footer{border: none; text-align: center; font-size: 20px; font-weight: bold;}
        </style>
    </head>
    <body>
        <header>
            <img src="Burj Khalifa.jpg" width="100px" height="130px"> Terps Calculators Inc. <img src="University of Maryland.png" width="100px" height="100px">
        </header>
        <br>
        <nav>
            <a href="http://www.umd.edu">http://www.umd.edu,</a> <a href="http://www.cs.umd.edu">http://www.cs.umd.edu,</a> <a href="http://www.testudo.umd.edu">http://www.testudo.umd.edu</a>
        </nav>
        <br>
        <main>
            <div class="intro">Introduction</div>
            <p><span class="head">Terps Calculators Inc.</span><span class="text"> implements and provides these calculators for your use. We keep expanding our collection every day, so make sure you stop by often.</span></p>
            <div class="intro">Calculators</div>
            <br><br>
            <img src="Calculator.png" height="60px" width="50px"> <span class="color">&nbsp;Grades Calculator</span>
            <br>
            <img src="Calculator.png" height="60px" width="50px"><span class="color">&nbsp;Interest Calculator</span>
        </main>
        <br>
        <footer>Terps Calculators Inc.&reg;</footer>
    </body>
</html>
htmlcss


Solution 1:[1]

As Nitlixis said, You must place contents inside a div. entire code:

<html>
    <head>
        <title>Terps Calculators Inc</title>
        <style>
            body{
                background: url(https://s4.uupload.ir/files/722_30hg.jpg) 
            no-repeat; background-size: cover; margin: 100px;
            }
           .body{padding: 70px; border-style: ridge; border-width: 20px; border-color: grey;
            background-color: white;
            }

           header, nav, main, footer{background-color: rgb(254, 189, 173); border: 4px solid grey;}
            header{font-family: Kunstler Script; font-size: 70px; padding: 30px 237px;}
            nav{font-family: sans-serif; font-size: 19px; text-align: center;}
            a:link{color: red;}
            main{padding: 30px 200px; color: black; font-weight: bold;}
            .intro{ font-weight: bold; text-decoration: underline; font-size: 30px;}
            p{font-size: 18px;}
            .head{font-weight: bold; font-size: 22px; font-family: arial;}
            .text{font-style: italic;}
            .color{text-decoration: underline; color: red; font-size: 25px; font-style: italic;}
            footer{border: none; text-align: center; font-size: 20px; font-weight: bold;}
        </style>
    </head>
    <body>
        <div class="body">
        <header>
            <img src="Burj Khalifa.jpg" width="100px" height="130px"> Terps Calculators Inc. 
            <img src="University of Maryland.png" width="100px" height="100px">
        </header>
        <br>
        <nav>
            <a href="http://www.umd.edu">http://www.umd.edu,</a> <a href="http://www.cs.umd.edu">http://www.cs.umd.edu,</a> 
            <a href="http://www.testudo.umd.edu">http://www.testudo.umd.edu</a>
        </nav>
        <br>
        <main>
            <div class="intro">Introduction</div>
            <p><span class="head">Terps Calculators Inc.</span><span class="text">
             implements and provides these calculators for your use. We keep expanding 
             our collection every day, so make sure you stop by often.</span></p>
            <div class="intro">Calculators</div>
            <br><br>
            <img src="Calculator.png" height="60px" width="50px"> <span class="color">&nbsp;Grades Calculator</span>
            <br>
            <img src="Calculator.png" height="60px" width="50px"><span class="color">&nbsp;Interest Calculator</span>
        </main>
        <br>
        <footer>Terps Calculators Inc.&reg;</footer>
        </div>
    </body>
</html>```

enter image description here

Solution 2:[2]

I think it would be better if you wrapped everything in a div like this:

<div class="wrapper">
    <!-- A lot of content here -->
</div>

Put all the content inside of it, set the margin of the div to about 5-10% so there will be a gap for the bricks to show up, and then set the body's "background" to your brick image.

Solution 3:[3]

Seems a newbie code. Create a Parent Wrapper, then Inner Wrapper, Then Different Section inside the wrapper.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 Kartik Jain

Related Questions