Full-screen responsive background image

Question

I am very new to Front-end development and Foundation.

I am trying to get <div class="main-header"> to be a full screen image that scales down responsively.

Can anyone tell me what I am doing wrong? It is scaling properly, but is not showing the full image. I also wanted the <div class="large-6 large-offset-6 columns"> to sit above it on a mobile device – is that possible?

The HTML:

<!-- MAIN HEADER -->
<div class="main-header">
   <div class="row">
     <div class="large-6 large-offset-6 columns">
       <h1 class="logo">BleepBleeps</h1>
       <h3>A family of little friends<br>that make parenting easier</h3>
     </div> <!-- END large-6 large-offset-6 columns -->
   </div><!-- END ROW -->
</div><!-- END MAIN-HEADER -->

The CSS:

.main-header {
    background-image: url(../img/bb-background2.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
}

h1.logo {
    text-indent: -9999px;
    height:115px;
    margin-top: 10%;
}

Wait... You wanted it on the WHOLE page... ohhhh Here. body { background: url("../img/bb-background2.png") no-repeat fixed center center / cover transparent; color: #999999; font-family: 'Lato',sans-serif; } — Cam, May 14 '13 at 19:30
I used "[Perfect responsive fullscreen backgrounds](http://www.minimit.com/articles/code-tips/perfect-responsive-fullscreen-backgrounds)" and it works quite well. — Ken Prince, Oct 18 '13 at 22:27

Plummer · Accepted Answer · 2015-10-20T13:09:33.480

113

http://css-tricks.com/perfect-full-page-background-image/

//HTML
<img src="images/bg.jpg" id="bg" alt="">

//CSS
#bg {
  position: fixed; 
  top: 0; 
  left: 0; 

  /* Preserve aspet ratio */
  min-width: 100%;
  min-height: 100%;
}

OR

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

OR

//HTML
<img src="images/bg.jpg" id="bg" alt="">

//CSS
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

//jQuery
$(window).load(function() {    

        var theWindow        = $(window),
            $bg              = $("#bg"),
            aspectRatio      = $bg.width() / $bg.height();

        function resizeBg() {

                if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
                    $bg
                        .removeClass()
                        .addClass('bgheight');
                } else {
                    $bg
                        .removeClass()
                        .addClass('bgwidth');
                }

        }

        theWindow.resize(resizeBg).trigger("resize");

});

edited Oct 20 '15 at 13:09

answered May 14 '13 at 16:45

Plummer

6,522
13
47
75

