Ask coding questions

← Back to all posts
how do you add a picture
DylanStein1

im wanting to know how to add a picture like any picture and be able to put it anywhere

Answered by RYANTADIPARTHI [earned 5 cycles]
View Answer
Voters
DylanStein1
Comments
hotnewtop
RYANTADIPARTHI

Solution

try this.

in the IMAGEURL section, put the file name of the image you uploaded, or put the image URL.
It should work

PlatonicC

Does anyone know what to put if the image is in the replit already? <img source="replitfile">

Baconman321

What these guys are saying is the correct way to load an image, but to put it anywhere you want you will have to use CSS.

CSS is a way to style the contents of a webpage.

While putting CSS into a style attribute is not recommended, it shows you how to style tags without extra steps, which should be best for a person who seems so new to HTML like you.

The position:absolute; detaches the image from being relative to the other elements of the page. If you were to put something above the image, it would move down.

Then, after setting the position to absolute (not dependant on the position of other elements on a page), you set the position itself.

there are four types of positioning properties:

  • top
  • bottom
  • left
  • right

Each corresponds to the respective position of the page. Want to put something at the bottom of the page?
bottom:0;

It's as simple as that.

Replace the numbers and properties with the correlates to the position of the page and the number that determines the distance away from that, respectively.

If you want to move by percentage just add % at the end of the number like bottom:15%;. If you want to move by pixels, do the same but replace the % with px like this: bottom:5px;.

Don't forget the semicolon at the end!

Hope this helps!

DylanStein1

and so url is the link? or is it a file from my computer
@Baconman321

Baconman321

@DylanStein1 The file itself is a URL.

It's a relative URL, meaning it doesn't have the site name. Sure, you could put example.com/myImages/myImage.png, but a relative URL is faster to type and would look like myImages/myImage.png (assuming you are in the example.com.

It's a bit confusing, but a file loaded to your website can be accessed to your website via a relative URL.

A file from your computer doesn't have a link because it isn't open to people to access it. Unless you set up a web server that can host that image, no. You would have to upload it to your website.

Coder100

working repl:
https://repl.it/@Coder100/mark-as-correct-answer-EverlastingExtrasmallLivecd#index.html

read more:
https://www.w3schools.com/tags/tag_img.asp

Baconman321

@Coder100

https://repl.it/@Coder100/mark-as-correct-answer-

Oh, no... now you're falling to cycle obsession as well?

Coder100

lmao what @Baconman321

CodingCactus

@Coder100 hey cookie can you stop asking for your answer to be marked as correct before they have acknowledged it as being correct. You've been doing it a lot lately and next time i see it, it will be a warn, and unfortunately due to your current number of warns, it will result in a ban so please stop

Coder100

lmao ok @CodingCactus

DylanStein1

he didnt ask for me to mark him though
@CodingCactus