CSS3 Fullscreen Background Image
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.
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.
Short and easy tutorial.
Easy but handy for many thanks Mike
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!
Doesnt works for me.
I can see only a little bit from the Picture on the Top of the Site.
I can see only a little bit from the Picture on the Top of the Site.
Napster1488 wrote:Doesnt works for me.me on the bottom
I can see only a little bit from the Picture on the Top of the Site.
if you're using an ancient version of google chrome , update it because CSS3 is kinda new
Copyright Information
Copyright © Codenstuff.com 2020 - 2023