Adding a new attribute to style

Question

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">
 <?php
 $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!!

Answer 1

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.

Answer 2

just changing the code to

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

That worked