1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

CSS3 Fullscreen Background Image

Discussion in 'Gimp Tips & Tutorials' started by mikethedj4, May 11, 2011.

  1. mikethedj4

    mikethedj4 Member

    Joined:
    Nov 13, 2010
    Messages:
    594
    Likes Received:
    1
    Trophy Points:
    16
    Gender:
    Male
    Occupation:
    Web UI/UX Designer, Enginner, and Personal Trainer
    Location:
    Rockford, IL
    Home Page:
    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:
    <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>
     

    Attached Files:

Share This Page