0

EDIT: This is not a duplicate, this question is asking about centering not positioning from the right.

Is there a way to set the start position of a background image to be 50% across it's container using CSS only?

background-position: 50% center;

This does not work as it positions the background image to be center and not starting at 50%.

background-position: 50vw center;

This does not work as it's based upon the viewport and not container.

Also note I cannot offset the div itself as I need that to be in it's current postion.

panthro
  • 22,779
  • 66
  • 183
  • 324
  • your answer is probably here: https://stackoverflow.com/a/51734530/8620333 (read until the end because the pseudo element is probably the solution you want) – Temani Afif Oct 12 '20 at 15:19
  • Answer not there. – panthro Oct 12 '20 at 15:21
  • you already read it fully and tried all the code there in only 1min? unless you are superman, you need at least 15min to read it all and probably more than 30min to try the codes and understand them. – Temani Afif Oct 12 '20 at 15:23
  • Read that answer before positing my question. – panthro Oct 12 '20 at 15:23
  • If you can't find your answer in the duplicates, could you add some more detail of exactly what you want? (And how this situation is different from the dup's) – DBS Oct 12 '20 at 15:49

1 Answers1

-1

Yes you can, like this:

.container {
  background-image: url('w3css.gif'); //insert your url ofcourse
  background-repeat: no-repeat;
  background-position: 100% 0%;
  background-size: 50% 100%;
}
Cédric S
  • 479
  • 3
  • 10