Responsive Fullscreen Background Image - Please Help [Archive]

View Full Version : 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:

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

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 (http://benjapakee.atspace.com/) 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 .......

5577

Beverleyh

01-12-2015, 01:41 PM

Here is a stripped-back sample of what I think you mean;
<!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/_testing/fullscreen-img-content-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 .......