+ Start a Discussion
SarisfdcSarisfdc 

Resize background image, do not crop

Hi,

I am showing a image on VF page and then putting some text on the image.
I want if user upload small image then image get stretched into the defined width and height, without croping.
if large image is uploaded then it shrink and set as the defined width and height. 

My images are getting cropped.
Below is my css.
<div class=" darken " style="
                 background-image: URL(image url);
                 background-repeat: no-repeat !important; 
                 background-position: top Center!important;
                 background-size: 640px 240px, auto !important;
                 position:absolute !important
                 position: absolute;
                 width: 100%;
                 overflow: hidden;
                ">
                
                                TEXT ON IMAGE
                </div>



 
Best Answer chosen by Sarisfdc
Emmanuel Cruz BEmmanuel Cruz B
Hi,

If you are looking to stretch the image to defined size dynamically, what you need to do is set background-size: 100% 100%, this will deform also your image if the defined size does not respect the image size. Let say that your image size is 320px x 170px and your div size is 400px x 400px, your image will resize to 400px being deformed. here is the code:
<div class=" darken " style="
                 background-image: URL(image url);
                 background-repeat: no-repeat !important; 
                 background-position: center center !important;
                 background-size: 100% 100% !important;
                 position: absolute !important;
                 width: 100%;
                 overflow: hidden;">
    TEXT ON IMAGE
</div>
In the other hand, if you need to scale the image to be as large as possible so that the background area is completely covered, here is the code (This will crop the image):
<div class=" darken " style="
                 background-image: URL(image url);
                 background-repeat: no-repeat !important; 
                 background-position: center center !important;
                 background-size: cover !important;
                 position: absolute !important;
                 width: 100%;
                 overflow: hidden;">
    TEXT ON IMAGE
</div>
But if that's not what your are looking for and you need to scale the image to the largest size such that both its width and its height can fit inside the content area covering the background with its large side (width or height), you may use this code:
<div class=" darken " style="
                 background-image: URL(image url);
                 background-repeat: no-repeat !important; 
                 background-position: center center !important;
                 background-size: contain !important;
                 position: absolute !important;
                 width: 100%;
                 overflow: hidden;">
    TEXT ON IMAGE
</div>
Hope this helps you
Regards!!