How to make div background image inside another div responsive?

HTML & CSS
, , ,
1

I’ve been struggling with this issue for a while, and just wondered if anyone has any advice! Basically I want to place images inside the container, that will resize with the browser window. So how else can I make it responsive? Thank you in advance!

HTML

<div id="special-dishes-section">
    <div class="container">
        <div class="special-dishes">
        </div>    <!-- end special-dishes -->
    </div>    <!-- end container -->
</div>    <!-- end special-dishes-section -->

CSS

#special-dishes-section{
    background: url('../images/special-dishes-bg.jpg') no-repeat center center;
    min-height: 560px;
    padding: 71px 0 65px 0;
    position: relative;
}

.special-dishes{
    background: url('../images/wooden-bg.png') no-repeat center center;
    min-height: 424px;
}
2

Assuming you make the width/height of hte box the same…you can do background-size:contain;.

That will stretch the image as big as possible to fit the parent elements dimensions. However, this will possibly distort the image.

http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain

1 Like
3

This will also work with non-square boxes provided you make the relative shape of the box the same ratio of the image (e.g. if the image is 3 times wider than it is high, the box needs to be 3 times wider than it’s high) - I’m using it for a logo insertion in a header, and can re-size the window and have the logo keep a consistent look throughout the window shape.

Never mind…I re-read it and understand what you’re talking about. The image can distort (i.e. pixelate) if you use an image that is too small for the content…the one I used is larger than should be required, which is why mine never distorted.

4

Thank @RyanReese

It’s totally solved my issue. But can you tell me when to use contain vs cover?

5

Depends on the situation and what kind of look you want.

http://www.w3schools.com/cssref/css3_pr_background-size.asp

I hate linking w3schools but they give the option to play around with it.

Read those descriptions and try out the different properties. It should be apparent what each one will do.

So to answer you - it’s case-by-case basis.

6

Hi @DaveMaxwell

Can you explain it simply to me to understand. Sorry for bad english. Thank in advance :smile:

7

Thank you. I’ll spend time to read it :smiley:

8

One more question. How can I expand the height of image depends on the height of content?

9

As the div gets bigger, the image should adjust accordingly. I’m not sure what you mean. It’s automated.

10

Sorry - that was my misunderstanding of the point of his post. He was talking about the distortion of the image itself, which can happen if you use an image noticeably smaller than the space it’s supposed to be in. For example, trying to use a 10x10 image in a space that is 40x40.

If you look at the page he linked to which has the play buttons, try out the different options and watch how the image looks when you switch to the different sizes - does it look the same.

I was thinking that he was talking about the image skewing in appearance (stretching wider but keeping the same height), but that’s not what he wrote.

11

Contain means that your background image will be scaled until it all fits in the background that you have available. That probably means there will be white-space around the image in order for it to fit.

Cover means that the image will cover the whole background while maintaining aspect ratio. It does this by scaling the background image so that the smallest dimension reaches the maximum width/height of the element.

You can see a live example here.

12

Hi @RyanReese

Please see my live example. When resize brower, the background too small for the inside content, I mean want to height expand auto.

13

Try changing “contain” to “100% 100%”:

style.css (line 898)

.special-dishes {
    background: url('../images/wooden-bg.png') no-repeat center center;
    background-size: 100% 100%;
    min-height: 424px;
}
14

As Ron said you can stretch the image with 100% 100% but the image will be distorted and the results will be pretty bad at some sizes.

What you are trying to do is not very web friendly in that you are trying to basically hang fluid text on a fixed image. It would be ok if you were just going that for the logo but you are unlikely to get any good results with all that text.

You need to re-think this a little I think :smile:

You could just use the image at the largest screen size and then perhaps swap it for a square repeating background at smaller sizes so that it can stretch as required.

The only alternative will be the old school method where you top and tail the image and then repeat the middle section so that the element can grow. Of course you will then need to make different sets of images to match your breakpoints also.

All in all its not a viable method unless you want a lot of code bloat or unless you are happy with a stretched and distorted image.

15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.