May 21, 2012, 05:57:39 PM
Pages: [1]   Go Down
  Send this topic  |  Print  
Share this topic on FacebookShare this topic on DiggShare this topic on RedditShare this topic on StumbleUponShare this topic on Twitter Topic: CSS3 Fullscreen Background Image  (Read 385 times)
0 Members and 1 Guest are viewing this topic.
mikethedj4
Full Member
Resident Badass
*****

Reputation: +9/-1
Offline Offline

Posts: 548


Train Insane or Remain The Same


View Profile WWW
« on: May 11, 2011, 04:53:28 AM »

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>

* fullscreenbgimagecss3.zip (0.51 KB - downloaded 0 times.)
Logged







B.SkiLLs
Xtreme Administrator
Resident Badass
*****

Reputation: +56/-0
Offline Offline

Posts: 2365



View Profile WWW
« Reply #1 on: May 12, 2011, 10:17:02 PM »

 yay thumbs up
Logged




Pages: [1]   Go Up
  Send this topic  |  Print  
 
Jump to: