background image dont repeat + other stuff

Discussion in 'CSS' started by Basti, Dec 20, 2008.

  1. #1
    Hey, all
    I currently try to code some html, and well it dont goes so well.

    problems i currently have are:

    1. iam using
    <td colspan=2 style="background: url(http://www.anachrony.net/test/images/rank_content.jpg) repeat-y; width: 604px; margin: 0; padding: 0 20px 0 15px;">
    
    Code (markup):
    for some text background

    See the repeat stuff?, well look here : http://www.anachrony.net/test/
    It aint stretch for some reason ( the big grey boxes ), it just continue with grey color instead of repeating the image. I have the exact code for a different page and there it works like it should

    2. the same image which dont repeat, as well dont have the right width for some reason, it should have.

    3. that page somehow dont accept code i place in a css file, i have to place everything in the html file, which defenetly make me crazy.

    4. All that looks horrible on IE6 ( dunno other browsers ), i currently only code for Firefox, but got no clue on how to make it work with IE or others.

    Thanks for any Help
    Seb
     
    Basti, Dec 20, 2008 IP
  2. katendarcy

    katendarcy Peon

    Messages:
    115
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #2
    To start, this: "url(http://www.anachrony.net/test/images/rank_content.jpg) repeat-y;" should be:
    "url('http://www.anachrony.net/test/images/rank_content.jpg') repeat-y;". (It's good to add the quote marks around the image file.)

    Second, I'm looking at the files locally, and the CSS seems to be working fine. (Changes I make to the file are recognized.) It seems like you have access to the files, so can you try using a relative path instead of the hard-coded url?
     
    katendarcy, Dec 20, 2008 IP
  3. katendarcy

    katendarcy Peon

    Messages:
    115
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Have you tried validating the page yet? When I ran it through the w3c validator, it returned several errors. One of these was that you're missing a tr tag just before the line you posted above.

    Also, your CSS code is correct. I'm not sure if it's the look you're going for, but if you add content to the td, it seems to grow just fine, and the image repeats as it should. Hope that helps!
     
    katendarcy, Dec 20, 2008 IP
  4. Basti

    Basti Active Member

    Messages:
    625
    Likes Received:
    6
    Best Answers:
    3
    Trophy Points:
    90
    #4
    Thanks for your reply katendarcy

    1. i try that with quotes

    2. so the image stretch like it should for you???? thats odd, on my pc it aint 100% it should ( firefox latest / Win XP )
    I just saw, the shadow to the right is stretching, but next to it its just grey instead of the image :/
    I really have an old pc screen, can it be that i see all those errors because of it??

    3. when i paste my css code from my html into my css file, the page miss all the images etc, so it make me think it dont recognize the css ( at least some parts )
    I also allready tried different ways in the css, url hardcoded or not, it aint work. Also when i change a color of one link within the box it work okay with css in the html, but the same in the .css aint work. :p

    And nope havent tried to validate yet, will work with it once i continue with coding, hopefully that will solve some problems

    Thanks,
    Seb
     
    Basti, Dec 20, 2008 IP
  5. katendarcy

    katendarcy Peon

    Messages:
    115
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #5
    On my way out the door now, but I'll take a look when I get back. One thing: are you trying to repeat the image from left to right? If so, you'll need "repeat-x". Top to bottom would be "repeat-y". Both would just be "repeat". (By default, it's set to repeat both ways, x and y.) Sorry if I misunderstood you! : )
     
    katendarcy, Dec 20, 2008 IP
  6. Basti

    Basti Active Member

    Messages:
    625
    Likes Received:
    6
    Best Answers:
    3
    Trophy Points:
    90
    #6
    Nono i wanna repeat vertical ( y ), the image include the shadow. strange is that on my screen the shadow is stretching, but the rest of the image ( 1 image, not more ) is just plain html color code lol
     
    Basti, Dec 20, 2008 IP
  7. Yesideez

    Yesideez Peon

    Messages:
    196
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Place a semi-colon (;) on the end of this line:
    background: url(http://www.anachrony.net/test/images/rank_content.jpg)
    Code (markup):
    Like this:
    background: url(http://www.anachrony.net/test/images/rank_content.jpg);
    Code (markup):
     
    Yesideez, Dec 20, 2008 IP
  8. Basti

    Basti Active Member

    Messages:
    625
    Likes Received:
    6
    Best Answers:
    3
    Trophy Points:
    90
    #8
    Will try that as well, thanks :)

    Guess i first buy a new pc screen, before i finish this skin, my old screen is really ........ totally blurry and all lol

    Thanks,
    Seb
     
    Basti, Dec 21, 2008 IP
  9. Basti

    Basti Active Member

    Messages:
    625
    Likes Received:
    6
    Best Answers:
    3
    Trophy Points:
    90
    #9
    Jeez, i know the problem now :p

    because of the width: i made the width of the black bar image smaller ( it was right size before, but well )
    and now all looks right.

    Because the repeat stuff: Like you guys said, its repeating like it should, the reason why its kind of grey when repeating is, that the image goes from grey vertical to something darker.

    Thanks for your help :)
     
    Basti, Dec 21, 2008 IP