Back To Website Design Forum

Full Screen Background with CSS

  • zaiah
  • Proficient
  • Proficient
  • No Avatar
  • Joined: Dec 15, 2007
  • Posts: 375
  • Status: Offline

Post April 6th, 2011, 11:09 pm

Greetings Group,

I am attempting to build a website similar to http://www.park14.com/index1.html . But I dont want to use any Flash. I would prefer to create something that used a CSS full screen background. Plus have the main body be center vertically and horizontally. Is this possible. Adding javascript could be a possible but no Flash. If someone knows of some good up to date tutors please forward links. I would greatly appreciate it.

Zaiah
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post April 6th, 2011, 11:09 pm

  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post April 7th, 2011, 3:52 am

What they are doing there is not quite a background that stretches though ... If you look carefully you will notice that the background is tiled and 4 corners are overlayed to give the shadow effect. This should be pretty simple to do actually.

Your HTML should look like follows:
HTML Code: [ Select ]
...
<body>
 <div id="topleft"></div>
 <div id="topright"></div>
 <div id="bottomleft"></div>
 <div id="bottomright"></div>
</body>
...
  1. ...
  2. <body>
  3.  <div id="topleft"></div>
  4.  <div id="topright"></div>
  5.  <div id="bottomleft"></div>
  6.  <div id="bottomright"></div>
  7. </body>
  8. ...


Your CSS would look like follows:
CSS Code: [ Select ]
body{
background-image:url(/images/repeating_background.jpg);
}
div#topleft{
position:absolute;
top:0;
left:0;
background-image:url(/images/topleft.png);
width:100px;
height:100px;
}
div#topright{
position:absolute;
top:0;
right:0;
background-image:url(/images/topright.png);
width:100px;
height:100px;
}
div#bottomleft{
position:absolute;
bottom:0;
left:0;
background-image:url(/images/bottomleft.png);
width:100px;
height:100px;
}
div#bottomright{
position:absolute;
bottom:0;
right:0;
background-image:url(/images/bottomright.png);
width:100px;
height:100px;
}
  1. body{
  2. background-image:url(/images/repeating_background.jpg);
  3. }
  4. div#topleft{
  5. position:absolute;
  6. top:0;
  7. left:0;
  8. background-image:url(/images/topleft.png);
  9. width:100px;
  10. height:100px;
  11. }
  12. div#topright{
  13. position:absolute;
  14. top:0;
  15. right:0;
  16. background-image:url(/images/topright.png);
  17. width:100px;
  18. height:100px;
  19. }
  20. div#bottomleft{
  21. position:absolute;
  22. bottom:0;
  23. left:0;
  24. background-image:url(/images/bottomleft.png);
  25. width:100px;
  26. height:100px;
  27. }
  28. div#bottomright{
  29. position:absolute;
  30. bottom:0;
  31. right:0;
  32. background-image:url(/images/bottomright.png);
  33. width:100px;
  34. height:100px;
  35. }
Let's leave all our *plum* where it is and go live in the jungle ...
  • SteelyDanFan
  • Born
  • Born
  • User avatar
  • Joined: Sep 23, 2008
  • Posts: 2
  • Status: Offline

Post April 7th, 2011, 6:45 pm

If I understand you correctly you are wanting a static image that fills the browser window regardless of the aspect ratio of the user's screen. You also want the content to "float" in the center. I faced the same challenge about 3 to 6 months ago. Assuming that is your objective I recommend immediately after the body tag you load the image that will "act" like the background image but only because CSS code is telling it to stretch and fall in behind your other content. Mine looks like this:

HTML Code: [ Select ]
<img src="images/background.jpg" alt="background image" id="bg" />


And the CSS looks like this:

CSS Code: [ Select ]
img#bg
{  position:fixed;
   top:0;
   left:0;
   width:100%;
   height:100%;
   z-index: -1;
}
  1. img#bg
  2. {  position:fixed;
  3.    top:0;
  4.    left:0;
  5.    width:100%;
  6.    height:100%;
  7.    z-index: -1;
  8. }


If done correctly the image automatically adjusts width and height while the content floats in the center.
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post April 8th, 2011, 4:00 pm

CSS Code: [ Select ]
body {
    background: #000000 url('dir/img.jpg') fixed no-repeat center center;
}
 
.content {
    width: 80%;
    margin: 0 50%;
}
  1. body {
  2.     background: #000000 url('dir/img.jpg') fixed no-repeat center center;
  3. }
  4.  
  5. .content {
  6.     width: 80%;
  7.     margin: 0 50%;
  8. }
HTML Code: [ Select ]
<body>
    <div class="content">
        <p>Content</p>
    </div>
</body>
  1. <body>
  2.     <div class="content">
  3.         <p>Content</p>
  4.     </div>
  5. </body>
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • zaiah
  • Proficient
  • Proficient
  • No Avatar
  • Joined: Dec 15, 2007
  • Posts: 375
  • Status: Offline

Post April 9th, 2011, 1:52 am

