Need help for background image-codepen project

Code Feedback
1

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.

cleanser

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:

2

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
3

Hello!

A link to your CodePen would also be helpful.

4

Thank for reply. Attach my link here

5

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

6

Hello again!

"https://www.packagingstrategies.com/articles/91086-new-skincare-brand-amps-up-packaging-with-minimalist-design"
^^ This is your link - this is not an image link, it’s the webpage URL.

https://www.packagingstrategies.com/ext/resources/2019-Postings/New-Packages/care-for-web.png?1554125891
^^Try this one. I got it by right-clicking on the image in the website and selecting “Copy Image Address”.

2 Likes
7

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

8

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.

9

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.

2 Likes
10

Quite good explaination. Appreciate for yr time to reply.

1 Like