Can't add background image

Code Help HTML/CSS/JS
1

So I just want to add a simple image to my website but its impossible! The design was created on Figma and so first I tried to copy/paste as CSS, I created a style.css file and I pasted what Figma gave me. Didn’t work.

I then tried to upload the image file and just reference the image as the background and ran this code

body {
  background-image: url("images/crayons v1.png");
  background-repeat: no-repeat;
  background-size: cover;
}

BUT NO LUCK! ):

I don’t know what I am doing wrong any help would be lovely.

2 
body {
  background-image: url('link to the image here');
  background-repeat: no-repeat;
  background-size: cover;
}

The first thing missing is the link to the image. If I understood you correctly, the design is stored on Figma. You’ll have to export it and host it somewhere. I also noticed smart quotes in your post. Those aren’t going to work.

4

Do you have the image downloaded or a link to it?

6 
body {
  background-image: url('https://global.discourse-cdn.com/business7/uploads/replitteams/original/2X/9/913e500cdecfc2b1d32c7da1b9f5220f435f9676.jpeg');
  background-repeat: no-repeat;
  background-size: cover;
}

This could work for the screenshot you sent. Let me know if it works.

7

I think you want to use the background image of that page. Right?

1 Like
8

Yes I was actually about to give you a new image to remove the header above.

9

My next headache will be to get the buttons to work hahahahahaha but this is so fun!

1 Like
10

crayons v1 webpage
crayons v1 webpage1440×1024 196 KB

11

I’d suggest removing the buttons from the image itself.

12

Okay, and it would just be easier to design that into the code directly?

13

crayonsv1webpage
crayonsv1webpage1440×1024 188 KB

can you make the code for me again for that image? :smiley:

THANK YOU KIND SIR

14 
body {
  background-image: url('https://global.discourse-cdn.com/business7/uploads/replitteams/original/2X/f/f2ca68d2d01dc80aa58683a783880d535c8d62d3.jpeg');
  background-repeat: no-repeat;
  background-size: cover;
}

Here’s the updated snippet. If it works for you, could you mark my post as the solution?

15

Is there somewhere I could post for someone to potentially do this simple project for me? I think its a very simple website that could probably take an experienced coder no time (im guessing)… is that just me posting a bounty?

17

They want it in the background of the page.

18

You could try putting it in the Collaborations tag.

19

Could you explain this a little more to me? Is this to make the buttons interactive? because currently I have the image… but my buttons on my website are not designed and are randomly placed on the website.

1 Like
20

image
image594×544 74.5 KB

21

They didn’t realize you wanted it in the background so they posted the wrong code.

1 Like
22

Do you want it to fill the whole page?

23

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