www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 19

Thread: CSS Image code (stumped again)

  1. #1
    Join Date
    Apr 2006
    Posts
    29

    CSS Image code (stumped again)

    I would like to place a picture on my web-page. Im using a separate style sheet. Is this the right code in the style sheet?
    Code:
     
    #picture
    {
      background-image: url(picture.jpg) bottom right no-repeat;
    }
    Now what do I place on my page so that the image will display?
    Do I put this:
    Code:
      <div id="picture"></div>
    Im just a beginner and this has me stumped
    Thanks..your help would be greatly appreciated
    Ron L

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774
    What you want is:
    Code:
    #picture
    {
      background: transparent url(picture.jpg) no-repeat scroll bottom right;
    }
    The background-image: property only takes the "url(foo.*)" value. You can set more than one background image property by using the shorthand background: property.

    http://www.w3schools.com/css/css_ref...asp#background

    (W3Schools is a great site for beginners too)

  3. #3
    Join Date
    May 2004
    Location
    dobson ave.
    Posts
    694
    Hi -
    If it's an empty <div> w/ no content, you'll
    definitely need to set the height as well -
    let's say for a 126h x 765w image:

    div#header{
    width:100%; height:126px; margin:0 auto;
    background:silver url(images/header2.png) no-repeat 0% 0%;}

    Good luck,
    El

  4. #4
    Join Date
    Apr 2006
    Posts
    29
    Quote Originally Posted by LJK
    Hi -
    If it's an empty <div> w/ no content, you'll
    definitely need to set the height as well -
    let's say for a 126h x 765w image:

    div#header{
    width:100%; height:126px; margin:0 auto;
    background:silver url(images/header2.png) no-repeat 0% 0%;}

    Good luck,
    El
    I did this:
    Code:
     
    #logo
    {
    	background: url('3.jpg') right bottom no-repeat;
    	height: 250px;
    	width: 100%;
    }
    Not sure if I understood you correctly..Im really new at this and no where did I see any reference to my #picture container or *.jpg file in your code example..Sorry.
    Is this what you meant?
    The image appeared but it wouldn't go to the bootom right. It stays in the upper right hand position.
    Thanks you for taking the time to respond..Ron L
    Last edited by rluka; 12-01-2006 at 01:19 AM.

  5. #5
    Join Date
    May 2004
    Location
    dobson ave.
    Posts
    694
    Hi -
    It would help to have a link to a url to best figure-out your problem.

    You're using a <div id="logo"> to place the image on the page.
    In toicontien's example, they used a <div id="picture">
    and in mine I used a <div id="header">...it doesn't really matter, as the
    end result would be pretty much the same!

    Good luck,
    El

  6. #6
    Join Date
    Apr 2006
    Posts
    29
    Quote Originally Posted by LJK
    Hi -
    It would help to have a link to a url to best figure-out your problem.

    You're using a <div id="logo"> to place the image on the page.
    In toicontien's example, they used a <div id="picture">
    and in mine I used a <div id="header">...it doesn't really matter, as the
    end result would be pretty much the same!

    Good luck,
    El
    Sorry, your right..I just got confused with the coding style. Is that a valid way of adding an image to a page? Is there a work around that would allow 2 images to be used in a 'body' tag?
    Thanks very much for your help..Ron L

  7. #7
    Join Date
    May 2006
    Posts
    14
    Is there a reason your not using a simple img tag?
    <img src="pathtomyimage" />

  8. #8
    Join Date
    Apr 2006
    Posts
    29
    Quote Originally Posted by CWG
    Is there a reason your not using a simple img tag?
    <img src="pathtomyimage" />
    Im new to CSS coding, would I have to create a class for that or am I making it to confusing. Or are you saying that I can just add that to the body of the page? Could you please give me a realtime example? Like: how to align it bottom, right.
    Thanks for your response..Ron L

  9. #9
    Join Date
    May 2006
    Posts
    14
    I am confused on what result your wanting. Can you give me more information on how you want the page to look? Then I can give you the best approach. You know the old saying "1,00.. ways to skin a cat."

  10. #10
    Join Date
    Oct 2005
    Location
    Gold Coast, Australia
    Posts
    2,115
    Or are you saying that I can just add that to the body of the page?
    Yes.
    Code:
    <img src="pathtomyimage" style="position: absolute; top: 700px; left: 300px;" />

  11. #11
    Join Date
    May 2006
    Posts
    14
    If you use the position: absolute then it will position itself where you want it but it will cover anything in the normal flow of the document.
    If you can give me an explanation of how you want the document to look I can point you in the right direction.

  12. #12
    Join Date
    Apr 2006
    Posts
    29
    So far I have this new project And I would like to add this image to the bottom right hand corner. Its important that this image stay in the background.
    Thanks to all of you for your help..Ron L

  13. #13
    Join Date
    May 2006
    Posts
    14
    This helps. Heres my solution:

    use this for your body class in your css style sheet:

    body{
    background-color: #E7EFFF;
    background-image: url(3HorsesBySusanKerr.jpg);
    background-repeat: no-repeat;
    background-position: bottom right;
    }

    Then for the gey column on the left use a separate div tag.

    <div id="LeftColumn"></div>

    In your style sheet add:

    #LeftColumn {
    float: left;
    height: 100%;
    width: 75px;
    background-image: url(leftmargin.gif);
    background-repeat: repeat-y;
    }

  14. #14
    Join Date
    May 2006
    Posts
    14
    FYI.
    Depending on how your content will be added you may not need the float: left

  15. #15
    Join Date
    Apr 2006
    Posts
    29
    Your code was also along the lines of my way of thinking. Unfortunatley I tried it and it didn't work. I posted the same question some where else and this is what I got. I was amazed at how this code made my page[/URL] look.


    Code:
    /* CSS Document */
    
    html, body { 
        margin: 0; 
        padding: 0; 
        height: 100%; 
        } 
    
    html { 
        background-image: url('leftmargin.gif'); 
        background-repeat: repeat-y; 
        background-color: #E7EFFF; 
        } 
    
    body { 
        background: url(3Horses.jpg) bottom right fixed no-repeat; 
        } 
    
    #header { 
        background: url(top.gif) left repeat-x; 
        } 
        
    h1 { 
        color: #fff; 
        margin-left: 70px; 
        line-height: 75px; 
        font-family: Georgia, "Times New Roman", Times, serif; 
        font-style: italic; 
        }
    Thanks for your input..Ron L
    Last edited by rluka; 12-01-2006 at 01:20 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles