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
Darren Franks
1,006 PointsBackground image in by Header element
Hi i want to add a image in my header, do i just add the path in my css under the header tag or do i also put this in my html doc? I would be very grateful for a full explanation of how to for Dummies!!! I have had some suggestions but i think i am ment to add it to my Header in my css but do i add it to my html too and how would i write it in either? So sorry so much to ask, i kind of know but im not convinced i understand it! Feel free to pull my page apart and see where you think i should put this! Thank you, my web page is darrenfranks.org
9 Answers
Niclas Valentiner
8,947 PointsInstead of repeatedly making replies, consider using the comments instead.
As for the color changing and such it's some responsive CSS handling that but it's easier just to tell you where the green line comes from:
border-bottom <--- That property on the header element. It has a size, a style and then a color. Want to change the color? Change the hex code at the end of it. Want it gone? Remove the reference.
As for the color changing and such: even without the property existing in 'normal' CSS, it'll be applied if it's in the responsive part (media query).
PS Think about making a different topic next time? Putting it all in the same topic becomes confusing and very, very cluttered.
Niclas Valentiner
8,947 PointsI checked your site and it's almost there.
Assuming that you're correct about the background image on the header element (we'll just go with this assumption as it's easy to change back if you were wrong) you've got most of the code down already.
//Your current code on the site
background: #6AB47B none repeat scroll 0% 0%;
//Replace the fill text (and brackets) below and it should work
background: url([path to your image here]) #6AB47B none repeat scroll 0% 0%;
And just in case I made a mistake somewhere, or you want to read up on the background property, here's a link for you.
Darren Franks
1,006 PointsHi Niclas, I am so grateful thats exactly the answer i was looking for with the most productive response thank you! i Understand it totally from your help! I gather i still leave the i still leave the color content for those who chose not to display images? Do i put nothing in the html just the CSS as described?
Niclas Valentiner
8,947 PointsIt is a best practice to keep CSS in external files and avoiding inline styling (putting CSS code in your HTML with the style attribute).
CSS isn't my best language and I haven't really worked with backgrounds for a while so I don't recall exactly how background with image and color interact but I believe the color becomes obsolete or a fall back in case the image path is broken.
Darren Franks
1,006 PointsHi Niclas, Do i also write it like this to tell the file to come out and get the image? url('../img/mountains.jpg'); using '../ ?
Niclas Valentiner
8,947 PointsThat depends on your file structure. Assuming you have a css folder and an img folder in the same root (eg. www/css and www/img) then this would work.
".." goes 1 folder up (from www/css to www) and from there it looks for the img folder.
Darren Franks
1,006 PointsYes i have a CSS folder and and a image folder in the same root!
Darren Franks
1,006 PointsHi Niclas again sorry but if i could get your help id be grateful, i have given my website http://darrenfranks.org/index.html a header background image which im pleased with thank you, but i cant think how to get rid of the small green line at the bottom; which goes orange when you look at it on a mobile device! could you pick it again and tell me how to make it all image with no green or orange background on a mobile device. I know its to do with padding im sure but i want the image to take up all of the header element! Thank you very much! D
Darren Franks
1,006 PointsI do belive ive fixed it but your input would be most valuable!
Darren Franks
1,006 PointsNo ive not fixed it the green line is still there!
Darren Franks
1,006 PointsThe green line is only there on larger displays!
Darren Franks
1,006 PointsDarren Franks
1,006 PointsThank you again for you help! I do apologise for my use of the site i am very new and just followed the train of conversation i didn't see the reply tag! Again as i say thank you and it did work!