CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Hendra Setiawan
Hendra Setiawan

Reputation: 42

How to avoid background image stretched horizontally with CSS?

I am creating a login form with an image as a background. Here is the screenshot :

enter image description here

It looks good on the normal screen. But when I try to open it on 27" iMac monitor, the form looks terrible.

Here is the screenshot from iMac monitor : enter image description here

Here is my CSS so 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 to avoid the image stretched? or maybe is it any way to make it respect the resolution?

Thanks.

Upvotes: 0

Views: 1929

Answers (1)

Tristan
Tristan

Reputation: 2088

If you remove background-size: 100% 100%; it will not stretch anymore.

To ensure the entire surface area is covered you should use this.

background-size: cover;

This will maybe result in a piece of the picture will not be displayed. If you want the entire picture and don't mind some white space on the left and right of the picture you should use this:

background-size: contain;

If you want you can use this so it will always stay centered.

background-position: center;

Upvotes: 3

Related Questions