Background Not Rezising

[edwires]

On a desktop it looks fine, when I go mobile the image cuts part of the message:

third banner: “You Can Do Anything”

I’ve tried almost all tricks and still not working.

Plan Business Success - Plan Business Success

[edwires]

@media screen and (max-width: 790px){
.x-section {
background-size: 150% 40% !important;
padding: 10em 0 !important;
}
}

[ruenel]

Hello Edwin,

Thanks for writing in! Please be aware that it is not advisable to put text in an image or as a background. You must separate the image and your texts instead. I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

We use the background-image: cover; which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.

Yes we can use background-size: 100% 100%; which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.

Yes we can also use background-size: 100% auto; but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.

Or we can also use background-size: contain; but then this is not a good choice because you will see white spaces around your image.

Hope this makes sense.

[edwires]

Not really, the example shows the image all strecht out and cut off, only when view in smaller screen looks ok. In my case the image looks good while in a desktop view, but it cuts off when is viewed in a smaller screen.

how can I make the image appear a bit smaller under a small screen?

[ruenel]

Hello Edwin,

Please understand how background images works. That is why I have given you the demo to illustrate and give you a comparison what will happen to the background image. We highly recommend that text MUST be separated from the image. That is the only way you can realize what you have in mind for your design.

Best Regards.