CSS3 Fullscreen Background Image

11 posts Page 1 of 2
Contributors
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

CSS3 Fullscreen Background Image
mikethedj4
Well I decided I would give the new size property in CSS3 a try, and I found this image on deviantART, and thought it's be perfect to use.

CSS3 has a bunch of new abilities, but the one we're gonna get into today is the size property.

Just like when you add a background color (background-color:#F00;) changing the size of the background image is almost exactly the same, all you do is add background-size:200px 400px; the 200px represents the width, and the 400px represents the height. So if you want it to be fullscreen you would add 100% to the width, and height.

So as our background we'd apply it to our body, and this is our full code.
Code: Select all
<html>
<head>
<title>Fullscreen BG Image</title>
<style type="text/css">
body {
	background:url('http://www.deviantart.com/download/101490790/Aurora_Borealis__Wallpaper_by_titusboy25.jpg');
	background-size:100% 100%;}
<style>
</head>
<body>
	
</body>
</html>
Last edited by mikethedj4 on Fri Jul 08, 2011 6:59 am, edited 2 times in total.
User avatar
smashapps
Coding Guru
Coding Guru
Posts: 961
Joined: Tue Apr 05, 2011 8:41 am

Short and easy tutorial.

Easy but handy for many thanks Mike :)
My name is Tom | Visit my blog where I post new content every day! Tom's Daily Blog | MineCraft is awesome!
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

No problem :)
User avatar
Napster1488
VIP - Donator
VIP - Donator
Posts: 524
Joined: Fri Jan 07, 2011 8:41 pm

Doesnt works for me.
I can see only a little bit from the Picture on the Top of the Site.
YouTube Downloader v3.0
Image
Image
Image
User avatar
Danny
VIP - Donator
VIP - Donator
Posts: 621
Joined: Sat Oct 30, 2010 8:21 pm

Re: CSS3 Fullscreen Background Image
Danny
Napster1488 wrote:
Doesnt works for me.
I can see only a little bit from the Picture on the Top of the Site.
me on the bottom
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

What browser are you using???
User avatar
Danny
VIP - Donator
VIP - Donator
Posts: 621
Joined: Sat Oct 30, 2010 8:21 pm

Re: CSS3 Fullscreen Background Image
Danny
google chrome
User avatar
Axel
Coding God
Coding God
Posts: 1928
Joined: Sun Jun 27, 2010 9:15 pm

Re: CSS3 Fullscreen Background Image
Axel
if you're using an ancient version of google chrome , update it because CSS3 is kinda new
http://vagex.com/?ref=25000
User avatar
Napster1488
VIP - Donator
VIP - Donator
Posts: 524
Joined: Fri Jan 07, 2011 8:41 pm

I am using Newest FireFox.
YouTube Downloader v3.0
Image
Image
Image
User avatar
Danny
VIP - Donator
VIP - Donator
Posts: 621
Joined: Sat Oct 30, 2010 8:21 pm

Re: CSS3 Fullscreen Background Image
Danny
chrome updat his self right?
11 posts Page 1 of 2
Return to “Tutorials”