Post Reply 

CSS3 Fullscreen Background Image

May 11, 2011, 10:52
Post: #1
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.

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 File(s)
.zip  fullscreenbgimagecss3.zip (Size: 519 bytes / Downloads: 474)

[Image: gimppimp_forum_sig_by_mikethedj4-d39msp7.png]
Visit this user's website Find all posts by this user
Quote this message in a reply
May 13, 2011, 07:30
Post: #2
RE: CSS3 Fullscreen Background Image
Hey thanks buddy but there was a bit problem I don't know where should I paste this code...???
Find all posts by this user
Quote this message in a reply
May 15, 2011, 02:25
Post: #3
RE: CSS3 Fullscreen Background Image
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.

[Image: gimppimp_forum_sig_by_mikethedj4-d39msp7.png]
Visit this user's website Find all posts by this user
Quote this message in a reply
May 16, 2011, 21:46
Post: #4
RE: CSS3 Fullscreen Background Image
thanks for this.
Find all posts by this user
Quote this message in a reply
May 18, 2011, 02:53
Post: #5
RE: CSS3 Fullscreen Background Image
No problem

[Image: gimppimp_forum_sig_by_mikethedj4-d39msp7.png]
Visit this user's website Find all posts by this user
Quote this message in a reply
Post Reply 


Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  Why is my image not looking as good on the web page as it does in Gimp? ofnuts 0 43 Nov 21, 2014 13:01
Last Post: ofnuts
  GIMP Tutorial - Design a Twitter Header Image MikeDaviesDMD 2 89 Nov 9, 2014 03:19
Last Post: MikeDaviesDMD
  Gimp Tutorial: Add Logo to an Image MikeDaviesDMD 4 857 Sep 16, 2014 13:02
Last Post: rich2005
  Proper subject extraction, background removal, and background painting ofnuts 19 13,524 Jul 20, 2014 19:39
Last Post: Esper
  Pros and cons of various image formats ofnuts 13 8,794 Jul 17, 2014 07:47
Last Post: ofnuts

Forum Jump:


GIMP ForumPortalArchiveContactTermsRSS