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

Question

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

score 0 · Answer 1 · answered Nov 05 '21 at 08:09

0

I used position: absolute and it worked well.

There is an example

answered Nov 05 '21 at 08:09

Mike Le

96
3

This does work for the code given, but consider if there is another section following it will overwrite section 2 if section 2 has absolute positionng. – A Haworth Nov 05 '21 at 08:45
thanks for your comment, in that case, I think using a negative margin is the best solution. – Mike Le Nov 05 '21 at 12:31

score 0 · Answer 2 · answered Nov 05 '21 at 08:37

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;
}

score 0 · Answer 3 · answered Nov 05 '21 at 08:47

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>

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

3 Answers3