Thanks Righteous. I see what you mean about the 4 corners now.

I found what I want to do here: http://css-tricks.com/examples/ImageToBackgroundImage/ and I've been working with a template that provided the rest of the style I'm looking for. The problem now is merging the two. I've gone round and round with this for hours. And I can seem to get these couple lines of html and CSS do what I need them to!!!
here's the code that works perfectly-

HTML
Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Scaling Background</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body id="page-body">
  <img id="background-img" class="bg" src="../images/bg.jpg" alt="" />
</body>

</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <title>Scaling Background</title>
  6.     
  7.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  8.     
  9.     <link rel="stylesheet" type="text/css" href="style.css" />
  11. </head>
  13. <body id="page-body">
  14.   <img id="background-img" class="bg" src="../images/bg.jpg" alt="" />
  15. </body>
  17. </html>



CSS
Code: [ Select ]
* {
    margin: 0;
    padding: 0;
}

body {
    font-size: 62.5%;
    font-family: Georgia, serif;
    overflow: hidden;
}

.bg {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5000;
}
  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  6. body {
  7.     font-size: 62.5%;
  8.     font-family: Georgia, serif;
  9.     overflow: hidden;
  10. }
  12. .bg {
  13.     width: 100%;
  14.     position: absolute;
  15.     top: 0;
  16.     left: 0;
  17.     z-index: 5000;
  18. }

This HTML and CSS do exactly what I want it to.
However I'm trying to add this style of background to a template. And I cant seem to figure how to change the CSS and HTML to give it the desired look.

Here's where I think the problem is-

TEMPLATE HTML
Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to One Sports Lounge</title>
<link rel="stylesheet" href="style/reset.css" />
<link rel="stylesheet" href="style/style.css" />
<link rel="stylesheet" href="style/nivo-slider.css" />
<script type="text/javascript" charset="utf-8" src="js/jquery-1.3.2.min.js" ></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.cycle.all.2.72.js" ></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.galleriffic.js" ></script>
<script type="text/javascript" charset="utf-8" src="js/cufon-yui.js" ></script>
<script type="text/javascript" charset="utf-8" src="js/titillium.font.js" ></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.nivo.slider.pack.js" ></script>
<script type="text/javascript" charset="utf-8" src="js/boutique.js" ></script>
</head>
<body>...
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Welcome to One Sports Lounge</title>
  6. <link rel="stylesheet" href="style/reset.css" />
  7. <link rel="stylesheet" href="style/style.css" />
  8. <link rel="stylesheet" href="style/nivo-slider.css" />
  9. <script type="text/javascript" charset="utf-8" src="js/jquery-1.3.2.min.js" ></script>
  10. <script type="text/javascript" charset="utf-8" src="js/jquery.cycle.all.2.72.js" ></script>
  11. <script type="text/javascript" charset="utf-8" src="js/jquery.galleriffic.js" ></script>
  12. <script type="text/javascript" charset="utf-8" src="js/cufon-yui.js" ></script>
  13. <script type="text/javascript" charset="utf-8" src="js/titillium.font.js" ></script>
  14. <script type="text/javascript" charset="utf-8" src="js/jquery.nivo.slider.pack.js" ></script>
  15. <script type="text/javascript" charset="utf-8" src="js/boutique.js" ></script>
  16. </head>
  17. <body>...


TEMPLATE CSS
Code: [ Select ]
html {
    height: 100%;    
}
body {
    background: #fff url(../images/bg.jpg) top center repeat-x;
    color: #222;
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif;
    height: 100%;
}
  1. html {
  2.     height: 100%;    
  3. }
  4. body {
  5.     background: #fff url(../images/bg.jpg) top center repeat-x;
  6.     color: #222;
  7.     font-family: 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif;
  8.     height: 100%;
  9. }


Any help on this would be greatly appreciated. If I cant get the look I want I will settle for the other. :)
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post April 11th, 2011, 1:25 am

What exactly is the problem that you are experiencing?
Let's leave all our *plum* where it is and go live in the jungle ...
  • zaiah
  • Proficient
  • Proficient
  • No Avatar
  • Joined: Dec 15, 2007
  • Posts: 375
  • Status: Offline

Post April 11th, 2011, 8:43 am

well to be honest a little over_me_headism.:)
seriously. i want the background of the site to scale in proportion to the window. similar to this http://css-tricks.com/examples/ImageToBackgroundImage/

I can't get the CSS to work in the site I'm attempting to build. Every time I replace what is currently there the background is blank.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post April 11th, 2011, 11:10 pm

There's no link for me to see exactly what is happening, try the following two things:
Make sure that the image exists on the server and that the path is correct.
Download FireBug for FireFox and right-click on the body and select "Inspect" and see if that helps you out (a little debugger sort-of thing).
Let's leave all our *plum* where it is and go live in the jungle ...
  • zaiah
  • Proficient
  • Proficient
  • No Avatar
  • Joined: Dec 15, 2007
  • Posts: 375
  • Status: Offline

