Question

I’ve got a load of non local images which I’d like to render as background images for classes with a width of 500px and height of 330px. Although these are specified in the CSS properties for the class, the background: url('http://www.example.com/image.jpg'); does not scale to fit this size, and instead retains it’s original remote height.

Perhaps I’m completely wrong in thinking that remote/local has anything to do with this issue and that the background image by default doesn’t take on the width or height of selector that it’s a property of?

If so is it possible to expand the height and width of the background property to render at the same as the selector it’s part of, much like how changing the attributes of height/width on the <img> tag will affect even remote files?

Here’s the relevant CSS + HTML Markup:

#sub_section_1 {
    width: 100%; height: 350px;
    margin-bottom: 20px;
}

#sub_section_1 .text {
    float: left;
    width: 240px; height: 100%;
}

#sub_section_1 .image {
    float: left;
    background: url(../images/sub_image.png) no-repeat;
    width: 500px; height: 330px;
    padding: 10px; margin-right: 10px;
}

.overlay {
    padding: 20px 20px;
    background: url(../images/desc_overlay.png) repeat-x;
    height: 60px; width: 460px;
}


<div id="sub_section_1">
<div class="image">
<div class="acc_image_2"><div class="overlay"><h2>Rabatt <?php echo $deal2['savings']; ?>% /Dein Preis - <?php echo $deal2['price']; ?>CHF</h2></div></div>
</div>
<div class="text">
<h2><?php echo $deal2['title']; ?></h2>
<p><?php echo $deal2['description']; ?></p>
<div class="button" align="center"><a href="<?php echo $deal2['link']; ?>">Purchase Deal</a></div>
</div>

Any answers as to if this is possible, and a relatively efficient way to do it would be greatly appreciated ;).

I’d much rather be able to do it client side, then find an image re-sizer class, download the image locally, then re-size it using that class.

Answer 1

It depends on what compatibility you expect. CSS3 offers background-size, but that’s not supported in older browsers (IE8 and lower). You could use modernizr for those. Or you can do it the old school way, with an image inside a div

<div id="container">
   <div id="background"><img src="...."></div>
   <div id="content">
      Content here
   </div>
</div>

And CSS

#container {  position : relative; }
#background {  position : absolute;
               width : 100%;
               height : 100%;
               z-index : 12;
               top : 0;
               left : 0; }
#background img {   width : 100%;
                   height : 100%; }
#content {  position : absolute;
               z-index : 13;
               top : 0;
               left : 0; }