[CLOSED] Cannot assign background image URL to a <div>

[CLOSED] Cannot assign background image URL to a <div>
0.0 0

#1

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


#2

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.


#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 !!)


#4

clear the space between the url and opening bracket. Then specify a height and width for your divHeader id.


#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;
}`


#6

Hey guys,

thank you so much for taking time to answer my question.:grin:

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


#8