Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Position Content Below Background Image

    Hello,

    I'm having trouble positioning my table that holds the content. I have set up a background image to be fixed on the page. The background image has a red line at the top. The table that holds the content has a white background and is covering up part of the red line. I'm not sure how to fix it.

    Please let me know what css or html I could use to make the content table start below the red line.

    Here is the page:
    http://www.trendous.com/special/

    Thanks!

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Try adding this to your containing div:
    Code:
    <div align="center" style="margin-top: 68px;">
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    New Coder
    Join Date
    Jan 2009
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    that worked except when I scroll the page down it covers up the red line again.

    I already made the change so you can see what I'm talking about.
    http://www.trendous.com/special

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    It looks like you have a transparent background on it now so the issue isn't present. What exactly are you trying to accomplish? Do you want the text to scroll only between instances of the background's vertical repeat or something?
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #5
    New Coder
    Join Date
    Jan 2009
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Yes, I removed the white background on the table.

    I would like to make it so that when I scroll down the text disappears under the red line at the top.

  • #6
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by leroybobbins View Post
    Yes, I removed the white background on the table.

    I would like to make it so that when I scroll down the text disappears under the red line at the top.
    OK, I think I understand you now. Unless you add another red line that will never technically happen BUT we can give it that appearance, which should be just as good. Try this:
    Code:
    <div align="center" style="margin-top: 68px; overflow-y: scroll; height: 532px;">
    and this:
    Code:
    body         { background-image: url('http://www.trendous.com/special/images/trendous_bg4.jpg'); 
                   background-repeat: repeat-y; background-attachment: fixed; 
                   background-position: top center
                   margin:0; }
    Last edited by Rowsdower!; 05-07-2009 at 01:36 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    leroybobbins (05-08-2009)

  • #7
    New Coder
    Join Date
    Jan 2009
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I really appreciate your help with this.

    I implemented the code above. It works but it looks a little strange with 2 scroll bars.

    I also have another problem. The background image looks great on my computer screen but it doesn't look good on my other computer screen. Any recommendations?

  • #8
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    There's no workaround; you have to keep playing with it. You may need to export it differently, choose a different image, or even rethink your original idea. There will always be variation in the look from computer to computer. PCs show darker than Macs, fonts vary between platforms, and the designer knows that designs must be reviewed on as many machines as possible. You're not going for identical rendering, but acceptable variation.
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #9
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    This is very true. I'll also mention that if you use PNG format for images (I didn't check to see if you did, but sooner or later you are bound to) and if you want the image color to match a color in your HTML/CSS you will need to use PNGCrush to remove the "gamma" data. Some browsers use gamma correction for PNG images and some don't so the result is images matching web colors for some viewers and not for others. Right now this might not be very relevant but down the road it might save you some frustration in trying to match web colors to an image.

    If you don't need to match an image's color with a web hex code color in the CSS (e.g. background-color:#334256;) then you absolutely do not need to worry about gamma correction issues.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Posting Permissions

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