Question 261857 in Html Question posted in
Some basic documentation can be found here.

Html – How to remove border from header background

Today I tried to make a scroll web-site and at the first load I tried to make visible a header without nothing but with a css background. The background is responsive but I don’t know why it doesn’t cover all the screen and it has border or margin or padding, I don’t know.

This is the simple html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <link rel="stylesheet" href="css/styleIndex.css">
</head>
<body>
<header id="logoSection">
</header>
<main>

</main>
</body>
</html>

This is the simple css:

header{
    margin: 0; //useless
    background-image: url("../asset/logoMovie.gif");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-width: 100vw;
    min-height: 100vh;
}

This is the result:
enter image description here

I need a suggestion. Thx.

Like I described before I tried to make it full screen in the first part of the page, after the reader there will be other section, but the first it must be full screen.

Tags:

2

Answers


  1. 0

    It’s not a border what you see.

    It’s default 8px margin of body element.

    You can fix this issue by a simple reset.

    html, body {
  margin: 0;
  padding: 0;
}

    I also suggest you to look for box-sizing: border-box property. It will definitely help you for this kind of tasks.

    Login or Signup to reply.
  2. 0

    It could happen because of the preset browser style, that means that all browsers have some default styles that they apply for all web aplications.
    You can solve this problem applying a reset css to your html. Get it here:
    [https://meyerweb.com/eric/tools/css/reset/][CSS Tools: Reset CSS]

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search