html - How to avoid background image stretched horizontally with CSS? -


i creating login form image background. here screenshot :

enter image description here

it looks on normal screen. when try open on 27" imac monitor, form looks terrible.

here screenshot imac monitor : enter image description here

here css far :

body.woocommerce-account #main-content {   background-image: url('path/to/login-background-min.png');     background-repeat: no-repeat;     background-size:  100% 100%;     padding-top: 20px;     min-height: 800px; } 

how avoid image stretched? or maybe way make respect resolution?

thanks.

if remove background-size: 100% 100%; not stretch anymore.

to ensure entire surface area covered should use this.

background-size: cover; 

this maybe result in piece of picture not displayed. if want entire picture , don't mind white space on left , right of picture should use this:

background-size: contain; 

if want can use stay centered.

background-position: center; 

Comments

Popular posts from this blog

wordpress - (T_ENDFOREACH) php error -

Export Excel workseet into txt file using vba - (text and numbers with formulas) -

Using django-mptt to get only the categories that have items -