Margins around a background image

Question

Hi All, Anyone tell me where Im going wrong? dont want any white margins around my image.....hat do i need to add?

thanks

<!DOCTYPE html>
<html>
    <title>Obi & El Media Agency</title>
    <link rel="stylesheet" href="New.css">
    <body>
        <div class="main_container">
<!--            <h1 class="main_title">Obi & El</h1>-->

        </div>


    </body>

</html>

```CSS
html{
    height: 100%;
    height: 100vh;

}
.main_container {
    background: url(Brackets_Images/typewriter.jpg)no-repeat;
    background-size: cover;
/*    border: 4px solid red;*/
    height: 100vh; 
    max-width: 50%;
    margin: 0;
    background-position:  50% 50%;

}

Answer 1 · 2018-06-04T21:33:51Z

June 4, 2018 9:33pm

Your container with the background is inside the body, and the body has margins by default. You can explicitly remove them in the CSS:

body { margin: 0; }

Also, the HTML code seems to be missing the starting and ending head tags.

Answer 2 · 2018-06-04T21:35:29Z

June 4, 2018 9:35pm

You should reset your default browser margin to 0.

*{ margin:0; }

Answer 3 · 2018-06-05T05:36:42Z

June 5, 2018 5:36am

I like to universally remove margins and padding to not have as many issues with positioning.

{ Margin: 0 auto; Padding: 0; Box-sizing: border-box; }

But doing so to the body instead should help too I believe, if you’d rather not use the universal approach.

Welcome to the Treehouse Community

Looking to learn something new?

stephanie harrison roberts

stephanie harrison roberts

Margins around a background image

3 Answers

Steven Parker

Steven Parker

stephanie harrison roberts

stephanie harrison roberts

Moinul Haq

Moinul Haq

stephanie harrison roberts

stephanie harrison roberts

mryoung

mryoung

Steven Parker

Steven Parker