CSS3 Fullscreen Background Image

mikethedj4 · May 11, 2011, 10:52

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>

AliciaWitt · May 13, 2011, 07:30

Hey thanks buddy but there was a bit problem I don't know where should I paste this code...???

mikethedj4 · May 15, 2011, 02:25

This whole code goes into your .html document, mainly the index.html file. The CSS will go int your style tags (aka stylesheet) or the style.css file if you have that.

missmacabresass · May 16, 2011, 21:46

thanks for this.

mikethedj4 · May 18, 2011, 02:53

No problem

Possibly Related Threads...
Thread:		Author	Replies:	Views:	Last Post
	transparent background	musicstuff	3	781	Jan 28, 2013 15:22 Last Post: Majik Imaje
	Need to Change Background Colour	srinirex	1	391	Dec 21, 2012 08:52 Last Post: ofnuts
	Exporting Elliptical/Round Selections WITHOUT Transparent Background Boxes	dsvendse	0	235	Dec 19, 2012 07:19 Last Post: dsvendse
	Proper subject extraction, background removal, and background painting	ofnuts	5	4,241	Oct 5, 2012 20:22 Last Post: 2backbar
	Pros and cons of various image formats	ofnuts	4	4,085	Oct 3, 2012 06:47 Last Post: RedHeeler625