Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Mike Pelosi
794 PointsAdd Iconography/Background-Image Not Working
Hello everyone,
I am doing the project on NotePad++ rather than the Workspace editor provided by the course.
This is my HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Mike Pelosi | Bard </title> <link rel="stylesheet" href="C:\Users\Mike\Desktop\Index.HTML\CSS\normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="C:\Users\Mike\Desktop\Index.HTML\CSS\main.css"> < </head> <body> <header> <a href="index.html." id="logo"> <h1>Mike Pelosi</h1> <h2>Bard</h2> </a>
<nav>
<ul>
<li><a href="index.html" class="selected">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<li>
<a href="C:\Users\Mike\Desktop\Index.HTML\Image\numbers-01.jpg">
<img src="C:\Users\Mike\Desktop\Index.HTML\Image\numbers-01.jpg" alt="Image not available">
<p>Experimentation with color and texture.</p>
</a>
</li>
<li>
<a href="C:\Users\Mike\Desktop\Index.HTML\Image\numbers-02.jpg">
<img src="C:\Users\Mike\Desktop\Index.HTML\Image\numbers-02.jpg" alt="Image not available">
<p>Playing with blending modes in Photoshop.</p>
</a>
</li>
<li>
<a href="C:\Users\Mike\Desktop\Index.HTML\Image\numbers-06.jpg">
<img src="C:\Users\Mike\Desktop\Index.HTML\Image\numbers-06.jpg" alt="Image not available">
<p>Tryign to create an 80's style of glows.</p>
</a>
</li>
<li>
<a href="C:\Users\Mike\Desktop\Index.HTML\Image\numbers-09.jpg">
<img src="C:\Users\Mike\Desktop\Index.HTML\Image\numbers-09.jpg" alt="Image not available">
<p>Drips created using Photoshop brushes.</p>
</a>
</li>
<li>
<a href="C:\Users\Mike\Desktop\Index.HTML\Image\numbers-12.jpg">
<img src="C:\Users\Mike\Desktop\Index.HTML\Image\numbers-12.jpg" alt="Image not available">
<p>Creating shapes using repetition.</p>
</a>
</li>
</ul>
</section>
<footer> <a href="http://twitter.com/mike_pelosi"> <img src="C:\Users\Mike\Desktop\Index.HTML\Image\twitter-wrap.png" alt="Twitter Logo" class="social-icon"> </a> <a href="http://facebook.com/example"> <img src="C:\Users\Mike\Desktop\Index.HTML\Image\facebook-wrap.png" alt="Twitter Logo" class="social-icon"> </a> <p>© 2014 Michael Pelosi.</p> </footer> </div>
</body> </html>
And this is the CSS:
body { font-family: 'Open Sans', sans-serif; }
/* used id-"wrapper" in index.html */
wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
/logo styling/
logo {
text-align: center;
margin: 0;
}
/Styling the h1 with fonts. ems are relative units of measurement. 1em is equivalent font size of 16px. 1em = 1.75*16/ h1 { font-family: 'Changa One', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; /*unbolds headline h1 elements */ line-height: 0.8em; }
h2{ font-size: 0.75 em; margin: -5px 0 0; /first value sets top margin, second sets left and right, third is the bottom/ font-weight: normal; }
h3 { margin: 0 0 1em 0; }
/*********************************************************** Page Portfolio ***********************************************************/
gallery {
margin: 0;
padding: 0;
list-style: none;
}
gallery li {
float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; } /* image width is 45% of the page MAX*/
gallery li a p {
margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7; }
/********************************************************* LINKS *********************************************************/ /*Gets rid of the underlined links */ a{text-decoration: none; }
img { max-width: 100%; } /Sets image to max of the browser/
/Sets the color of the links */ a { color: #6ab47b; } /*********************************************************** END LINKS *************************************************************/
/********************************************************** HEADING *********************************************************/ /*styles the header containers on index.html/
header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; /*top right bottom left */ width: 100%; } header { background: #6ab47b; border-color: #599a68; }
/styles h1 and h2 headers/ h1, h2 { color: #fff; } /*********************************************************** END HEADING ***********************************************************/
/********************************************************* NAVIGATION *********************************************************/ /*styles the background color of nav */ nav{ background: #599a68; }
nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }
footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }
.social-icon { width: 20px; height: 20px; margin: 0 5px; }
/*this styles nav links. nav a:visited is a pseudo class so visited links do not turn a different color */ nav a , nav a:visited { color: #fff; }
/*nav a.selected is a class, not an ID. classes can be used to cover multiple things. nav a.hover is pseudo class */ nav a.selected, nav a:hover{ color: #32673f; }
nav ul { list-style: none; margin: 0 10px; padding: 0;
}
nav li { display: inline-block; }
nav a { font-weight: 800; padding: 15px 10px; } /Padding is the clickable space around a desktop..think hovering */ /**************************************************************************** END NAVIGATION ******************************************************************************/
/****************************************************************************** BODY ******************************************************************************/
/* site body background color / body { background-color: #fff; color: #999; } /******************************************************************************* END BODY ********************************************************************************/
/****************PAGE ABOUT BEGIN**********/ .profilephoto { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; } /*display block allows auto margins/ /the max width styles the display block/ /the margin auto actuall centers it on the page/ /the border-radius property allows you to add rounded corners to an element. Can use pixels or %;/ /This actually turns picture from square to circle/
/*************Page About End*******************/
/CONTACT BEGIN/
.contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }
.contact-info li.phone a{ background-image: url(../images/phone.png); } /********************************************************/
I can not get for the life of me the background image to work. I've tried the following:
background-image: url("Complete file path name") background-image: url('images/phone.png);
And a few more variations. My directory structure looks like this:
C:\Users\Mike\Desktop\Index.HTML
And within that folder is: "C:\Users\Mike\Desktop\Index.HTML\Index" "C:\Users\Mike\Desktop\Index.HTML\Image" "C:\Users\Mike\Desktop\Index.HTML\CSS"
Within Index are the pages "About" "Contact" and "Index" Within CSS is "main.css" and "normalize.css"
And within the image folders are images downloaded for the course.
Sincerley, Mike
1 Answer
jeremy rackley
22,336 PointsYou should not use index.html as a directory. rename you index.html folder to something like sites, then inside of that folder create two more folders called css and imgs and put all of you css files in the css folder and images in the imgs folder. Keep your index.html file as well as any other pages inside the "sites" folder(ie..not in the css folder). Then you should be able to use the path of imgs/imageName and sometimes you need to ad ../ before it so it would be ../imgs/imageName.
(folder structure) sites (all pages go in sites) --css --imgs