CODEWITHSUNDEEP
htmlcsscoordinatesbackground-imagebackground-position
Sandro
Sandro

Reputation: 35

Is there a way to position background image center to exact coordinates?

I have a background image in body, svg ordinary circle.

At background-position: 0%, 0% this circle appears on the top left corner of the page. But I want this circle's center to be exactly at 0,0 (top left corner) and stay there, no matter the device width.

I can manually center it with negative percentages or pixels or em/rem but it doesn't stay there when I change browser width.

Can anyone help?

Here's the link from codepen.io: https://codepen.io/sandro-bochorishvili/pen/KKMjezN

Actual Code: css

body {
  overflow-y: scroll;
  height: 100vh;
  background-color:  hsl(185, 75%, 39%);
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(https://svgshare.com/i/Rfg.svg),
                    url(https://svgshare.com/i/RgK.svg);
  background-position: -20rem -34rem, 72em 15em;

  background-repeat: no-repeat, no-repeat;
  padding: 0 2em 0 2em;
}

Upvotes: 1

Views: 176

Answers (1)

Nadia Chibrikova
Nadia Chibrikova

Reputation: 5036

To combine relative and absolute dimensions you can use calc, in your case it'll be background-position: -20rem -34rem, calc(100% + 20rem) calc(100% + 34rem);

body {
  overflow-y: scroll;
  height: 100vh;
  background-color:  hsl(185, 75%, 39%);
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(https://svgshare.com/i/Rfg.svg),
    url(https://svgshare.com/i/RgK.svg);
 background-position: -20rem -34rem, calc(100% + 20rem) calc(100% + 34rem);

  background-repeat: no-repeat, no-repeat;
  padding: 0 2em 0 2em;
}

Upvotes: 1

Related Questions