Full Screen Background with CSS

  • zaiah
  • Proficient
  • Proficient
  • zaiah
  • Posts: 375

Post 3+ Months Ago

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
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

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. }
  • SteelyDanFan
  • Born
  • Born
  • User avatar
  • Posts: 2

Post 3+ Months Ago

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
  • Genius
  • Genius
  • Bogey
  • Posts: 8399
  • Loc: USA

Post 3+ Months Ago

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>
  • zaiah
  • Proficient
  • Proficient
  • zaiah
  • Posts: 375

Post 3+ Months Ago

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">
  3. <head>
  4.     <title>Scaling Background</title>
  5.     
  6.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  7.     
  8.     <link rel="stylesheet" type="text/css" href="style.css" />
  9. </head>
  10. <body id="page-body">
  11.   <img id="background-img" class="bg" src="../images/bg.jpg" alt="" />
  12. </body>
  13. </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. }
  5. body {
  6.     font-size: 62.5%;
  7.     font-family: Georgia, serif;
  8.     overflow: hidden;
  9. }
  10. .bg {
  11.     width: 100%;
  12.     position: absolute;
  13.     top: 0;
  14.     left: 0;
  15.     z-index: 5000;
  16. }

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
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

What exactly is the problem that you are experiencing?
  • zaiah
  • Proficient
  • Proficient
  • zaiah
  • Posts: 375

Post 3+ Months Ago

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
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

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).
  • zaiah
  • Proficient
  • Proficient
  • zaiah
  • Posts: 375

Post 3+ Months Ago

thanks
i'm going to host it.
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

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.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

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
  • zaiah
  • Proficient
  • Proficient
  • zaiah
  • Posts: 375

Post 3+ Months Ago

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
  • Genius
  • Genius
  • Bogey
  • Posts: 8399
  • Loc: USA

Post 3+ Months Ago

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.
  • zaiah
  • Proficient
  • Proficient
  • zaiah
  • Posts: 375

Post 3+ Months Ago

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
  • Genius
  • Genius
  • Bogey
  • Posts: 8399
  • Loc: USA

Post 3+ Months Ago

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
  • zaiah
  • Proficient
  • Proficient
  • zaiah
  • Posts: 375

Post 3+ Months Ago

:( Looks like I'm still using IE7. smh. I HATE IE!!! But thanks again for your help.

Post Information

  • Total Posts in this topic: 16 posts
  • Users browsing this forum: No registered users and 57 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
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.