Help with responsive design and image

HTML & CSS
1

I’ve attached a single image (consisting of three side-by-side images) for use here as an example.

This image displays successfully on a desktop screen, but only shows the dog on an iphone screen.
Is there a way to have the image resize so that the full image (three images across) appears on all screen sizes?

Here’s my code:


<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>

 '''' '''' '''' " " " "

<style>
/* For device width smaller than 400px: */
body {
    background-repeat: no-repeat;
    background-image: url('../images/example.png');
}

/* For device width 400px and larger: */
@media only screen and (min-device-width: 400px) {
    body {
       background-image: url('../images/example.png');
    }
}
</style>


<style>
.middle-box {
top-margin: 5px;
padding: 10px 0;
height: auto;
max-width: 100%;
display: flex;
flex-wrap: wrap;
color: #ffffff;
background: transparent url(../images/example.png) no-repeat;
}

 " " " "

</head>
<body>

 " " " "


<div class="middle-box">
<div class="container text-center">
<p>text text text</p>
</div>
</div>

" " " " "

</body>

" " "

1358×280 538 KB

2

Try adding background-size: contain; to your css

3

Thanks for your reply.
If this is what you mean (see code below) it didn’t solve my dilema. But I appreciate your effort.
Any other suggestion(s) will be appreciated.

.middle-box {
top-margin: 5px;
padding: 10px 0;
height: auto;
max-width: 100%;
display: flex;
flex-wrap: wrap;
background-size: contain;
color: #ffffff;
background: transparent url(../images/example.png) no-repeat;
}
4

Try putting the background-size after you set the background short-hand property.
Remember, any short-hand css property will overwrite all its sub-properties, even if not defined in the short-hand, they get reset to their default.

4 Likes
5

Much thanks that resolved it.

The whole image appears successfuly, but it seems my text is cut off vertically.
Apparently height: auto; doesn’t make the container flex with the text.
Any guidance with that - will be appreciated.

If I need to start another posting, for this request for help, please let me know.
Thanks again

6

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