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
Ryan Duncan
7,146 PointsI am attempting to make my header an image with all of my website "logos" and nav elements inside the image...
I have just finished taking the "How to make a website" course for the second time. (still struggling to understand a lot of it, is that normal?) and am trying to create my own "simple" project. I am trying to use a panoramic image as a header with my logo and nav elements inside the image. How would I do this?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ryan and Misty - Travelapolooza</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
</head>
<body >
<header>
<img src="img/colorado1.jpg" alt="photo of colorado" class="header-photo">
<a href="index.html" id="logo">
<h1>Travelapolooza</h1>
<h2>See-Experience-Live</h2>
</a>
<nav>
<ul>
<li><a href="index.html" class="selected">Home</a></li>
<li><a href="trips.html" class="">Trips</a></li>
<li><a href="about.html" class="">About Us</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
</section>
<footer>
<p>© Ryan Duncan</p>
</footer>
</div>
</body>
</html>
```css
/********************************
General
********************************/
#wrapper {
width: 940px;
margin: 0 auto;
}
img {
max-width: 100%:;
}
/********************************
Heading
********************************/
header {
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
Ryan Duncan
7,146 Pointshmm it actually did not even add all of my code somehow so at the bottom I will put the rest of my css.
The image is showing up just fine. the "img {width: 100%;" in my css is because I will be turning this into a sort of travel blog/site to showcase my travels with my fiance'. There will be a ton of other pictures on the site so I figured it would be easier and make more sense to just select all of the images and make it to where they fill their own elements. At least that's how it was described in the course.
The problem I am having is that the image is showing up and spanning across the web page like I would like. However, I want my h1, h2 and nav elements to be able to be moved around inside the image like a normal header element. the image is moving them out of the way which is why you will see that I had to place a negative margin for the top of the #logo to get it to even appear inside the image. However, I cannot really control anything else after that. I am just wondering if there is a much more simple way of doing what I am trying to do, and if I am just making this overly complicated.
/********************************
General
********************************/
#wrapper {
width: 940px;
margin: 0 auto;
}
img {
max-width: 100%;
}
/********************************
Heading
********************************/
header {
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
.header-photo {
float: left;
max-height: 100%;
max-width: 100%;
}
#logo {
float: left;
margin: -200px auto;
text-align: center;
text-decoration: none;
}
nav {
text-align: center;
}
nav a {
text-decoration: none;
}
Ryan Duncan
7,146 Pointsbtw i did the header { background: url("img/colorado1.jpg"); width: 100%; } and it just deleted the image all together
Ryan Duncan
7,146 PointsOk so i did what you suggested. Put my image into a hosting site because it wouldn't work otherwise. Now, It only shows a small portion of the image as a header. it cuts off some of the sides and most of the bottom.
the new code: HTML is still the same.
/*********************************
General
*********************************/
#wrapper {
width: 940px;
margin: 0 auto;
}
img {
width: 100%;
}
/*********************************
Header
*********************************/
/** https://i.imgsafe.org/b4c85c3c88.jpg **/
header {
background: url("https://i.imgsafe.org/b4c85c3c88.jpg");
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
6 Answers
Marc Sanchez
20,039 PointsOk so, it's cutting off some of the image because the size of the image is not proportional to the 940px width wrapper you have set up and background-size: cover does its best to proportionally fit the image into the specific width you have set up.
You have a couple of options here:
- Using a photo editor (ie: Photoshop), set the image to the exact width and height specifications you want so that the image displays exactly the way you want it.
The current image is larger than your fixed wrapper size of 940px so we are modifying the dimensions in the CSS to accommodate the width of your fixed wrapper size of 940px.
- Set background-size to 100% instead of cover, then set the header width to the same size as your wrapper's width of 940px or just leave it set at 100% because it'll inherit the wrappers width (in this case 940px), and you'll need to set a fixed height proportional to 940px to display the rest of the images' height (201px in this case).
The reason for specifying a height in this case is because the contents you have in the header of your HTML is using up less space than the actual height of the image. If you left your CSS settings as they currently are and added another paragraph or header the height of the header container would increase exposing more of your image.
I'd use option 2 because it gives me more control over how I want the image to display.
Here's a link to the codepen with what I think you're trying to accomplish.
The beauty of coding is that we have many different ways to solve a problem to meet our needs.
If you'd like to have a google hangout let me know.
Ryan Duncan
7,146 PointsYou're a damn genius! I had to make the height 250px to show what was left... not sure why the 201 didn't work completely. However, everything else worked great! Thanks for all of your help.
Marc Sanchez
20,039 PointsGotcha! That is happening because you're adding your image inside the HTML. Remove '<img src="img/colorado1.jpg" alt="photo of colorado" class="header-photo">' from you HTML and just declare a background image in your CSS.
header { background: url("img/colorado1.jpg"); Width: 100%; }
That will set your background image inside your header without interfering with your nav. The nav and/or any other element in your header will float over the background image.
The reason it's happening in you current code is because you're including the image as content on the HTML page along with your nav and whatever other elements you want in your header. Since it's inside the HTML file it has to take some real estate on the page. Formatting it with CSS will not interfere with the elements inside your HTML file.
Marc Sanchez
20,039 PointsJust copied your code and made some adjustments. Replace the URL in the CSS with your image path.
<div id="wrapper"> <header> <a href="index.html" id="logo"> <img src="http://coneyislandpark.com/imgUploader/logos/Pepsi_logo_2008.png"></a> <nav> <ul> <li><a href="index.html" class="selected">Home</a></li> <li><a href="trips.html" class="">Trips</a></li> <li><a href="about.html" class="">About Us</a></li> </ul> </nav> </header> </div>
/******************************** General ********************************/
header { background: url("https://www.rockymtnrefl.com/GardenoftheGodscd195839587.jpg") no-repeat center 20%; /* center - center the image and percentage value shifts image up and down */ float: left; padding: 5px 0 0 0; width: 100%; }
wrapper {
width: 940px; margin: 0 auto; }
img { max-width: 100%; } /******************************** Heading ********************************/
header {
}
logo {
width: 200px; float: left; }
nav { float: right; margin-top: 20px; }
nav li { background-color: #fff; list-style: none; display: inline; padding: 10px; margin-right: 20px; }
nav a { text-decoration: none; }
footer {
}
Marc Sanchez
20,039 PointsYou don't need to pull the image from a hosting site. I only did that so you can see that the image loads. If it's not loading for you using your path ("../yourImageFolder/yourFile") then you path might be wrong.
Add this to your header selector in the CSS, background-size: cover;.
Here is this codepen I created with your code to help you, http://codepen.io/manchez/pen/kXpdrk?editors=1100.
Again, all I did was add a background-size: cover; to your header. It's on line 24 of the CSS.
Hope that helps. This is exactly what coding is all about. Researching and asking questions to find solutions. Keep it up! This is the best way to learn and learning from your mistakes re-enforces what you learn.
Ryan Duncan
7,146 PointsI honestly have no clue what is going on. I have made my code exactly like yours and its still cutting the image off.
/*********************************
General
*********************************/
#wrapper {
width: 940px;
margin: 0 auto;
}
img {
width: 100%;
}
/*********************************
Header
*********************************/
/** https://i.imgsafe.org/b4c85c3c88.jpg **/
header {
background: url("https://i.imgsafe.org/b4c85c3c88.jpg");
background-size: cover;
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
Marc Sanchez
20,039 PointsSend me the HTML and CSS you currently have so I can take a look at it.
Ryan Duncan
7,146 PointsSorry I have been away from the computer all day and night... Here is my code
css first then html. I took out the float:left and uncommented the navigation code
/*********************************
General
*********************************/
#wrapper {
width: 940px;
margin: 0 auto;
}
img {
width: 100%;
}
/*********************************
Header
*********************************/
/** https://i.imgsafe.org/b4c85c3c88.jpg **/
header {
background: url("https://i.imgsafe.org/b4c85c3c88.jpg");
background-size: cover;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
#logo {
text-align: center;
text-decoration: none;
color: #fff;
}
/*********************************
Section
*********************************/
/*********************************
Footer
*********************************/
/*********************************
Page: About
*********************************/
/*********************************
Page: Trips
*********************************/
/*********************************
Navigation
*********************************/
nav {
text-align: center;
}
nav ul li {
display: inline;
font-size: 1.5em;
}
nav a {
text-decoration: none;
color: #fff;
margin: 0 20px 0 20px;
padding: 30px auto;
}
nav a.selected {
color: #c0dbff;
}
/*********************************
Colors
*********************************/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ryan and Misty - Travelapolooza</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
</head>
<body >
<header>
<a href="index.html" id="logo">
<h1>Travelapolooza</h1>
<h2>See-Experience-Live</h2>
</a>
<nav>
<ul>
<li><a href="index.html" class="selected">Home</a></li>
<li><a href="trips.html" class="">Trips</a></li>
<li><a href="about.html" class="">About</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
</section>
<footer>
<p>© Ryan Duncan</p>
</footer>
</div>
</body>
</html>
Marc Sanchez
20,039 PointsAnd take the float off your header in the CSS. You don't need it.
Marc Sanchez
20,039 PointsGlad I can help man! Rock on!
Marc Sanchez
20,039 PointsMarc Sanchez
20,039 PointsFrom what I'm understanding after reading about your issue and looking at your code, you injected the image into the html and you also have a header-photo class in the css. You can do either or but doing it in the css will give you more control over its format. (ie: width, height, etc.). I see you have img in your CSS set up as 100%. The selector is going to affect all your images within an <img src> tag. You want to be more specific so that it only affects your header.
My questions are: What problem are you having? Is the image not displaying? Is the image size in the header not what you want it to be?
To do it in the CSS, remove the <img src> tag from the HTML and use the following in your CSS file:
header { background: url("img/colorado1.jpg"); width: 100%; }
logo {
float: left; }
nav { float: right; }
<header> <a href="index.html" id="logo"> <h1>Travelapolooza</h1> <h2>See-Experience-Live</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Home</a></li> <li><a href="trips.html" class="">Trips</a></li> <li><a href="about.html" class="">About Us</a></li> </ul> </nav> </header>
Hope this helps. Let me know if it doesn't and I will create a codepen for it that you can use.
Don't give up! You'll feel like you're not getting it a lot of times but the more you do it the better you'll understand. You'll be great at it in no time.