Results 1 to 8 of 8

Thread: responsive image with a div as background

  1. #1
    Join Date
    Nov 2011
    Posts
    74
    Thanks
    5
    Thanked 0 Times in 0 Posts

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

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,159
    Thanks
    1
    Thanked 229 Times in 225 Posts

    Default

    Hi there jonnyfreak,

    can you give us the image in question?

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

    coothead
    ~ the original bald headed old fart ~

  3. #3
    Join Date
    Nov 2011
    Posts
    74
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by coothead View Post
    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

  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,793
    Thanks
    46
    Thanked 237 Times in 230 Posts
    Blog Entries
    54

    Default

    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>

  5. #5
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,159
    Thanks
    1
    Thanked 229 Times in 225 Posts

    Default

    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
    ~ the original bald headed old fart ~

  6. #6
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,793
    Thanks
    46
    Thanked 237 Times in 230 Posts
    Blog Entries
    54

    Default

    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>

  7. #7
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,159
    Thanks
    1
    Thanked 229 Times in 225 Posts

    Default

    Hi there Arie,

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

    coothead
    ~ the original bald headed old fart ~

  8. #8
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,793
    Thanks
    46
    Thanked 237 Times in 230 Posts
    Blog Entries
    54

    Default

    Quote Originally Posted by coothead View Post
    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.

Similar Threads

  1. Responsive landscape image
    By theremotedr in forum CSS
    Replies: 4
    Last Post: 03-03-2016, 08:19 PM
  2. Image Trail Script Responsive Image
    By jundo12 in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 01-20-2016, 12:47 AM
  3. Replies: 3
    Last Post: 05-12-2015, 11:29 PM
  4. Replies: 5
    Last Post: 01-14-2015, 10:26 AM
  5. responsive image grid?
    By mlegg in forum CSS
    Replies: 8
    Last Post: 09-24-2014, 04:57 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •