CODEWITHSUNDEEP
css
Adam Allen
Adam Allen

Reputation: 208

Re-size background image

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 don't 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 background.

<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].'"';
                    }
                }

Upvotes: 0

Views: 43

Answers (1)

King King
King King

Reputation: 63317

By default the background-size is initial (which is in fact auto). So when using background all the background-related settings before including background-size will be overridden by the default value or by the value set in the background declaration. So you should place the background-size after the background declaration. Or set the background-image, background-position, background-repeat, ... separately in any order you want.

Upvotes: 1

Related Questions