There is a class:

.fold { position: absolute; top: 0; bottom: 0; left: 0; right: -193px; background: url(/images/fold.png) no-repeat right 700px; }

so everything works, but for some reason in the version below the picture is not displayed

 .fold { position: absolute; top: 0; bottom: 0; left: 0; right: -193px; background-image: url('/images/fold.png'); background-repeat: no-repeat; background-position: right; background-size: 700px; }

Please tell me what the problem is?

  • Most likely the fact is that in the second version, the address of the picture is in your apostrophes, remove them, and everything should work. Also, you should make sure that the picture is not displayed, maybe she just left. - Evgeny Ivanov
  • Tried with and without apostrophes - there is no difference, but if you remove the background-repeat, the picture is displayed - mufdvr
  • So she or flies in any direction, or small size, try to remove the positioning. - Evgeny Ivanov
  • @ user296741 need can background-image: url('../images/fold.png'); ? - Antonio112009

1 answer 1

Interpretation error in

 background: url(/images/fold.png) no-repeat right 700px;

Namely, in the right 700px , this is one background-position property that the browser rewrites in background-position-y: 700px (and not background-size ). You can see this for yourself by going to the Computed tab from DevTools.

  • Thank you very much!!! - mufdvr