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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Background image not working...

    Here is the html code:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    
    <head>
    <title>Title</title>
    <link rel=stylesheet type="text/css" href="css\mainCss.css" media=screen>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    </head>
    
    <body>
    
    <div id="page">
        <div id="header">
        <h5 id="pic">
        </div>
    </div>
    
    </body>
    
    </html>
    And here is the CSS code:
    Code:
    body
        {
          background-color: white;
        }
    
    div#page
    {
          width: 900px;
          margin-left: auto;
          margin-right: auto;
          letter-spacing: .1px;
    }
    
    div#header
    {
          width: 900px;
          height: 145px;
          border-color: #303030;
          border-style: solid;
          border-width: 1px;
          font-size: 115%;
          text-indent: 730px;
          color: #ddddcc;
    }
    
    #pic
    {
          width: 100%; 
          background-image: url(..\hospital_logo.jpg);
          margin: 0%;
    }
    I have the image hospital_logo.jpg saved in a folder up one level from where mainCss.css is saved (mainCss.css is saved in the folder css which is saved in a folder where Main_Page and the image is saved).

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    <link rel=stylesheet type="text/css" href="css\mainCss.css" media=screen>
    background-image: url(..\hospital_logo.jpg);
    Change them to
    Code:
    <link rel=stylesheet type="text/css" href="css/mainCss.css" media=screen>
    Code:
    background-image: url(../hospital_logo.jpg);
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Jul 2009
    Posts
    36
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hey, I am having an issue with trying to put a background image into a div container. I have tried every way under the sun to get the thing to work. The container currently has a border in css sitting around it on the display, so that I can know where it is, but now, I want to put a background image into the container. Here is the current labeling:

    <div id="display">

    Here is the css in the css file:

    #display { position : absolute ; top : 150px ; left: 175px; width : 600px ; height : 95% ;
    text-align : center ; font-size : 14pt ; color : black ; border-style : solid ;
    border-color : orange ; margin : 0px ; padding : 15px ; background-image: url("images/display_back.png");
    background-repeat: repeat-x;}


    I am not sure what I am doing wrong that the image does not display in the background.

    Thanks;
    Ice

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You should start a new post, don't just piggy-bag on someone else's.

    Anyway, it works for me. Have you correctly closed your div tag? And is your path and image filename correct?

    <div id="display"></div>
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #5
    New Coder
    Join Date
    May 2011
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I am currently away from my workspace, but I feel retarded for putting a forward slash instead of a backslash. I will try that as soon as I get back.

    Thanks for the reply!

  • #6
    New Coder
    Join Date
    Jul 2009
    Posts
    36
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by AndrewGSW View Post
    You should start a new post, don't just piggy-bag on someone else's.

    Anyway, it works for me. Have you correctly closed your div tag? And is your path and image filename correct?

    <div id="display"></div>
    Well. Considering that my post was about EXACTLY the same issue, it was a good place to start. Please tell me, are you the post police? Anyway, yes my div tag is closed correctly. And, how can you blanket state "it works for me" without even knowing the rest of the information? The path and filename are correct. And your response to my need for help is not a very friendly way to answer anyone in here. If you are going to respond like that, then please do not respond. I came here for help, and posted to a thread dealing with just exactly what I was asking about.

  • #7
    New Coder
    Join Date
    May 2011
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Okay, I am not sure what is wrong, but I am trying to get the picture inside the "header" portion. The picture flat out isn't showing up anywhere.

    This is becoming very frustrating.

    EDIT: I have tried multiple things, including moving the image into the css folder and making it background-image: url(hospital_logo.jpeg), doesn't work. I have tried using single quotes and double quotes. This is so bizarre.

    EDIT EDIT: I have even tried using an actual url (http://i1098.photobucket.com/albums/...pital_logo.png), and it doesn't work. It doesn't work on either firefox or chrome. wtf.

    Here is the code again (slightly changed with the url):
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    
    <head>
    <title>Title</title>
    <link rel=stylesheet type="text/css" href="css/mainCss.css" media=screen>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    </head>
    
    <body>
    
    <div id="page">
        <div id="header">
        <h5 id="pic"></h5>
        </div>
    </div>
    
    </body>
    
    </html>
    Code:
    body
        {
          background-color: white;
        }
    
    div#page
    {
          width: 900px;
          margin-left: auto;
          margin-right: auto;
          letter-spacing: .1px;
    }
    
    div#header
    {
          width: 900px;
          height: 145px;
          border-color: #303030;
          border-style: solid;
          border-width: 1px;
          font-size: 115%;
          text-indent: 730px;
          color: #ddddcc;
    }
    
    #pic
    {
          width: 100%; 
          background-image: url("http://i1098.photobucket.com/albums/g361/Forrest_Young/hospital_logo.png");
          background-repeat: no-repeat;
          margin: 0%;
    }
    Last edited by borosarchangel; 05-11-2011 at 07:42 PM.

  • #8
    New Coder
    Join Date
    May 2011
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Here is a picture of what I am getting from my code, so you can compare:

  • #9
    New Coder
    Join Date
    Jul 2009
    Posts
    36
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I put the picture in the actual code, rather than try to put it into the css..:

    Code:
    <div id="logo">
    <img src="images/logo.png">
    </div>
    That does work. My issue is trying to make it the background of a div, rather than an image in the div...

  • #10
    New Coder
    Join Date
    May 2011
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by iceregent View Post
    I put the picture in the actual code, rather than try to put it into the css..:

    Code:
    <div id="logo">
    <img src="images/logo.png">
    </div>
    That does work. My issue is trying to make it the background of a div, rather than an image in the div...
    How do you format the picture within the html code? I have tried to use align, and it doesn't move.

  • #11
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    @borosarchangel

    Your div has no height, as it has no content, so there is no background area to show. Set the height for #pic to the height of your image.
    Last edited by AndrewGSW; 05-11-2011 at 08:10 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #12
    New Coder
    Join Date
    May 2011
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by AndrewGSW View Post
    @borosarchangel

    Your div has no height, as it has no content, so there is no background area to show. Set the height for #pic to the height of your image.
    Code:
    body
        {
          background-color: white;
        }
    
    div#page
    {
          width: 900px;
          margin-left: auto;
          margin-right: auto;
          letter-spacing: .1px;
    }
    
    div#header
    {
          width: 900px;
          height: 145px;
          border-color: #303030;
          border-style: solid;
          border-width: 1px;
          font-size: 115%;
          text-indent: 730px;
          color: #ddddcc;
    }
    
    #pic
    {
          width: 100%;
          height: 100%;
          background-image: url("http://i1098.photobucket.com/albums/g361/Forrest_Young/hospital_logo.png");
          background-repeat: none;
          margin: 0%;
    }
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    
    <head>
    <title>Title</title>
    <link rel=stylesheet type="text/css" href="css/mainCss.css" media=screen>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    </head>
    
    <body>
    
    <div id="page">
        <div id="header">
        <h5 id="pic"></h5>
        </div>
    </div>
    
    </body>
    
    </html>
    I still don't have an image showing up in the header div. I am not wanting a separate div for the picture, I simply want a picture to be the background image within the div, stretched to fill up the whole space.

    I am sorry for my inexperience, source code for a fix to this would be very much appreciated!

  • #13
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Setting 'height: 100%;' won't work - give it a pixel height (the same height as your image).
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #14
    New Coder
    Join Date
    Jul 2009
    Posts
    36
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yes, this is my problem as well. I have set a background image for the body, and I have div's that I want to set backgrounds for, but i cannot seem to make them show up. I have tried in i.e as well as firefox..haven't looked in google chrome yet.. but pictures do show up as a picture, if you set them into the div locations like I showed you.

  • #15
    New Coder
    Join Date
    May 2011
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by AndrewGSW View Post
    Setting 'height: 100%;' won't work - give it a pixel height (the same height as your image).
    It isn't working. If you have code that works for this, I would prefer that.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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