responsive image with a div as background [Archive]

View Full Version : responsive image with a div as background

jonnyfreak

06-24-2016, 11:06 AM

I have a div that i want to give an image background. i can then place another div inside this for some text. i have looked over the internet but cant find what i need. i know how to make an image responsive with a div

<div class="main-image"><img src="images/panels/57-2.jpg" style="width:100%; height:auto;"></div>

but not as a background

this is what i have so far but because there is not an actual image in the div i know it wont show up

.main-image {
background-image: url(../images/panels/57-2.jpg);
background-repeat: no-repeat;
width: 100%;
height: auto;
}

and the div

<div class="main-image"></div>

coothead

06-24-2016, 11:38 AM

Hi there jonnyfreak,

can you give us the image in question?

We can then provide you with appropriate code - ( hopefully :D ).

coothead

jonnyfreak

06-24-2016, 11:45 AM

Hi there jonnyfreak,

can you give us the image in question?

We can then provide you with appropriate code - ( hopefully :D ).

coothead

just a landscape picture original size 1920 X 532 @ 72dpi

molendijk

06-24-2016, 12:38 PM

Something like this:
<div style="position: relative; width: 40%">
<img src="http://wierdenland.nl/wierdenmenu3.jpg" style="width:100%" alt="">
<div style="position: absolute; top: 50%; width: 100%; text-align: center; ">
<span style="background: white; padding: 5px; font-family: verdana; font-size: 14px">some text</span>
</div>
</div>

coothead

06-24-2016, 12:47 PM

Hi there jonnyfreak,

here is one possible solution...

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
.main-image {
position: relative;
width: 100%;
padding-top: 27.7%;
background-image: url(http://placehold.it/1920x532); /*this is a 1920x532 image*/
background-size: 100% auto;
}

.main-image div {
position: absolute;
top: 5vw;
right: 5vw;
bottom: 5vw;
left: 5vw;
padding: 1em;
border: 0.06em solid rgba(0,0,0,0.5);
background-color: rgba(255,255,255,0.75);
box-shadow: 0.5em 0.5em 0.5em rgba(0,0,0,0.5);
overflow: auto;
}
</style>

</head>
<body>

<div class="main-image">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero
bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh,
posuere ac lorem ut, suscipit tincidunt leo.
</div>
</div>

</body>
</html>

coothead

molendijk

06-24-2016, 12:55 PM

Or this:
<div style="position: relative; width: 40%">
<img src="http://wierdenland.nl/wierdenmenu3.jpg" style="width:100%" alt="">
<div style="position: absolute; top: 50%; width: 100%; text-align: center; ">
<span style="padding: 5px; font-family: verdana; color: white; font-size: 18px; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;">this is some text this is some text this is some text this is some text this is some text </span>
</div>
</div>

coothead

06-24-2016, 01:04 PM

Hi there Arie,

are you aware that the text overflows round about "width:540px" in you second example?

coothead

molendijk

06-24-2016, 01:28 PM

Hi there Arie,

are you aware that the text overflows round about "width:540px" in you second example?

coothead
Thanks, coothead, I overlooked that.
When there's much text, we could do something like:
<div style="position: relative; width: 40%; min-width: 300px">
or change the top position of the inner-div.