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

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>

**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

).

coothead

**jonnyfreak** · 06-24-2016, 11:45 AM

Originally Posted by coothead

Hi there jonnyfreak,

can you give us the image in question?

We can then provide you with appropriate code - ( hopefully

).

coothead

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

**molendijk** · 06-24-2016, 12:38 PM

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>

**coothead** · 06-24-2016, 12:47 PM

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

**molendijk** · 06-24-2016, 12:55 PM

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>

**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

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.

Thread: responsive image with a div as background

Thread Tools

Search Thread

responsive image with a div as background

Similar Threads

Responsive landscape image

Image Trail Script Responsive Image

Help with responsive CSS header text and image

Responsive Fullscreen Background Image - Please Help

responsive image grid?

Bookmarks

Bookmarks

Posting Permissions