Need help for background image-codepen project

Hi Im seeking for help. I am a beginner. I have tried out to put a URL as my background image. But the image was not shown. Can someone guide me? Being stucked.

At HTML codepen.


At CSS codepen

body, html {

background-color: rgb(255,204,255);


figure {
height: 100%;
max-width: 1000px;
opacity: 0.3;

.bg {
background-image: url(“URL”);
background-position: center;
background-repeat: no repeat;
background-size: cover;

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36.

Challenge: Build a Survey Form

Link to the challenge:

Did you put a URL of an image in this
(“URL”) part of the statement? Cause it should be able to work then.

1 Like


A link to your CodePen would also be helpful.

Thank for reply. Attach my link here

Ya. i put it but im not sure is it a public or private access link.

Hello again!

^^ This is your link - this is not an image link, it’s the webpage URL.
^^Try this one. I got it by right-clicking on the image in the website and selecting “Copy Image Address”.


Oh gosh! Thanksss for it… so happy…being stucked for hours.

I have one more question. What’s the difference between putting an image link at HTML vs CSS?
I thought CSS just to put styling for page.

CSS allows you to set the background image for an element. The image will appear behind the text.

An HTML <img> element is in-line and the text will wrap around it by default.

A very simple explanation because I’m on mobile right now.


Quite good explaination. Appreciate for yr time to reply.

1 Like