Hi dear Free Code Camp community,
I hope you´re doing well.
I seem to have bumped into an issue with my portfolio project , and after checking several forums/websites, I couldn’t solve it. I hope you can provide me with some insight on what I’m doing wrong.
This is how the code looks like:
HTML
<div class="container-fluid">
<div class="row-fluid">
<div id="divHeader"></div>
</div>
</div>
CSS
#divHeader {
background: url ("http://res.cloudinary.com/kowalski86/image/upload/c_scale,w_553/v1485996296/HeaderPortfolio.jpg") no-repeat;
}
I need to add a background image to <div id="divHeader">
, but CodePen is not retrieving my image. Apparently some hosting websites don’t work well with CodePen, so I’ve tried a few:
PostImage : https://s26.postimg.org/r85rpo5vd/Header_Portfolio_jpeg.jpg
Cloudinary : http://res.cloudinary.com/kowalski86/image/upload/c_scale,w_553/v1485996296/HeaderPortfolio.jpg
Dropbox : https://www.dropbox.com/s/anc64jsbrokyr3b/HeaderPortfolio.jpeg.jpg
But none is working.
Something I also observed is that, if I insert them as images with img src
, they do appear. But as background, there’s no way I can make it work.
Please let me know your thoughts on this.
Thank you for your time.
Cheers,
Anca
Remove space between url
and (
<div id="divHeader"></div>
has width and height set to 0.
Place something in it or give it width and height in style panel.
1 Like
PuPu-KT
February 2, 2017, 11:18am
3
I think it shld be #divheader { background-image: url( your link);
background-repeat: no repeat; }
I took out the commas in the brackets & separated yr no repaet. (adjust height accordingly !)
Same thing happened to me when creating a program to link all my work stuffs together last month!
LOL!
We’re beginners learners, so i would be grateful if someone comes in to validate this.
Thanks a million in advance!
( Oh , BTW if the mods are reading this… i just can’t log out !!)
1 Like
dmpire
February 2, 2017, 12:24pm
4
clear the space between the url and opening bracket. Then specify a height and width for your divHeader id.
1 Like
namrox
February 2, 2017, 1:00pm
5
May you try this one
#divHeader {
height: 250px;;
width: 250px;
background:url(‘http://res.cloudinary.com/kowalski86/image/upload/c_scale,w_553/v1485996296/HeaderPortfolio.jpg ’) no-repeat center center fixed;
background-size: cover;
}`
1 Like
Hey guys,
thank you so much for taking time to answer my question.
I added the height
and width
parameters and deleted the space between url
and (
, and the background image is working now!
Next step is to learn to resize the images correctly, and I’m trying different approaches for that…
I will go ahead and mark this topic as closed.
A good day to you all,
Anca
2 Likes