I have multiple non-local images that I want to use as background images for classes with a width of 500px and height of 330px. Even though these dimensions are specified in the CSS properties for the class, the
background: url('http://www.example.com/image.jpg');It's possible that I may be mistaken in thinking that the distinction between remote and local images is causing this issue. It could be that the background image by default does not adjust to the width or height of the selector to which it belongs.
If that is the case, is it feasible to expand the height and width of the background property to match the selector it is applied to, similar to how altering the height/width attributes of the <img> tag affects even remote files?
Below is 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>Discount <?php echo $deal2['savings']; ?>% /Your Price - <?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>
If anyone has insights on whether this is feasible, and a reasonably efficient method to achieve it, I would greatly appreciate it. ;)
I prefer to handle this on the client side rather than using an image resizer class, downloading the image locally, and then resizing it with that class.