[css] Full-screen responsive background image

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%;
}

This question is related to css responsive-design fullscreen zurb-foundation

The answer is


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.


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.


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


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;
}

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


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;
}

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.


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/


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 ;-)


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


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 */
}

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

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

_x000D_
_x000D_
jQuery(function($) {_x000D_
    function resizeImage() {_x000D_
        $('.img-fullscreen').each(function () {_x000D_
            var $imgWrp = $(this);_x000D_
_x000D_
            $('img', this).each(function () {_x000D_
                var imgW = $(this)[0].width,_x000D_
                    imgH = $(this)[0].height;_x000D_
_x000D_
                $(this).removeClass();_x000D_
_x000D_
                $imgWrp.css({_x000D_
                    width: $(window).width(),_x000D_
                    height: $(window).height()_x000D_
                });_x000D_
_x000D_
                imgW / imgH < $(window).width() / $(window).height() ?_x000D_
                    $(this).addClass('full-width') : $(this).addClass('full-height');_x000D_
            });_x000D_
        });_x000D_
    }_x000D_
_x000D_
    window.onload = function () {_x000D_
        resizeImage();_x000D_
    };_x000D_
_x000D_
    window.onresize = function () {_x000D_
        setTimeout(resizeImage, 300);_x000D_
    };_x000D_
 _x000D_
    resizeImage();_x000D_
});
_x000D_
/*_x000D_
 * Hide scrollbars_x000D_
 */_x000D_
_x000D_
#wrapper {_x000D_
    overflow: hidden;_x000D_
}_x000D_
_x000D_
/*_x000D_
 * Basic styles_x000D_
 */_x000D_
_x000D_
.img-fullscreen {_x000D_
    position: relative;_x000D_
    overflow: hidden;_x000D_
}_x000D_
_x000D_
.img-fullscreen img {_x000D_
    vertical-align: middle;_x000D_
    position: absolute;_x000D_
    display: table;_x000D_
    margin: auto;_x000D_
    height: auto;_x000D_
    width: auto;_x000D_
    bottom: -100%;_x000D_
    right: -100%;_x000D_
    left: -100%;_x000D_
    top: -100%;_x000D_
}_x000D_
_x000D_
.img-fullscreen .full-width {_x000D_
    width: 100%;_x000D_
}_x000D_
_x000D_
.img-fullscreen .full-height {_x000D_
    height: 100%;_x000D_
}
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>_x000D_
_x000D_
<div id="wrapper">_x000D_
    <div class="img-fullscreen">_x000D_
        <img src="https://static.pexels.com/photos/33688/delicate-arch-night-stars-landscape.jpg" alt=""/>_x000D_
    </div>_x000D_
</div>
_x000D_
_x000D_
_x000D_


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


Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width

Examples related to responsive-design

How to make flutter app responsive according to different screen size? Bootstrap 4: responsive sidebar menu to top navbar How to make canvas responsive Putting -moz-available and -webkit-fill-available in one width (css property) Bootstrap 3 - Responsive mp4-video Change hover color on a button with Bootstrap customization iOS 8 removed "minimal-ui" viewport property, are there other "soft fullscreen" solutions? Bootstrap full responsive navbar with logo or brand name text Bootstrap 3 truncate long text inside rows of a table in a responsive way Responsive Bootstrap Jumbotron Background Image

Examples related to fullscreen

Make div 100% Width of Browser Window How to show imageView full screen on imageView click? Embed youtube videos that play in fullscreen automatically How to hide navigation bar permanently in android activity? Video 100% width and height How to open a web page automatically in full screen mode Full-screen responsive background image JFrame in full screen Java How to set maximum fullscreen in vmware? Chrome Fullscreen API

Examples related to zurb-foundation

"Uncaught TypeError: a.indexOf is not a function" error when opening new foundation project Full-screen responsive background image Responsive font size in CSS remove borders around html input