Images not showing up on my site.

Question

I am trying to add a banner and logo (.jpg files) to this site. They are not showing up. When I inspect the element, they are there, but the dimensions are 0x0. Can some one help me?

HTML:

<! DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Love of Leather Shop</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!--CSS-->
        <link href="https://fonts.googleapis.com/css?family=Bellefair|Ewert|Great+Vibes|IM+Fell+English|Kaushan+Script|Mirza|Overlock+SC|Philosopher|Playball|Rye|Sancreek" rel="stylesheet">
        <link rel="stylesheet" href="main.css">
        <link rel="stylesheet" href="normalize.css">
    </head>
        <div id="title">
                <img url="http://ultimatemoneyblog.com/wp-content/uploads/2017/10/lollogotop.jpg">
                <h1> Love of Leather </h1>
        </div>
            <div id="nav-bar">
                <ul>                
                    <li><a href="index.html">Home</a></li><!--this is where the home link goes-->
                    <li><a href="product.html">Product</a></li><!--this is where the product link goes-->
                    <li><a href="contact.html">Contact</a></li><!--this is where the contact link goes-->
                </ul>
            </div>
                <div class="banner">
                    <img url="http://ultimatemoneyblog.com/wp-content/uploads/2017/10/loveofleather.jpg">   
                </div>
                    <div id="about">
                        <p> Welcome to Love of Leather. Here you will find custom made fine leather goods.</p>
                        <p> Feel free to browse through all of the leather accessories. Once you find what you want simply email the items, sizes (if applicable) and quantity you are needing.</p>
                        <p>I will then send a confirmation email including total, shipping cost, and a time when you can expect your order to be fullfilled. Please keep in mind I hand make all of your goods to order and I want them to be perfect for you!</p>
                    </div>
                        <div id="content">
                            <p>Customized Leather Bracelet</p>
                            <li><button><button><button><button></li><!--Leather Bracelet links here.-->
                            <p>Customized Key Chains</p>
                            <li><button><button><button><button></li><!--Key chain links here-->
                            <p>Hand Made Leather Bags</p>
                            <li><button><button><button><button></li><!--Leather Bag links here-->
                        </div>
                <div id="foot-bar">
                    <ul>

                        <li><img src="image\facebook-wrap.png" alt"facebook="" logo"=""></li><!--this is where the facebook link goes-->
                        <li><img src="image\twitter-wrap.png" alt"twitter="" logo"=""></li><!--this is where the twitter link goes--> 
                        <li><img src="image\mail.png"></li><!--this is where the email link goes-->
                    </ul>
                        <li>© 2017 Love of Leather 2017</li>
                </div>  
</html>

CSS:

/*Main*/


body{
  color: #465058;
  font-size: 1em;
  font-weight: 200;
  font-family: 'IM Fell English', serif;
  width: 100%;
  text-align: center;
  padding-top: 50px;
}

img {
    max-height: 100%;
    max-width: 100%;
}
.banner{
    height: 180px;
    width: 100%;
    background-size: contain;
}
.banner img{
    height: 171px;
    width: 861px;   
}

/*Typography*/

#title {
    font-family: 'Rye', cursive;
    background-size: contain;
    border: 1px, black;
}
#title img{
    height: 75px;
    width: 150px;
}
/*Nav*/
#nav-bar ul{

    list-style: none;
    text-align: center;
}

#nav-bar li{
    font-family: 'Rye', cursive;
    display: inline;
}
#nav a{
    color: black;
}

#nav a:hover {
  color: #333;
}
#nav a.active {
  color: #465058
}


/*Footer*/

    #foot-bar {
        font-family: 'Rye', cursive;
        clear: both;
    }
    #foot-bar img{
        height: 30px;
        width: 30px;
    }
    #foot-bar li{
        display: inline;
    }

Moderator edited: Markdown added so that code renders properly in the forums.

Answer 1 · 2017-10-21T20:02:03Z

October 21, 2017 8:02pm

http://ultimatemoneyblog.com/wp-content/uploads/2017/10/lollogotop.jpg http://ultimatemoneyblog.com/wp-content/uploads/2017/10/loveofleather.jpg

The links to your images are not valid... The above links are the links you specify and the are not any image found on this links

secondly you are not linking to them correctly: <img url="http://ultimatemoneyblog.com/wp-content/uploads/2017/10/lollogotop.jpg"> WRONG <img src="http://ultimatemoneyblog.com/wp-content/uploads/2017/10/lollogotop.jpg"> CORRECT

Change the url to src=" " the provide a valid link to your image

Answer 2 · 2017-10-21T20:09:52Z

October 21, 2017 8:09pm

src="image\facebook-wrap.png"

src="image/facebook-wrap.png"

also change the back slash to a forward slash

Answer 3 · 2017-10-21T21:23:02Z

October 21, 2017 9:23pm

You are welcome

Welcome to the Treehouse Community

Looking to learn something new?

Jerome vanGaalen

Jerome vanGaalen

Images not showing up on my site.

3 Answers

Udida Roland

Udida Roland

Jerome vanGaalen

Jerome vanGaalen

Udida Roland

Udida Roland

Udida Roland

Udida Roland