CODEWITHSUNDEEP
htmlcssresponsive-design
Sheikh Naveed
Sheikh Naveed

Reputation: 325

How to have screen height background image

I want to have a responsive screen height background image as shown in this site http://www.flavorplate.com/. I did research on google and github on that technique but wasn't able to find anything.

Upvotes: 0

Views: 367

Answers (2)

mrdev
mrdev

Reputation: 53

Basically you can do something like this: 

<div class="bg-image">
      <!-- Featured Content absolute -->
</div> 


<div class="content-wrap">
     <!-- More Content -->
</div>



html { 
height:100%;
}

body {
height: 100%; 
}

.bg-image {
background: url(../img/background.jpg) no-repeat center center scroll; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

height: 100%; 
}


.content-wrap {
heigth: auto; 
min-height: 600px; 

}

For conditional loading of background-images, you have to use media queries or/and javascript or a plugin like this: https://github.com/M6Web/picturefill-background

Upvotes: 1

Pouya Ataei
Pouya Ataei

Reputation: 2169

Well, it's incredibly easy, try this: 

background: url(../IMAGES/background.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

/* For mobile devices */
@media only screen and (max-width: 767px) {
/* The file size of this background image is 93% smaller
 * to improve page load speed on mobile internet connections */
    background: url(images/background-photo-mobile-devices.jpg);
  }
}

You want some more comprehensive Ideas?!! check this out;

Background Full

Upvotes: 0

Related Questions