Post April 11th, 2011, 11:47 pm

thanks
i'm going to host it.
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Joined: Jul 11, 2005
  • Posts: 1828
  • Loc: In the Great White North
  • Status: Offline

Post April 13th, 2011, 12:36 pm

Hey Zaiah good to see you around here again (not that I should talk, I've been a bit MIA myself lately). Did you get everything figured out?

If not I would recommend trying to combine the css files into a single one. That way you can find things that override each other and specify the order you think they should be overridden. My guess is that you have two declarations for the same class name and thats killing it. Just remember that css is read from top to bottom so .bg {} at the bottom of the document will override the same attributes in .bg{} at the top of the file.

If that doesn't clear it up can you post a link? Its a lot easier to trace what's going on if I can use something like firebug.
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post April 13th, 2011, 11:10 pm

graphixboy wrote:
If that doesn't clear it up can you post a link? Its a lot easier to trace what's going on if I can use something like firebug.

QFT
Let's leave all our *plum* where it is and go live in the jungle ...
  • zaiah
  • Proficient
  • Proficient
  • No Avatar
  • Joined: Dec 15, 2007
  • Posts: 375
  • Status: Offline

Post April 28th, 2011, 8:18 pm

Hey guys. I hope you are still willing to help a poor soul out. Can I say that I truly have a passion for webdesign. I think I just get flustered and loose confidence at times. ANYHOW....heres the link of the hosted site- http://
http://isaiahmerriweather.com/ONE/index.html

Couple issues I cant understand.
I gave up on the whole scaling background just for the sake of getting it up and now I cant see the bg at all unless I view in IE. SMH. Secondly I would like it to scale to the page if possible similar to this page- http://css-tricks.com/examples/ImageToBackgroundImage/ if possible. I know I can do this. I'm just overlooking something. Thirdly, in FF, the navigation is pushed down really far. The entire page should display above the fold. This occurs in Opera, Safari, IE and Chrome.

And I have more projects I'd love to knock out. With that being said, can anyone direct me to some really good tutors? I havent done this in sooooo freaking long. I think I need to start from scratch. Also HTML5 and CSS3? Would it be a better use of time to start learning those than learning older technology? Any help is greatly appreciated. Thanks much.

P.S. There is navigation below the slider image gallery. Its white however and you cant see it on white background.

Also...the client wants the background of the content box to be transparent so you can see the lovely damask bg. Is there a good solution for this in IE? Here's the bg- http://isaiahmerriweather.com/ONE/images/bg.jpg
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post April 28th, 2011, 8:55 pm

HTML Code: [ Select ]
<html>
    <head>
        <title>Zaiah Page</title>
        <style language="text/css">
        .bg {
            top: 0;
            left: 0;
            width: 100%;
            z-index: 5000;
            position: absolute;
        }
       
        .content {
            top: 200px;
            left: 0px;
            width: 100%;
            color: white;
            z-index: 6000;
            font-size: 18px;
            position: relative;
            text-align: center;
            padding: 20px 0 20px 0;
        }
        </style>
    </head>
    <body>
        <img src="bg.jpg" class="bg" alt="" />
        <div class="content">
            <p>Hello world!</p>
        </div>
    </body>
</html>
  1. <html>
  2.     <head>
  3.         <title>Zaiah Page</title>
  4.         <style language="text/css">
  5.         .bg {
  6.             top: 0;
  7.             left: 0;
  8.             width: 100%;
  9.             z-index: 5000;
  10.             position: absolute;
  11.         }
  12.        
  13.         .content {
  14.             top: 200px;
  15.             left: 0px;
  16.             width: 100%;
  17.             color: white;
  18.             z-index: 6000;
  19.             font-size: 18px;
  20.             position: relative;
  21.             text-align: center;
  22.             padding: 20px 0 20px 0;
  23.         }
  24.         </style>
  25.     </head>
  26.     <body>
  27.         <img src="bg.jpg" class="bg" alt="" />
  28.         <div class="content">
  29.             <p>Hello world!</p>
  30.         </div>
  31.     </body>
  32. </html>


That is if the bg.jpg is in the same folder... I'm sure you can figure out how to use that code to your liking.
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • zaiah
  • Proficient
  • Proficient
  • No Avatar
  • Joined: Dec 15, 2007
  • Posts: 375
  • Status: Offline

Post April 28th, 2011, 10:28 pm

I am very appreciative of the help. Thanks guys. I actually used a combination of the two suggestions.

http://isaiahmerriweather.com/ONE/index.html

However...lol...now it does something really funky in IE where the nav is alongside the slider gallery. I personally dont use IE, but a lot of old people do. lol. any suggestions?
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post April 28th, 2011, 10:53 pm

What is it doing in IE? It looks exactly the same in IE as it is in Firefox to me... try clearing the cache.


I'm using IE8
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post April 28th, 2011, 10:53 pm

1, 2

Post Information

  • Total Posts in this topic: 16 posts
  • Users browsing this forum: No registered users and 68 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.