responsive image with a div as background

Printable View

06-24-2016, 11:06 AM
jonnyfreak

responsive image with a div as background

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

Code:

<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

Code:

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

and the div

HTML Code:

<div class="main-image"></div>
06-24-2016, 11:38 AM
coothead

Hi there jonnyfreak,

can you give us the image in question?

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

coothead
06-24-2016, 11:45 AM
jonnyfreak

Quote:

Originally Posted by coothead

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
06-24-2016, 12:38 PM
molendijk

Something like this:

Code:

<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>
06-24-2016, 12:47 PM
coothead

Hi there jonnyfreak,

here is one possible solution...

Code:

<!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
06-24-2016, 12:55 PM
molendijk

Or this:

Code:

<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>
06-24-2016, 01:04 PM
coothead

Hi there Arie,

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

coothead
06-24-2016, 01:28 PM
molendijk

Quote:

Originally Posted by coothead

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:

Code:

<div style="position: relative; width: 40%; min-width: 300px">

or change the top position of the inner-div.