如何使我的图像背景以任何尺寸响应

Question

Hello guys can anyone help me with this, When I tried viewing my design on a smaller screen the image background is not look alike on the big screen can anyone help me how to achieve it? the first image is the background I've been using.

 .container-flex.lgn-customize { position: relative; width: 100%; background-color: #fff; min-height: 100vh; overflow: hidden; /* background-image: url(/materials/media/icons/login-icon/login_bg.png); */ background-position: bottom center; background-repeat: no-repeat; background-size: cover; }.nk.container-flex { width: 100%; max-width: initial; margin-left: auto; margin-right: auto; }.container-flex.lgn-customize::before { content: ""; position: absolute; height: 100%; width: 100%; top: 49%; transform: translate(100%, -50%); right: 0%; transform: translateY(-50%); background-image: url(/materials/media/icons/login-icon/test222111.png); /* background-position: bottom center; */ background-repeat: no-repeat; background-size: cover; /* transition: 1s ease-in-out; */ /* border-radius: 50%; */ z-index: 6; }

 <div class="container-flex lgn-customize"> </div>

Answer 1

Try setting the background-size property to contain. It tells the browser that the background image scales trying to fit the content area, without loosing its aspect ratio.

 <style>.container-flex.lgn-customize { position: relative; width: 100%; background-color: #fff; min-height: 100vh; overflow: hidden; background-image: url('https://images.unsplash.com/photo-1604085572504-a392ddf0d86a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8b3JhbmdlJTIwZmxvd2VyfGVufDB8fDB8fA%3D%3D&w=1000&q=80'); background-position: bottom center; background-repeat: no-repeat; background-size:contain; }.nk.container-flex { width: 100%; max-width: initial; margin-left: auto; margin-right: auto; }.container-flex.lgn-customize::before { content: ""; position: absolute; height: 100%; width: 100%; top: 49%; transform: translate(100%, -50%); right: 0%; transform: translateY(-50%); background-image: url(/materials/media/icons/login-icon/test222111.png); /* background-position: bottom center; */ background-repeat: no-repeat; background-size: cover; /* transition: 1s ease-in-out; */ /* border-radius: 50%; */ z-index: 6; } </style> <div class="container-flex lgn-customize"> </div>