Responsive Fullscreen Background Image - Please Help

**Cheng** · 01-08-2015, 01:49 PM

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.

**Beverleyh** · 01-08-2015, 06:14 PM

Please provide a link to your page so that we can see everything altogether and in context.

**Cheng** · 01-09-2015, 11:03 AM

@ 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** · 01-12-2015, 11:17 AM

....... 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: 254
Size: 8.7 KB
ID: 5577

**Beverleyh** · 01-12-2015, 01:41 PM

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.

**Cheng** · 01-14-2015, 10:26 AM

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