Full Screen Responsive Background Image Bootstrap

Report · Nov 10, 2015

Hello,

I've been working all day trying to get a background image to properly render in a Bootstrap project. I've tried .container-fluid, moving the location of the image, creating different classes and assigning it to various elements... nothing works. So here I am... I hope someone can help!

As you can see from the screenshot, the nav bar goes beautifully edge to edge with the content within the center. I want the background image to do the same but as you can see, it appears to start at the left and stop when it stops. The image is 1366x700px. I'm resisting the urge to simply create a bigger image because I want it to be responsive.

Here's my HTML but it's a mess.

<body>

<span class="sr-only">Toggle navigation</span>

</button>

<!-- ORIG BOOT STRAP

<a class="navbar-brand" href="#">Brand</a>>

</div> -->

</div>

<!-- DISABLE THIS LINK STYLE

<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>

<!-- DISABLE DROPDOWN LINKS

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

<li><a href="#">Separated link</a></li>

<li><a href="#">One more separated link</a></li>

</ul>

</li>

</ul> -->

<!-- NOT USING THE SEARCH OR OTHER FORM FEATURES

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form> -->

<li><a href="#">WALLPAPERS</a></li>

<li><a href="#">CONTACT</a></li>

<!-- DISABLED DROPDOWN LINKS

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

<li><a href="#">Separated link</a></li>

</ul> -->

</ul>

</div>

</nav>

</header>

<h1>Wallpapers to Love.</h1>

<p>Now you can express yourself every day with high quality wallpapers and backgrounds to enjoy and share</p>

<button type="button" class="btn btn-primary">COMING SOON</button>

<p><span class="fineprint">Available on most Android® devices.</span></p>

</div>

</div>

</div>

</div>

<!--<div class="col-md-7">

<h1>Wallpapers You'll Love!</h1>

<p>Now you can express yourself every day with high quality wallpapers and backgrounds to enjoy and share. They're free!</p>

<button type="button" class="btn btn-primary">COMING SOON</button>

<p>Available on most Android devices.</p>

</div>

</section> -->

</div>

</header>

<h2>Pictures tell the story...</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<h2>Wallpapers you'll love!</h2>

<p>Enjoy wallpapers by theme, including:</p>

<ul>

<li><a href="#">Wallpaper 1</a></li>

<li><a href="#">Wallpaper 2</a></li>

<li><a href="#">Wallpaper 3</a></li>

<li><a href="#">Wallpaper 4</a></li>

</ul>

<p>...and we're working hard on new wallpapers for you all the time!</p>

<h2>Beautiful and Easy to Use</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Advertising statement <a href="privacy.htm">Privacy Policy</a> </p>

<h2>We love our users!</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Review us? </p>

</section>

</div>

</div>

<!-- START BOOTSTRAP STICKY FOOTER

<p>Visit our Google Play page</p>

<p>Wallpapers</p>

<p>Terms of Use</p>

<p>Privacy</p>

<p>Permissions & Credits</p>

<p>Contact</p>

<p>Catch a Secret</p>

</div>

</footer>

</div> -->

</div>

<!-- ORIGINAL BOOTSTRAP HELLO WORLD <div class="container-fluid"><h1>Hello, world!</h1>

</div> -->

</body>

Report · Nov 10, 2015

Use CSS background-size:cover plus vendor-prefixes for older browsers.

Live example:

Alt-Web :: Fading Page Load Demo

