William Jiang

JavaScript,PHP,Node,Perl,LAMP Web Developer – http://williamjxj.com; https://github.com/williamjxj?tab=repositories

CSS: Full Screen Background

CSS: Full Screen Background

Here is a useful information for ‘Full Screen Background’ setup when I use WordPress Foxy template to customize a photography webpage. I put here for quick retrieving:

With background-size, you can tell an element how large its background image must be. Like this:

#elem{
 background:url(background.jpg) center center no-repeat;
 background-size:100px 150px;
}

But even more convenient, this property supports two magical values: contain and cover:

  • Contain resizes the background image so that it fits entirely in the element;
  • Cover is more interesting – it makes so that the element’s background is entirely taken up by the image. The image is resized to the smallest size that allows it to cover the element entirely (see the illustration below). This is also the property we will be using for our full screen background.

So with the 2 magical values, we can customize an image as a full-screen background to the html element:

html {
    min-height: 100%;
    background-size: cover;
    background-image: url(background.jpg);
    background-repeat: no-repeat;
    background-position: center center;
}
/* Workaround for some mobile browsers */
body{
    min-height:100%;
}

Before using the image, remember to use Photoshop or Illustrator to adjust JPEG to generate a suitable background image (width and height percentage, opacity etc).

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: