html - How to avoid background image stretched horizontally with CSS? -
i creating login form image background. here screenshot :
it looks on normal screen. when try open on 27" imac monitor, form looks terrible.
here screenshot imac monitor :
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
Post a Comment