body {

/**scalable background to fill available viewport**/ background: url(YOUR_BG_IMAGE.jpg) center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 10, 2015

Nancy,

Thanks for your help!

I took your suggestions and the background image displays beautifully edge to edge... but I'm getting something else unexpectedly. This is going to be hard to communicate... the page now seems to have two layers: an upper layer with the new full screen background and the rest of the body content, scrollable and good except there is no background color even though I have specified one, and 2) a second fixed copy of the background image, unscrollable, like a bottom layer. Specifying or unspecifying a background color makes no difference; I get the same result. I'm viewing it in IE 11.

It's kind of a neat effect if I were doing it on purpose and if the design elements rendered a legible page.

I've tried checking the code to see if I may have placed the background image in twice, but I did not find such a scenario.

Code I'm using now:

body {

/* SCALABLE BACKGROUND TO FILL AVAILABLE VIEWPORT */

background-color: #fcfcfc;

background: url(../images/background_wood_3.jpg) center center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

This is what it looks like: It appears and functions as if two layers.

What do you think??

Report · Nov 10, 2015

It's caused by the fixed attachment which makes content sort of scroll over the surface of your background image.

Try this instead:

background: url(../images/background_wood_3.jpg) no-repeat center center;

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 10, 2015

Nancy,

Now it's all scrolling as if one layer but there are still two backgrounds

body {

/* SCALABLE BACKGROUND TO FILL AVAILABLE VIEWPORT */

background-color: #fcfcfc;

background: url(../images/background_wood_3.jpg) no-repeat center center;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

Report · Nov 10, 2015

The 2nd background must be coming from some other div / style rule.

Can you post a link to your site?

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 10, 2015

Sorry Nancy, I'm not on a test server, just my own system for now.

How else could I find where it might be? I did a search on both .css documents as well as the HTML page, searching repeatedly for terms like ".jpg", "background", "wood". I saw it with my own eyes once, went to copy/paste some of the CSS and never found it again. Think me and my system both need a reboot?

Report · Nov 10, 2015

Ctrl+F (Find) is sometimes useful.

Or, Preview in browser. Right Click and select Inspect Element.

Click on the container that holds that background. You should be able to identify the exact HTML tag and CSS code for it.

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 10, 2015

Ctrl+Find is what I've been using -couldn't find anything! I tried to get something going with 'Inspect Element' when you and Osgood recommended it so fondly some time back... but it made me crazy when I tried to get used to it. It made me admire you and Osgood for being able to make use of it! Makes me feel claustrophobic. It just feels so much better to keep working inside DW.

I'm going to reboot. Maybe the code will show up in the morning.

Thanks Nancy, you're a treasure. Hope you have a nice evening...

Report · Nov 11, 2015

Why don't you procure some web server space and upload your work to a remote server?

That is by far the quickest way to get help here.

Web hosting doesn't have to cost an arm & leg. Many ISPs offer their customers a small free web space for personal use. Or do a Google search for free web hosting.

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 10, 2015

Nancy,

FYI I found code in which the background was also placed inside a container_fluid div but I can't find it again. I've checked both .css files and the HTML document. It must be removed. I did so much troubleshooting today I may have left a small trail of destruction.

The background currently being displayed is enlarged quite a bit and losing too much resolution to use. It's a 1366x700 px image but it appears to be enlarging to much more than that, including enlarging over the text.. The background color for the content is not being displayed so the text is not legible. The background-color parameter I gave it isn't taking.

Report · Nov 11, 2015

Nancy,

I've been able to confirm that there are no other references to the background except as shown below. The duplicate was eliminated. But I'm still trying to figure out why the image is enlarging itself to the extent that the resolution is no longer acceptable and I also need to have a white background behind the rest of the content that is not placed over the background image.

body {

/* SCALABLE BACKGROUND TO FILL AVAILABLE VIEWPORT */

background-color: #fcfcfc;

background: url(../images/background_wood_4.jpg) no-repeat center center;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

Any other ideas?

Report · Nov 11, 2015

Nancy,

When I revert back to the 'fixed' background, resolution is restored but of course it is fixed. That would be okay if I could place a white background behind all of the content that is not intended to be placed over the background.

Report · Nov 11, 2015

You can certainly do that.

.content {

background: rgba(255,255,255,0.7) /**70% white**/

}

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 11, 2015

Scrolling over a fixed background is making me dizzy. There HAS to be a way to place a simple header background without the image becoming distorted... what are we missing?

Report · Nov 11, 2015

Then put your background into a <div> other than the <body>

See this example:

Bootstrap Parallax Template

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 11, 2015

Nancy,

I've been experimenting and not only has nothing worked but now I can't get the original background to display at all even though I'm using:

body {

/* SCALABLE BACKGROUND TO FILL AVAILABLE VIEWPORT */

background: url(../images/background_wood_4.jpg) no-repeat center center;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

I tested putting the background in other containers such as the <header> but the background stopped displaying altogether.

I was going to test 'background size: auto;' but I can't get it to load correctly right now.

I feel like I must've left an error in the code somewhere but I can't find it. I tried: Command>Clean Up HTML but it found nothing. When searching Parent-Parent-Parent, if the tool doesn't go all the way to the HTML tags does that mean there's an error?

Thanks for hanging in there with me... this is maddening eh?

Report · Nov 11, 2015

You could save us both a lot of time and trouble if you could just upload your work somewhere and post a URL... just saying.

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 11, 2015

Nancy, I don't normally participate in forums so I'll admit to being a little wet behind the ears, but it seems to me that in this predatory age, giving the whole universe -- i.e., anyone around the world who has a User ID to this forum -- access to my server and everything on it doesn't seem like a secure thing to do. What am I missing?

I also kind of need to get this figured out before getting that all worked out with my ISP. Can you suggest other DW tools for debugging or troubleshooting? Is there any other way I can help make the time you are so kindly sharing with me more efficient?

Report · Nov 11, 2015

I didn't mean for one moment that you should share your Server log-in credentials with anyone.

All I'm asking you to do is upload your web page and assets to a TEST folder on your remote server and give us the URL so we can see what you see in our browsers. http://yoursite.com/TEST/

I post links to example pages on my web site all the time. That is not giving you access to my server. That would be unthinkable.

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 11, 2015

Working on getting the test server set up. If I know my ISP, it will be some time after Christmas when it is available.

In the meantime so you have any suggestions for how to debug this project? I'm tempted to start all the way over... I don't know how else to find the problem(s).

Report · Nov 11, 2015

Do a Google search for Free Web Hosting. You'll find plenty of hosts that you can use for temporary testing and debugging.

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Full Screen Responsive Background Image Bootstrap

Photos