Removing the white margin around my image

Question

So i'm trying to put an image at the top of my page, i want this image to cover the whole screen from left to right and be exactly at the top, but every time i do it there is an annoying white border at the left of the image, at the right and at the top. How can i remove that white border? Here is what i tried:

Html:

    <head>
        <div>
            <img class="image" src="#image">
        </div>
    </head>

CSS:

  .image {
  width: 100%;
  height: auto;
}

@ZohirSalakCeNa because i'll have to add a Title and a box over the image later — Gerard22, May 02 '18 at 13:58
Your Markup must go in the body, the head tag is only for linking ressources etc... — Zohini, May 02 '18 at 14:00

Zohini · Accepted Answer · 2018-10-05T15:24:53.757

2

Try this, And put your div in the <body>

* {
  margin: 0;
  padding: 0;
}

.image {
  width: 100%;
  height: auto;
}

<body>
  <div>
    <img class="image" src="G:\Pics\1.jpg">
  </div>
</body>

edited Oct 05 '18 at 15:24

answered May 02 '18 at 13:59

Zohini

6,236
3
10
27

It works perfectly now, thanks!! – Gerard22 May 02 '18 at 14:00

Removing the white margin around my image

1 Answers1