0

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.

Hendra Setiawan
  • 42
  • 10
  • Possible duplicate of [Stretch and scale a CSS image in the background - with CSS only](http://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-with-css-only) – Tirthraj Barot Jun 11 '16 at 09:30

1 Answers1

3

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;
Tristan
  • 2,000
  • 17
  • 32
  • You should also use `background-size: cover` along with centering to ensure that the entire surface area is _covered_. – Ryan Wheale Jun 11 '16 at 08:56
  • Thanks for your help. It almost perfect, but the image looks cropped at the bottom. Here is what it looks like now http://imgur.com/VLV6ICB – Hendra Setiawan Jun 11 '16 at 09:14
  • Try to use `background-size: contain;` instead of `background-size: cover;` – Tristan Jun 11 '16 at 09:25
  • @HendraSetiawan - When using `cover`, the background image will be _expanded_ (proportionally) in order to cover all of the background space for the DIV - the side effect being that some clipping may occur. When using `contain`, the background will be _shrunk_ (proportionally) until the full image is visible within the background space of the DIV - the side effect being that there might be some white space on the top or sides. These problems go away if your DIV and background image are the same proportions. – Ryan Wheale Jun 13 '16 at 16:01