How can I add an image for background

Question

How can I add an image as an HTML code background?
This is the code I'm working on now
https://code.sololearn.com/W0SJkxS1j8xq/?ref=app

Thanks, guys already have

https://code.sololearn.com/WNodI402MgYY/?ref=app

Answer 1

msfninja I didn't aware that an url could contain parentheses, whitespace or quotes.

Do you mind showing me some real urls that uses these characters without encoding?

Answer 2

SoloProg, I just figured it out thanks btw

Answer 3

Always use css property, background to add background image, no need to use background-image.

Only use background-image when inheriting other related background-* properties from a parent element, or if you need to remove all the values except the background-image.

Similarly for background-color, we don't use background-color, and only use background, if no inheriting other background properties is needed.

For css value to define url we use url(https://imglink), instead of url("https://imglink"), no double quotes is required.

Eg.
body {
background: url(https://i.ibb.co/zsPQ4KT/Html-01.jpg);
}

https://code.sololearn.com/Wx83z3OloxKe/?ref=app

Answer 4

From what I've seen you have two body tags ,think you need to check that again and then the div tag you opened I never saw where you closed it.

Answer 5

you want to do in css

in css:

eg:

body{
background:any image;
}

Answer 6

There are several possible reasons why your images are not showing up on your pages as expected: The image file is not located in the same location that is specified in your IMG tag. The image does not have the same file name as specified in your IMG tag. The image file is corrupt or damaged.

Try it

scr="https://scontent.fdoh1-2.fna.fbcdn.net/v/t39.30808-6/260673546_432409571947914_9033244441184486532_n.jpg?_nc_cat=107&ccb=1-5&_nc_sid=09cbfe&_nc_ohc=jLMweTzgQOgAX-xcufr&_nc_ht=scontent.fdoh1-2.fna&oh=00_AT-bXS8XZBCLZd4CVsVKdQ0op4Rkjl7CkjQDCa_Q9Rnmcw&oe=626BB562"

Answer 7

Chris Coder I've updated the code already

Answer 8

Tomiwa Oyenekan Yes I have seen your code. But you said you figured out the Issue with the pictures. But I don't see them in your code.

Answer 9

Looks Great, Good Job!

Answer 10

Thanks mate

Answer 11

I edited it already

Answer 12

body {
background-image: url();
background-position: center;
background-size: cover;
}

Answer 13

You can add css style at header of document opening style tag, also you can use css as external file saving .css file extension, then write this code
Body{
Background-image: url("name.jpg");
Background-position: relative;
}
Thank you

Answer 14

Great update your code bit I'd like to see how you did it

Answer 15

https://code.sololearn.com/W0SJkxS1j8xq/?ref=app

Answer 16

Chris Coder check the new link I sent

Answer 17

https://code.sololearn.com/WHyrPvdNsU10/?ref=app

Answer 18

Open css file..
Write this code
Body{
background-image: url("background-image.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}

Answer 19

Calviղ Great! Thanks for the Info.

Answer 20

Use this css property
Body{
Background-image: url("path/url_of_image")
}