SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    help with background image

    I am trying to have an image be a background image.

    The image is 1024x768 and so it doesn't totally fit in the browser what do I need to add to my body {} so that it stays fixed within the browser window or what do I need to resize it to?

    Thanks for the help!

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    background-position: fixed;

    note that this will have no effect on Internet Explorer 5 or 6 unless it's attached to the body selector.

  3. #3
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have an example and the css for such a fixed background here:

    Nadia

  4. #4
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  5. #5
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Better take a look later tonight and see what's up with that - Thanks Rob!!

    Nadia

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nope it still doesnt work. the height is too large and it cuts off the bottom, here is the background image I am trying to use



    I need it so that it fits in the browser without any scrolling. There will only be pictures in teh center so there will never be any more content that will require scrolling.

    and im using FF2

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you post a link to the page (or the code for it) so we can see exactly what you are trying to do?

  8. #8
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    pp.php
    HTML Code:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    <title>Penniphoto</title>
    <body>
    <div id='content'>
    hey look it's content!
    </div>
    </body>
    </html>
    style.css
    Code:
    body 
    {
    background-image: url(bg_grad.jpg);
    background-repeat: no-repeat;
    }
    #content
    {
    	position:absolute;
    	top: 162px;
    	left: 3.9%;
    	right: 0%;
    	width:89.2%;
    	height:66.6%;
    	background-color: #392727;
    	color:#000000;
    }
    Basically that's all I have now because the fixed thing won't work. The bg_grad.jpg is the picture I posted in my above post. I want it so that it actually displays the whole background without any scrolling necessary. Test it out and you can see what I mean.

  9. #9
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, after playing around with this a little bit, I was able to come up with this.
    HTML Code:
    <!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>Penniphoto</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    
    * {
    	margin: 0;
    	padding: 0;
    }
    
    body  {
    	background: url('bg_grad.jpg') no-repeat top center fixed;
    }
    
    #content {
    	background: #392727;
    	color: #FFF;
    	height: 64%;
    	margin: 0 auto;
    	position: absolute;
    		top: 162px;
    		left: 0;
    		right: 0;
    	width: 80%;
    }
    </style>
    </head>
    <body>
    <div id="content">
    	<p>hey look it's content!</p>
    </div>
    </body>
    </html>
    Now, I realize that's not what you want, but it did point something out to me. You want the entire background to be able to expand and contract so that it always appears to be at 100% width and height, right?

    If so, it's going to require some non-semantic markup (necessary for CSS hooks), but it can be done. It'll be hard, but it can be done.

    Please let me know if I'm on the right track with my theory (rather than the example).

  10. #10
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want to centre your bg-image, I would've thought you'd just make its bg-position: center center. If you then want your content to be centred vertically and horizontally, you'd need to do something like this:

    http://garyblue.port5.com/webdev/vcenter.html
    http://garyblue.port5.com/webdev/vcenter-css.html
    http://www.jakpsatweb.cz/css/css-ver...-solution.html

  11. #11
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Basically I want the whole background picture to show up without having to scroll and make extra content to show the bottom part of the bg.

    If it would be easier for me to just try and resize the picture then I will do that.

    And thanks for all your help, you guys are awesome

  12. #12
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately a single background image on the body isn't going to do it.

    You're going to have to slice the image to make it work.

  13. #13
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i figured out what to do!

    Code:
    body
    {
    margin: 0;
    padding: 0;
    }
    .background
    {
    background-image: url(bg_grad.jpg);
    background-repeat: no-repeat;
    width:1024;
    height:768;
    }
    thanks for the help!

  14. #14
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That was one of the first things I did, but I didn't know if that was what you wanted, so I went to something else.

    Btw, you don't have to explicitly declare background-image and-background-repeat in your CSS. The simple background short-hand code will do:
    background: url('bg_grad.jpg') no-repeat;


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •