www.webdeveloper.com
Results 1 to 12 of 12

Thread: Notepad resolved. Still cant get images on though

  1. #1
    Join Date
    Apr 2012
    Posts
    110

    Notepad resolved. Still cant get images on though

    body{color:red;
    background-color:#81BEF7;
    background-image:url('http://spencer/Desktop/images/models/webtemplate1.jpg');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
    width:125px;
    height:150px;
    }

    <body><img src="images/models/webtemplate.jpg"/>
    </body>

    Had the images in pictures/images/models/webtemplate.jpg')
    Still wont work.

  2. #2
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,217
    Are the images uploaded to the models folder? You do not need the full URL if they are on your own server. What path you use depends on the html files and their relationship with the other folders. Example:

    Code:
    body {
    width:125px;
    height:150px;
    color:#f00;
    background: #81bef7 url('models/webtemplate1.jpg') no-repeat center fixed;
    }
    You can use " ../ " as many times as needed to tell the browser how far back to go in the directory structure to find the images depending on each files relationship.

    See:

    Absolute and Relative Paths

  3. #3
    Join Date
    Apr 2012
    Posts
    110

    Still doesnt work. I put url('models/webtemplate1.jpg)

    Hi Major Payne.

    I put the above, then in html, I put <img src='spencer/pictures/models/webtemplate1.jpg"/>
    Its definitely in the models folder.

  4. #4
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,217
    The path I used may not be the correct one as I do not know the path relationship between the HTML file, the CSS file and the image file. Is this site online as working with partial code is not a good way to come to a solution.

  5. #5
    Join Date
    Apr 2012
    Posts
    110

    no, havent designed yet to put online

    No, given up on it, till I can get the basics right to put an image in.
    So, its not online.

  6. #6
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    The suggestion to post a link on line was NOT to see a correctly coded page, rather it was to diagnose the problem you are having. Code snippets only provide a portion of, not the whole picture.
    If you have a Web host, just post a sample test page... one that can be removed later.
    I'm seeing a couple of possible errors... which could easily be confirmed and fixed with a link to the actual page......
    First, this is an invalid address:
    Code:
    background-image:url('http://spencer/Desktop/images/models/webtemplate1.jpg');
    If the file is on your local machine... then there is no "http" used to access the file.... so just use a relative address. Relative could be thought of as... "starting at".
    Major posted an example of a "relative" address..
    Code:
    background: #81bef7 url('models/webtemplate1.jpg') no-repeat center fixed;
    That is.... relative to THIS file (starting at this file) the path to the img is (inside this folder) "models" subfolder, then the "webtemplate1.jpg" file
    Your example:
    Code:
    <img src="images/models/webtemplate.jpg"/>
    ... starting from THIS file, go to subfolder "images", then subfolder "models" to find the file.
    But note that the path to images coded in external CSS pages is "relative" (starting at) the css file, while images placed on Web pages using <img src"..... are "relative" or starting at the Web page... also note that in the CSS, single quotes are used, while if on the HTML page, double quotes.... not a mix, as in your second post:
    Code:
    I put <img src='spencer/pictures/models/webtemplate1.jpg"/>
    So the path to the same image could vary depending on if it was coded into an external CSS file or directly on the Web page.
    If you are correctly pathing your images according to these guidelines and the image STILL does not display... then you have a problem with the image.
    The image may be a PhotoShop .psd file or the .jpg was saved with color mode CMYK, instead of RGB, etc.
    All of which could easily be diagnosed if only we had a link to the actual page.
    Best wishes,
    Eye for Video

  7. #7
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,217
    OK. Post back when online. Also, you might want to read:

    Absolute and Relative Paths

  8. #8
    Join Date
    Sep 2006
    Location
    new york
    Posts
    267

    where is CSS?

    If the CSS is in an external ___.css file in a sub-folder, the path to the images is relative to the CSS file, not the HTML page. Per chance, would it be ../images/_______?

  9. #9
    Join Date
    Apr 2012
    Posts
    110

    Tried this

    Hi Major Payne, Eye for video.

    I put background-image:url {'Pictures/Webtheme_files/girl1.gif'}

    <img src=Users/spencer/Pictures/Webtheme_files/girl1.gif"; width="238"; height="297";/></body>
    </html>

    Cause when I right clicked on the image properties it says location C:/Users/spencer/Pictures/Webtheme_files/girl1.gif

    I also tried {'pictures/Webtheme_files/girl1.gif'}

    then <img src=spencer/Pictures/Webtheme_files/girl1.gif'; width="238";
    height="297";/>

    I tried with gif and png. The image is a part from a webtheme. the pics are now broken up and I named this pic girl1

  10. #10
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,217
    If you are trying to get an online web page to work correctly, you must have the image online and not use the path to your hard drive. If you are just experimenting on your computer, you must have a proper directory structure to us relative paths easier. If the html file and image file are in widely separate places on your hard drive, you'll need to use full paths. Example:

    file:///C:/Users/spencer/Pictures/Webtheme_files/girl1/gif

  11. #11
    Join Date
    Sep 2006
    Location
    new york
    Posts
    267

    create site ROOT folder

    Forgive my WRONG response when I said

    the path to the images is relative to the CSS file, not the HTML page
    Some Flash tidbit was stuck on my brain, and could not edit or delete it.

    But as Major Payne pointed out, there's a problem with path references to local location of files

    background-image:url('http://spencer/Desktop/images/models/webtemplate1.jpg');
    <img src=Users/spencer/Pictures/Webtheme_files/girl1.gif"; width="238"; height="297";/>
    Cause when I right clicked on the image properties it says location C:/Users/spencer/Pictures/Webtheme_files/girl1.gif
    Creating a site ROOT folder to include all the site files (with sub-folders such as images/) makes it possible to establish the correct file structure and relative site paths to the assets and pages within that ROOT folder -- without local references to "Desktop," "Users/," "C:/Users/" or "file:///."

  12. #12
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    You were wrong when you said:
    Forgive my WRONG response when I said
    "the path to the images is relative to the CSS file, not the HTML page"
    Paths to images referenced in external CSS files ARE relative (starting at) the CSS file, not the HTML page. That is true whether or not the CSS file is in a sub folder or at the same folder level as the HTML page.
    Since pathing may very well be the problem for wildguy2, understanding the difference between pathing an image coded in the HTML page and an image coded in an external CSS file is important.
    Best wishes,
    Eye for Video

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