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 12 of 12
  1. #1
    Regular Coder
    Join Date
    Nov 2002
    Posts
    184
    Thanks
    0
    Thanked 0 Times in 0 Posts

    set image on the left in CSS ????? please help

    I have an image, a straight line (30x10), i want to set it on the left side of the screen. How can we do that in CSS? For example: if I add more texts on the right, the image automately stretching it down.

    I tried to have the image in the table cell…it works fine.....but again, how can we do that in CSS. Thanks for your help.

  • #2
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You'll have to show us code, but why don't you just make an extremely LONG image and make it part of the body background that does not repeat or a small image that repeats top to bottom:

    Code:
    body {
    background: white url(image/image.gif) repeat-y 0px 0px;
    }
    or:
    Code:
    body {
    background: white url(image/image.gif) no-repeat 0px 0px;
    }
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #3
    Regular Coder
    Join Date
    Nov 2002
    Posts
    184
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you very much for your help.
    However, if I do that it applies all pages. I want to have this line image for 1 page only. How can we do it? thanks.

  • #4
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Give your body an id (name it whatever you want):
    Code:
    <body id="specialpageorwhatever">
    Then apply that code to the id instead of the body:
    Code:
    #specialpageorwhatever {
    background: white url...
    }
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #5
    Regular Coder
    Join Date
    Nov 2002
    Posts
    184
    Thanks
    0
    Thanked 0 Times in 0 Posts
    THANKS YOU VERY MUCH

  • #6
    Regular Coder
    Join Date
    Nov 2002
    Posts
    184
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I just wonder, can we move the image down about 20px? Thanks.

  • #7
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sure, just change that background image position to: 0px 20px -- or vice versa, I can't remember off the top of my head but one is top one is left.
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #8
    Regular Coder
    Join Date
    Nov 2002
    Posts
    184
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tried that but nothing is happening...
    the 1st one is left position and 2nd one ....

  • #9
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    show me a site link, it should work. Plus, what browser are you testing this in?
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #10
    Regular Coder
    Join Date
    Nov 2002
    Posts
    184
    Thanks
    0
    Thanked 0 Times in 0 Posts
    /* in style.CSS */
    #LeftSideImage
    {
    background: white url(http://localhost/web_proj/images/headline_bg_tile.jpg) repeat-y 0px 20px;
    }
    ===


    <link href="style.css" rel="stylesheet" type="text/css">
    <body id="LeftSideImage">

    That is what exactly I have in my webpage. I test it in IE.

  • #11
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's because you are repeating on the y axis, up and down -- even if you shift it 20px it's just going to still repeat on the y. Can you just put an empty 20px on the graphic or make a really long repeat and do it on the x? Your link did not work for me, so I can't gave the graphic, can you fix the link? LocalHost is your link, I need a full web address.
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #12
    Regular Coder
    Join Date
    Nov 2002
    Posts
    184
    Thanks
    0
    Thanked 0 Times in 0 Posts
    this page is still in my local host. Therefore, the link is not working.
    Currenly, the graphic is long from the top down to the bottom. Even, the y is 20px...as what I showed you earlier
    Last edited by ClueLess; 09-27-2004 at 09:13 PM.


  •  

    Posting Permissions

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