how can i use full background image after using margin in css-CodePudding

i am facing a problem with my CSS. how can i use full background image after using margin in CSS? i have already used 2.5% background whole body but when i am going to use the background in my CSS code i am seeing that background also captured by 2.5% margin. i want to remove this margin when i will background and the background will cover the full body. thanks

here is code

html{
    margin: 2.5%;
}
.second-section{
    background: url(resources/img/Header/out-bg.png);
    background-size: cover;
}

click here for Image

CodePudding user response：

I used position: absolute and it worked well.

There is an example

CodePudding user response：

Since you are giving margin for the page, you will always get a space of 2.5%. position:absolute; helps in this case as .second-section wouldn't be subject to the margin you have given.

Please check the code below:

html{
    margin: 2.5%;
}
.second-section{
    position:absolute; <-------- ADD
    background: url(resources/img/Header/out-bg.png);
    background-size: cover;
}

CodePudding user response：

You can also give the same margin but in negative with width: auto to your image container.

html {
  margin: 2.5%;
}
body {
  margin: 0;
}
.section-section{
  background-image: url(https://images.unsplash.com/photo-1627483262268-9c2b5b2834b5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3000&q=80);
  background-size: cover;
  width: auto;
  height: 400px;
  margin: -2.5%;
}

<html>
  <head></head>
  <body>
    <div class="section-section"></div>
  </body>
</html>