the website provided is where the browser version is the issue, everything works in all browsers accept Ie7 and 8.. did you look at the website? – Cam May 14 '13 at 18:41
Both CSS methods (#2 more than #1) work in IE7/8, jquery method works in IE7+. I don't know what you're referring to when you say,"did you look at the website?" because there's not site listed in the question. If you're referencing the article I provided, then YOU need to go through and read it as it clearly states supported browser/versions for each method. – Plummer May 14 '13 at 18:43
2

I've used this very method from Chris Coyier. It works. Just try it and mark this answer correct. – tahdhaze09 May 14 '13 at 18:55
Hi @tPlummer Thanks for the support, and sorry if it was a duplicate question. New to both Stack Overflow, and Foundation. Really appreciate the help though. – Tom Rogers May 14 '13 at 19:04
2

Also the z-index play his paper. Add into the css file this => z-index:-100; in order to put the image behind everything – dani24 Nov 26 '15 at 01:44

score 34 · Answer 2 · answered May 31 '14 at 12:25

34

<style type="text/css">
html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
</style>

answered May 31 '14 at 12:25

9pixle

546
7
17

4

When I use this in a full window sized div it works fine on desktops. Although on phones and tablets it's stretched to fit the entire height of the page instead of just the div I assign it to. Any idea why? – Misbit Aug 21 '14 at 11:57
@vsdev, any solution to that? I'm facing similar issue in PWA full screen launch :( – Satys Oct 10 '18 at 18:52
@Satys Sorry, I don't remember. It's been to long but I think I got it to work since that web site was up and running for about three years. As of now that code is no longer archived though. – Misbit Oct 12 '18 at 05:59
@vsdev, thanks for replying, actually, I did manage to solve it! – Satys Oct 12 '18 at 14:53
@Satys - I'm having the same issue - do you recall how you solved the issue of the bg image filling the entire page height instead of just the div it's assigned to? – Clark Jan 12 '19 at 20:23

score 19 · Answer 3 · answered Sep 26 '17 at 21:20

19

for Full-screen responsive background image

set css height ( height:100vh )

example :

.main-header {
    background-image: url(../img/bb-background2.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height:100vh;  /* responsive height */
}

answered Sep 26 '17 at 21:20

MXLink

191
1
2

+1 This one gives no trouble with the position of subsequent divs, since it does not fix the position of .main-heather. – J0ANMM Mar 20 '21 at 13:27

score 7 · Answer 4 · answered Jan 25 '15 at 08:22

One hint about the "background-size: cover" solution, you have to put it after "background" definition, otherwise it won't work, for example this won't work:

html, body {
    height: 100%;
    background-size: cover;
    background:url("http://i.imgur.com/aZO5Kolb.jpg") no-repeat center center fixed;
}

http://jsfiddle.net/8XUjP/58/

score 6 · Answer 5 · answered May 06 '16 at 07:29

I personally dont recommend to apply style on HTML tag, it might have after effects somewhere later part of the development.

so i personally suggest to apply background-image property to the body tag.

body{
    width:100%;
    height: 100%;
    background-image: url("./images/bg.jpg");
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

This simple trick solved my problem. this works for most of the screens larger/smaller ones.

there are so many ways to do it, i found this the simpler with minimum after effects

score 6 · Answer 6 · answered Sep 23 '16 at 15:49

I had this same problem with my pre-launch site EnGrip. I went live with this issue. But after a few trials finally this has worked for me:

background-size: cover;
background-repeat: no-repeat;
position: fixed;
background-attachment: scroll;
background-position: 50% 50%;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
z-index: 0;

pure CSS solution. I don't have any JS/JQuery fix over here. Even am new to this UI development. Just thought I would share a working solution since I read this thread yesterday.

I use the next code background-repeat:no-repeat;background-size: cover;background-attachment: scroll;background-position: 50% 50%;padding-top:101px; and it's does work well — simon, Nov 18 '19 at 17:29

score 2 · Answer 7 · answered Sep 25 '14 at 08:54

2

Try this:

<img src="images/background.jpg" 

style="width:100%;height:100%;position:absolute;top:0;left:0;z-index:-5000;">

http://thewebthought.blogspot.com/2010/10/css-making-background-image-fit-any.html

answered Sep 25 '14 at 08:54

Tony Wu

1,040
18
28

score 2 · Answer 8 · edited Jul 20 '17 at 20:10

2

Backstretch

Check out this one-liner plugin that scales a background image responsively.

All you need to do is:

1. Include the library:

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>

2. Call the method:

$.backstretch("http://dl.dropbox.com/u/515046/www/garfield-interior.jpg");

I used it for a simple "under construction website" site I had and it worked perfectly.

edited Jul 20 '17 at 20:10

Naveen DA

4,148
4
38
57

answered Oct 22 '14 at 19:12

Joshua Pinter

45,245
23
243
245

downvote was prob for increasing complexity? Think the result can be done in pure css? – Daithí Feb 24 '19 at 11:06
5 years later and I'd agree with you. Still an option, though. It's not like it doesn't work. Typically, you only downvote solutions that don't actually answer the original question. – Joshua Pinter Feb 26 '19 at 01:36

score 1 · Answer 9 · answered May 17 '17 at 05:41

You can also make full screen banner section without use of JavaScript, pure css based responsive full screen banner section , using height: 100vh; in banner main div, here have live example for this

#bannersection {
    position: relative;
    display: table;
    width: 100%;
    background: rgba(99,214,250,1);
    height: 100vh;
}

https://www.htmllion.com/fullscreen-header-banner-section.html

score 1 · Answer 10 · answered Jan 29 '21 at 12:45

This worked for me, so posting this.

.my-container {
  position: relative;
  background: #696969;
  overflow: hidden;
}
.my-container:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.6;
  background-image: url('https://images.pexels.com/photos/1084542/pexels-photo-1084542.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
  background-repeat: no-repeat;
  background-position: 50% 0;
  -ms-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
}

rec1978 · Answer 11 · 2015-03-09T10:07:51.073

I have done this javascript function: it fix your background image to your screen size in base at the most significative dimension (width od height) without change the image aspect ratio.

<script language="Javascript">

function FixBackgroundToScreen()
{
    bgImg = new Image(); 
    bgImg.src = document.body.background;

    if ((bgImg.height / window.innerHeight) < (bgImg.width / window.innerWidth))
        document.body.style.backgroundSize = "auto 100%";
    else
        document.body.style.backgroundSize = "100% auto";
};    
</script>

This function is the only think you need. It must be called with the window.onresize event and from the body.onload event. The image must be background-repeat: no-repeat; background-attachment: fixed;

<script language="Javascript">
window.onresize=function(){FixBackgroundToScreen();};
</script>

<body onload="FixBackgroundToScreen();">

You can see the function in my site www.andreamarulla.it

Sorry for my english... Andrea ;-)

maestro888 · Answer 12 · 2017-04-28T09:23:08.853

Simple fullscreen and centered image https://jsfiddle.net/maestro888/3a9Lrmho

jQuery(function($) {
    function resizeImage() {
        $('.img-fullscreen').each(function () {
            var $imgWrp = $(this);

            $('img', this).each(function () {
                var imgW = $(this)[0].width,
                    imgH = $(this)[0].height;

                $(this).removeClass();

                $imgWrp.css({
                    width: $(window).width(),
                    height: $(window).height()
                });

                imgW / imgH < $(window).width() / $(window).height() ?
                    $(this).addClass('full-width') : $(this).addClass('full-height');
            });
        });
    }

    window.onload = function () {
        resizeImage();
    };

    window.onresize = function () {
        setTimeout(resizeImage, 300);
    };
 
    resizeImage();
});

/*
 * Hide scrollbars
 */

#wrapper {
    overflow: hidden;
}

