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
Omar Elfishawi
4,060 PointsCSS/Bootstrap template - Replacing Image
Hi, and thanks in advance for your help.
I downloaded a Bootstrap landing page theme and I am customising it for my business. The header background image url is inside the CSS file
background-image: url("../img/header.jpg"); background-position: center;
When I replace the header.jpg with my file (shoes.jpg) I still see the header jpg image.
Nothing in the index.html about this .jpg file as long as i can see.
What am I doing wrong?
2 Answers
Kristiana Georgieva
14,595 PointsHi. It really depends on the location of your shoes.jpg image. Is it in the same folder as header.jpg? Because if not, you will need to update the path to it (meaning that it's not going to be '../img/').
Omar Elfishawi
4,060 Pointshi Kristiana, thanks for your help. The image is in the right folder, i also replaced other images. I FOUND A SOLUTION though I dont know why. There were other files in the folder and i replaced it everywhere, eventually i found a file called creative.min.css its format is very strange
*/body,html{width:100%;height:100%}body{font-family:Merriweather,'Helvetica Neue',Arial,sans-serif}hr{max-width:50px;border-width:3px;border-color:#f05f40}hr.light{border-color:#fff}a{color:#f05f40;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s}a:focus,a:hover{color:#f05f40}h1,h2,h3,h4,h5,h6{font-family:'Open Sans','Helvetica Neue',Arial,sans-serif}p{font-size:16px;line-height:1.5;margin-bottom:20px}.bg-primary{background-color:#f05f40!important}.bg-dark{color:#fff;background-color:#222!important}.text-faded{color:rgba(255,255,255,.7)}section{padding:100px 0}.section-heading{margin-top:0}::-moz-selection{color:#fff;background:#222;text-shadow:none}::selection{color:#fff;background:#222;text-shadow:none}img::selection{color:#fff;background:0 0}img::-moz-selection{color:#fff;background:0 0}body{-webkit-tap-highlight-color:#222}#mainNav{border-color:rgba(34,34,34,.05);background-color:#fff;font-family:'Open Sans','Helvetica Neue',Arial,sans-serif;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s}#mainNav .navbar-brand{font-weight:700;text-transform:uppercase;color:#f05f40;font-family:'Open Sans','Helvetica Neue',Arial,sans-serif}#mainNav .navbar-brand:focus,#mainNav .navbar-brand:hover{color:#f05f40}#mainNav .navbar-toggle{font-size:12px;font-weight:700;text-transform:uppercase;color:#222}#mainNav .navbar-nav>li.nav-item>a.nav-link,#mainNav .navbar-nav>li.nav-item>a.nav-link:focus{font-size:13px;font-weight:700;text-transform:uppercase;color:#222}#mainNav .navbar-nav>li.nav-item>a.nav-link:focus:hover,#mainNav .navbar-nav>li.nav-item>a.nav-link:hover{color:#f05f40}#mainNav .navbar-nav>li.nav-item>a.nav-link.active,#mainNav .navbar-nav>li.nav-item>a.nav-link:focus.active{color:#f05f40!important;background-color:transparent}#mainNav .navbar-nav>li.nav-item>a.nav-link.active:hover,#mainNav .navbar-nav>li.nav-item>a.nav-link:focus.active:hover{background-color:transparent}@media (min-width:992px){#mainNav{border-color:rgba(255,255,255,.3);background-color:transparent}#mainNav .navbar-brand{color:rgba(255,255,255,.7)}#mainNav .navbar-brand:focus,#mainNav .navbar-brand:hover{color:#fff}#mainNav .navbar-nav>li.nav-item>a.nav-link,#mainNav .navbar-nav>li.nav-item>a.nav-link:focus{color:rgba(255,255,255,.7)}#mainNav .navbar-nav>li.nav-item>a.nav-link:focus:hover,#mainNav .navbar-nav>li.nav-item>a.nav-link:hover{color:#fff}#mainNav.navbar-shrink{border-color:rgba(34,34,34,.05);background-color:#fff}#mainNav.navbar-shrink .navbar-brand{font-size:16px;color:#f05f40}#mainNav.navbar-shrink .navbar-brand:focus,#mainNav.navbar-shrink .navbar-brand:hover{color:#f05f40}#mainNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link,#mainNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link:focus{color:#222}#mainNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link:focus:hover,#mainNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-
with the finder tool i could find the image and replace it, it worked but i dont know why, im just at one third of the front end development track and i dontknow what this file is, its like all cluttered! thanks again