Adding background image

Web Development Bootcamp
1

I am trying to add the image in this link clear blue body of water photo – Free Image on Unsplash as a background to my survey form. I followed this syntax to add the image, however, the image is not being added. Could someone point me to what I could be missing? I noticed that the url link doesn’t have .png or .jpeg at the end, but I am not sure what to do.
body {
background-image: url(clear blue body of water photo – Free Image on Unsplash);
}

1 Like
2

Hi Ramya @thehappycoder

Did you use ""?


body {
   background-image: url("image.gif");
   background-color: #ccc;
   background-image: linear-gradient(blue, white); // or something like this as a fallback
}

The background-color is just a fallback just in case your image doesn’t load.
Remember there are more background- properties you might need, like background-repeat.
Let us know is you have solved.
You can check them here easily: [CSS Reference](https://w3schools css properties).
Happy coding!!

3

@carlost2672543 Thanks so much for responding. I added the "" and still isn’t working :frowning: . The background-color is working though. This is my code now

body {
  background-image: url("https://unsplash.com/photos/XexawgzYOBc");
  background-repeat: repeat-y;
  background-color: #ccc;
}
}
1 Like
4

Hi @thehappycoder

You have 2 ended brackets there

5

Oh the two brackets are only in the reply. My code doesn’t have two brackets though.

2 Likes
6

You are using a wrong link .
The link is for the website where you found the image

try this one:

https://images.unsplash.com/photo-1530053969600-caed2596d242?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80
3 Likes
7

Hi again @thehappycoder

@andrepotthast2588084 is right. You are using the link to the page not to the actually image, sorry I was busy and I dint check before.

8

Thank you!!

Could you let me know how you got this link? I tried to look for a link that’s specific to the image but couldn’t find it anywhere on the page.

9

right clik on the image → copy image link

2 Likes
10

background-image: url(“image addrees”)

11

you have to copy image address inside double qoute
like this
background-image: url(“image Address”)

1 Like
12

Thank you everyone!!

1 Like
13

Guys need help on step 15 textarea is still showing Cap x need help

14

This topic was automatically closed 45 days after the last reply. New replies are no longer allowed.