CSS Perfect Full Screen Image Background

css perfect full screen image background

This post from CSS-tricks.com covers different techniques for full screen background images and includes a fall-back for old versions of IE (I haven't tested the IE fix).

When I don't need to worry about supporting old browsers, I generally use the CSS3 method:

html { 
    background: url(http://lorempixum.com/1440/900/sports)
        no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Full-screen responsive background image

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

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

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

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

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

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

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

});

CSS full screen background image size

Please try this css code.

body, 
 html{
min-height:100%; 
} 
body {
background-image:url(Beautiful-White-Horse.jpg);
background-repeat:no-repeat;
background-size:cover;
}

Background image cover whole screen

If you prefer not to have all your sub pages to show the homepage background, you can do this:

html {
    height: 100%;
}
body {
    min-height: 100%;
}

body.home {
    background: url(/wp-content/uploads/2015/03/achtergrond2.jpg) no-repeat center center fixed;
    background-size: cover;
}

You can safely drop all the prefix, no problem for any modern browser.

CSS: stretching background image to 100% width and height of screen?

You need to set the height of html to 100%

body {
    background-image:url("../images/myImage.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
html {
    height: 100%
}

http://jsfiddle.net/8XUjP/

Full screen image that scales

There are several options. Choose which one suits you best.

If you want the image to be all visible and to fill all of the background, use background-size:100vw 100vh or 100% 100%.

Note: This will distort the image if it's not the same shape as the window.
```
    html {

      height:100%;

      background:#CCC url(http://lorempixel.com/g/500/500) center no-repeat;

      background-size:100vw 100vh;

    }
```
What's the best way to add a full screen background image in React Native
You can use flex: 1 styling on an <Image> element to have it fill the whole screen. You can then use one of the Image resize modes to have the image completely fill the element:
```
<Image source={require('image!egg')} style={styles.backgroundImage} />
```
Style:
```
import React from 'react-native';

let { StyleSheet } = React;

let styles = StyleSheet.create({
  backgroundImage: {
    flex: 1,
    resizeMode: 'cover', // or 'stretch'
  }
});
```
I'm pretty sure you can get rid of the <View> wrapping your image and this will work.

Full Screen Background Image Is Stretched
You should really look into the background size property instead of using fixed images. Using 'cover' for background-size, means that the image should grow or shrink just enough to cover the whole background.
If you know the dimensions of the image. You can use a media query to change the background-size to 'auto' when it would otherwise grow beyond it's original size.
```
html, body {
    min-height: 100%;
}
body {
    background-image: url(http://leydenlewis.com/images/LANDING_PAGE.jpg);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: cover;
}
@media (min-width: 1120px), (min-height: 630px) {
    body { background-size: auto; }
}
```
Related Topics

What Is the Different Between Clearfix Hack and Overflow:Hidden VS Overflow:Auto
Angular 2 Animation VS CSS Animation - When to Use What
Bootstrap 4, Bg-Inverse Not Showing
CSS Calc - Round Down with Two Decimal Cases
CSS Page Headers - How to Use Print Margins
Pure CSS Star Shape
How to Use Fontawesome in Chrome Extension
Overlapping Circles Bleeding
Border-Radius Bleeding
Combined Multiple Classes into One CSS Rule
Change Font Size in Vuetify Based on Viewport
How to Change Svg Fill Color When Used as Base-64 Background Image Data
How to Turn Off SASS Rgb -> Color Name
Internet Explorer Box Model - What Is Offset
Center Align Position Absolute Object Horizontally
Applying a Single Background Gradient to a Table Row
Show :After When Hovering Over the Parent Element via CSS
How to Prevent Child's Content from Stretching Parent's Width
Leave a reply

Submit