I have a slider and it works by loading in a background image. I need to resize this image so it fits to all screens i know what line of code i need to put in just dotn quite know how to go about it. I need to add

background-size: 100% 100%;

to the $style variable, how would i go about doing this.

I tried

$style = "background-size: 100% 100%;, background:url('". Mage::getBaseUrl('media') . $s['image'] . "') 50% 0 no-repeat;";

But that loaded the background size but not the back ground.

<ul class="slides">
            $slides = $this->getSlides();
            foreach($slides as $s) {
                $style = $content = '';
                $attr = 'data-img-height="0"';
                if ( !empty($s['image']) ) {
                    $imgSize = getimagesize(Mage::getBaseDir('media') .'/'. $s['image']);
                    if ($imgSize) {
                        $style = "background:url('". Mage::getBaseUrl('media') . $s['image'] . "') 50% 0 no-repeat;";
                        $attr = 'data-img-height="'.$imgSize[1].'"';

Thanks for any help!!


You will need to resize the image with the Magento function. You can't resize on the fly if it's a background image, plus it adds overhead.

If you are doing this for different viewports, you will need to add more logic and have different sizes loaded for each.


just changing the code to

$style = "background:url('". Mage::getBaseUrl('media') . $s['image'] . "') 50% 0 no-repeat; background-size: 100% 100%;";

That worked

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.