How to initialize the starting point of a background image in css?

Question

I want to add a background image to my web page. The image that I want to use has around 20% transparent padding on all four sides. What attribute should I use so that the background image has an edge-to-edge fit (avoiding the transparent part)?

body{
    background-image: url("bg.png");
    background-size: 90%;
    background-repeat: no-repeat;
}

Try using `background-position: center; background-size: 125%;` — Harun Yilmaz, Feb 16 '20 at 14:38
Sounds a bit hacky what you are trying to do. Maybe it is better solution to edit image and get rid of that transparent padding in Photoshop? Then your problem solved without extra lines of code. — Edvards Niedre, Feb 16 '20 at 16:51

score 1 · Answer 1 · answered Feb 16 '20 at 15:19

You can change background image size, and fix them to center:

body{
    background-image: url( "bg.png" );
    background-size: 60% 60%; /* 100% - 40% (top/left + bottom/right paddings) */
    background-position: center;
    background-repeat: no-repeat;
}

Miaplacidus · Answer 2 · 2020-02-16T15:43:22.623

For something like this, I prefer to add a container element to the page and avoid using body for background images when I need to exercise finite control over display and positioning. This would be my solution:

JSFiddle

Markup

<body>
  <div class="container">
    <div class="media"></div>
  </div>
</body>

SCSS

body {
  padding: 0;
  margin: 0;
}
.container {
  position: absolute;
  width: 100%;
  height: 100%;
  .media {
    width: 100%;
    height: 100%;
    transform: scale(1.4);
    background: {
      image: url("https://i.ytimg.com/vi/cYNlJYQI3Uw/maxresdefault.jpg");
      position: center center;
      size: cover;
      repeat: no-repeat;
    }
  }
}

Notice that I use a CSS reset to remove automatic margin/padding on the body element, and that I allow body to fill the entire viewport.

The container class fills the body element with width and height set to 100%. I use the CSS background-size property to cover the container, then I use the transform property to scale container.

There are many ways to achieve this effect. Alternately, using a background-image property on the body tag will allow me to use background-size to scale the image to obfuscate the image's transparent padding as you described, but it is more difficult to center the image within the container.

How to initialize the starting point of a background image in css?

2 Answers2