SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict BransonPro's Avatar
    Join Date
    Nov 2008
    Location
    Branson, Missouri
    Posts
    287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need Help Setting A Background Image As Fixed Position

    Hi.

    I am working on a project and the CSS is giving me some trouble.

    I have a background image that I want to be used as fixed-positon.

    The image size is 1004 x 1031.

    I used the following code in my CSS:

    Code:
    #wrapper {
    	width: 966px;
    	margin: 0 auto;
    	padding-left: 38px;
    
    	
    }
    body {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	margin: 0 auto;
    	padding: 0px;
    	color:#FFFFFF;
        background-image:url(bg.jpg);
    	background-position:center top;
    	background-attachment:fixed;
    	background-color:#000000;
    }
    BUT... my problem is that it is not displaying all of the iamge in the web page background. It only shows about half of the actual background image size.

    If anyone has any insight or can tell me what I am doing wrong, I would greatly appreciate it.

    Thanks in advance for the help!

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry if this sounds too basic, but would you be able to post the rest of your HTML code? Perhaps just a sample page?

    Just a few days ago, I've worked on page backgrounds, and while I was building and testing the bare-bones "master" page, not everything was displaying, because I didn't have enough content to fill out the page.

    Sounds silly, I know. If you feel up to it, post a simple example page somewhere, or at least paste your code and attach the background image here, that might help others replicate and troubleshoot the issue.

    ;-)

  3. #3
    SitePoint Addict BransonPro's Avatar
    Join Date
    Nov 2008
    Location
    Branson, Missouri
    Posts
    287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by webgyver View Post
    Sorry if this sounds too basic, but would you be able to post the rest of your HTML code? Perhaps just a sample page?

    Just a few days ago, I've worked on page backgrounds, and while I was building and testing the bare-bones "master" page, not everything was displaying, because I didn't have enough content to fill out the page.

    Sounds silly, I know. If you feel up to it, post a simple example page somewhere, or at least paste your code and attach the background image here, that might help others replicate and troubleshoot the issue.

    ;-)
    Sure Here is the link of the page I am working on: http://www.thebransonpro.com/justone

    And the backgournd image is: http://www.thebransonpro.com/justone/bg.jpg

    You can see when you view the image that it is not showing the full image length in the actual webpage background.

    Thanks for your advice!

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BransonPro View Post
    ... my problem is that it is not displaying all of the iamge in the web page background. It only shows about half of the actual background image size.
    Hi,
    It is only going to show the portion of the image that fits in the viewport when it is set as fixed.

    You would need a viewport height that is as tall as the image to see it all. And then you might have to set a min-height on the body if the page contents were not as tall as the image.

  5. #5
    SitePoint Addict BransonPro's Avatar
    Join Date
    Nov 2008
    Location
    Branson, Missouri
    Posts
    287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    Hi,
    It is only going to show the portion of the image that fits in the viewport when it is set as fixed.

    You would need a viewport height that is as tall as the image to see it all. And then you might have to set a min-height on the body if the page contents were not as tall as the image.
    Thanks, Rayzur. I know this might be a stupid question... But can you give me a code example of how to achieve this?

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I'll give you an example but your viewport must be as tall as the image to see it work.


    Code:
    body {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        margin:0;
        padding:0;
        color:#FFF;
        background:#000 url(bg.jpg) no-repeat 50% 0 fixed;
        min-height:1031px; /*same as image height*/
    }
    
    #wrapper {
        width: 966px;
        margin: 0 auto;
        padding-left: 38px;
    }

  7. #7
    SitePoint Addict BransonPro's Avatar
    Join Date
    Nov 2008
    Location
    Branson, Missouri
    Posts
    287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    Yeah, I'll give you an example but your viewport must be as tall as the image to see it work.


    Code:
    body {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        margin:0;
        padding:0;
        color:#FFF;
        background:#000 url(bg.jpg) no-repeat 50% 0 fixed;
        min-height:1031px; /*same as image height*/
    }
    
    #wrapper {
        width: 966px;
        margin: 0 auto;
        padding-left: 38px;
    }
    Thanks for the code example. But I still don't understand what I am doing wrong when it comes to setting the viewport height

    I tried making the #wrapper hieght 100% or >1031px.. But it's still not showing me the correct image size.

  8. #8
    SitePoint Addict BransonPro's Avatar
    Join Date
    Nov 2008
    Location
    Branson, Missouri
    Posts
    287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops Sorry for being ignorant! I finally got it. Thanks for your help, guys!


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
  •