Scalable and hideable website background

Question

css

Good afternoon!
Such a problem:
you need to position the image on the site in such a way that it is located in the center of the right side (there is an empty field on the site)
so that at high resolution it is 700px high, at lower resolutions it is hidden, and on mobile devices it is hidden altogether.
what i tried is wrong

first option

body {background-image: url(http://prosto2.ru/1.jpg); background-position: center right; background-repeat:no-repeat; background:size: 123px auto; background-attachment: fixed; }

then I tried to set the min-height / max-height to the picture, but only an almost correct position occurs, i.e. thus it is not located in the center of the vertical and on the right edge of the horizontal

second option

#bgimg { height:80% position:fixed; right: 1px; }

Answer 1

The task is of course clear only in general terms. Insert a fixed block in the upper right corner, make it background-size: contain and resize the block with styles depending on the size of the viewport.

Answer 2

You can also try using CSS3 Media Queries. Here's a great article on using them: Responsive and Mobile Design with CSS3 Media Queries

Answer 3

if you do not take into account the slider-stripes at the top, then I would choose neither the first nor the second, and the third - owl carousel. lately I prefer to use it.
and so - until the issue is resolved (

Answer 4

kenwheeler.github.io/slick