/*
 * Basic styles
 */

.img-fullscreen {
    position: relative;
    overflow: hidden;
}

.img-fullscreen img {
    vertical-align: middle;
    position: absolute;
    display: table;
    margin: auto;
    height: auto;
    width: auto;
    bottom: -100%;
    right: -100%;
    left: -100%;
    top: -100%;
}

.img-fullscreen .full-width {
    width: 100%;
}

.img-fullscreen .full-height {
    height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="wrapper">
    <div class="img-fullscreen">
        <img src="https://static.pexels.com/photos/33688/delicate-arch-night-stars-landscape.jpg" alt=""/>
    </div>
</div>

score 0 · Answer 13 · answered Mar 17 '18 at 10:24

For the full-screen responsive background image cover

<div class="full-screen">

</div>

CSS

.full-screen{
    background-image: url("img_girl.jpg");
    height: 100%; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

score 0 · Answer 14 · answered Feb 03 '19 at 14:21

I would say, in your layout file give a

<div id="background"></div>

and then in your css do

#background {
 position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background: image-url('background.png') no-repeat;
  background-size: cover;
}

And be sure to have the background image in your app/assets/images and also change the

background: image-url('background.png') no-repeat;

'background.png' to your own background pic.

score -1 · Answer 15 · answered Nov 27 '18 at 10:07

-1

By useing this code below :

.classname{
    background-image: url(images/paper.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

Hope it works. Thanks

answered Nov 27 '18 at 10:07

Al Faisal Mia

77
7

Full-screen responsive background image

15 Answers15

Backstretch

Linked

Related