Comments on: Quick Tip – Make a Full Screen Image Background With a Line of CSS

By: Joeb

Joeb — Sat, 27 Apr 2013 12:03:29 +0000

It doesn't seem to work with Internet Explorer 10

By: Adam

Adam — Sat, 30 Mar 2013 12:02:09 +0000

I changed your code a little bit and it works better for me. :)

html{
	/* This image will be displayed fullscreen */
	background:url('name.jpg') no-repeat fixed;

	/* Ensure the html element always takes up the full height of the browser window */
	min-height:100%;

	/* The Magic */
	background-size:cover;
}

and

body{  
	text-align: center;  
	/* Workaround for some mobile browsers */
	min-height:100%;
}

By: saxstl

saxstl — Mon, 28 Jan 2013 19:31:45 +0000

Martin,

Could you explain why "cover" cuts off the edges of the picture used? (is this b/c it zooms to fill the screen height which would cut off the full width)

I would imagine that the sign on the post of this image may be the important part of the overall image.

How would you keep the image width intact so that this does not happen?

What is your best advice for implementing this on a mobile/app site?

By: loumi

loumi — Wed, 28 Nov 2012 09:34:09 +0000

IE8 is not support

By: Nic Johnson

Nic Johnson — Wed, 07 Nov 2012 11:19:39 +0000

You can't, as a professional web designer ignore IE8. It's a full 20% of my user base. Not just hospitals and schools, but anyone still using XP, anyone who doesn't care about getting the latest software. I try to make websites look good for as many people as possible because I want to make money from them. Of course there's a cutoff, but it's IE6, not IE8.

By: e11world

e11world — Tue, 28 Aug 2012 22:45:19 +0000

Excellent fix!
It works in IE7, IE8, and IE9 just tested it.

By: Kenan

Kenan — Mon, 13 Aug 2012 19:35:01 +0000

Can this approach be used on divs... im on phone cant test right now :)

By: guna

guna — Fri, 10 Aug 2012 09:58:41 +0000

great article..this make me understand completely about background-size. it's really help us..no more over sized cropped background with photoshop.. justmake a good resolution background and the script do the rest.

By: David

David — Fri, 10 Aug 2012 08:40:16 +0000

Thanks for the great tutorial. It helps to start with it.
One question: How can I place a text in front of the image, before blured background?

Thanks for your help.

By: cgvector

cgvector — Tue, 07 Aug 2012 04:26:33 +0000

Very simple code. i really love this before this i do like
but this trik is amazing..