Results 1 to 6 of 6

Thread: Responsive Fullscreen Background Image - Please Help

  1. #1
    Join Date
    Jan 2006
    Posts
    234
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Question Responsive Fullscreen Background Image - Please Help

    Hi.

    I'm working on a responsive one page website based on bootstrap and having a problem with a background image which isn't going fullscreen on smaller devices.

    Anchor the image to the bottom of the browser window might work, but I don't know how to do it.

    Someone please give me a hand here.

    Below the HTML & CSS.

    HTML:
    HTML Code:
    <header>
      <div class="container">
        <div class="intro-text">
          <div class="intro-heading">Text</div>
          <div class="intro-lead-in">Text</div>
          <a href="#portfolio" class="page-scroll btn btn-xl">Text</a> 
        </div>
      </div>
    </header>
    CSS:
    Code:
    header {
        text-align: center;
        color: #fff;
        background-attachment: scroll;
        background-image: url(../img/header-bg.jpg);
        background-position: center center;
        background-repeat: none;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    }
    
        header .intro-text {
        padding-top: 100px;
        padding-bottom: 50px;
    }
    
        header .intro-text .intro-lead-in {
        margin-bottom: 25px;
        font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 22px;
        font-style: italic;
        line-height: 22px;
    }
    
        header .intro-text .intro-heading {
        margin-bottom: 25px;
        font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 50px;
        font-weight: 700;
        line-height: 50px;
        font-style: italic;
    
    }
    
    @media(min-width:768px) {
        header .intro-text {
        padding-top: 300px;
        padding-bottom: 200px;
    }
    
        header .intro-text .intro-lead-in {
        margin-bottom: 50px;
        font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 40px;
        font-style: italic;
        line-height: 40px;
    }
    
        header .intro-text .intro-heading {
        margin-bottom: 20px;
        font-family: Montserrat, "Helvetica Neue",Helvetica, Arial, sans-serif;
        font-size: 70px;
        font-weight: 700;
        line-height: 75px;
        font-style: italic;
        font-variant: normal;
        text-transform: none;
    }
    }
    Thanks in advance for any suggestions.
    Cheng

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Please provide a link to your page so that we can see everything altogether and in context.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Jan 2006
    Posts
    234
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    @ Beverleyh

    ....... thanks for the quick reply.

    Sorry, but the page isn't online yet.
    I'll see what I can do to upload it somewhere for you to have a look at.

    Thanks again,
    Cheng

  4. #4
    Join Date
    Jan 2006
    Posts
    234
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    ....... Here is the LINK to the uploaded page.
    This is a free domain and the server is very slow, that's why I stripped the page down to a minimum.
    Below an image of what it looks like on a smartphone, the image height isn't fullscreen.
    I tried to do it with a jquery plugin, but it interfered with my nicescroll plugin and I think it should work just with CSS.
    Hopefully someone can give me a hand with this issue .......

    Click image for larger version. 

Name:	Screenshot.jpg 
Views:	185 
Size:	8.7 KB 
ID:	5577
    Cheng

  5. #5
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Here is a stripped-back sample of what I think you mean;
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
    
    <title>Responsive Fullscreen Image with Content Underneath</title>
    
    <style>
    html, body { margin:0; padding:0; font:16px Verdana }
    
    .fullscreen-img { position:absolute; width:100%; height:100%; background:url(image.jpg) 50% 50% no-repeat; background-size:cover }
    .content-underneath { position:absolute; top:100%; width:100%; text-align:center }
    .content { max-width:40em; margin:3em auto }
    </style>
    
    </head>
    <body>
    
    <div class="fullscreen-img"></div>
    
    <div class="content-underneath">
    	<div class="content">
    		<h2>Responsive Fullscreen Image with Content Underneath</h2>
    		<h3>(modern browsers and IE9+)</h3>
    	</div>
    </div>
    
    </body>
    </html>
    Demo: http://fofwebdesign.co.uk/template/_...tent-below.htm (scrolldown for content)

    Please note that the success of this depends on the artist direction and proportions of your background image. For example, your eagle works well on a landscape screen, but its head and tail get chopped off on a tall, thin portrait screen (like on iPad 5). For best results, your might want to try a square image.
    Alternatively, you can load different images via media queries.
    Last edited by Beverleyh; 01-12-2015 at 04:10 PM. Reason: note about artistic direction/proportions of image
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  6. The Following User Says Thank You to Beverleyh For This Useful Post:

    Cheng (01-14-2015)

  7. #6
    Join Date
    Jan 2006
    Posts
    234
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    ....... thanks a lot for this one - It works like a charm.
    The image I uploaded was just an image I grabbed for the sample page.
    I really do appreciate your help
    Thanks again .......
    Cheng

Similar Threads

  1. responsive image grid?
    By mlegg in forum CSS
    Replies: 8
    Last Post: 09-24-2014, 04:57 PM
  2. Resolved Multizoom - Image sizing in responsive design
    By ozinder in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 02-14-2014, 01:14 PM
  3. Replies: 14
    Last Post: 08-15-2012, 07:44 PM
  4. Fullscreen Random Image?
    By B3N in forum JavaScript
    Replies: 15
    Last Post: 02-05-2012, 05:37 PM
  5. Replies: 0
    Last Post: 01-10-2012, 05:27 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
  •