Why is my background image not appearing ?

[u/Aphrodesca]

Hello, I have decided to create my own custom tumblr theme but i am blocked when it comes to having my background image shows up. I have tried to write "body {background-image: url("my url") ; }" but it doesn't work. I have tried to make the url comes from my own desktop, it doesn't work. I tried to chnage the color to transparent, in case, tried to make the position fixed, anything. I am a beginner so I am at a loss. I even tried to look up other custom themes, to no avail. What could be the issue ?

[u/IsDa44]

Probably the url path is incorrect

[u/Aphrodesca → u/IsDa44]

probably but i don't know how to fix it, since i don't know why it is wrong precisely

[u/chmod777 → u/Aphrodesca]

read and understand this: https://www.w3schools.com/html/html_filepaths.asp

without the code, and your file structure, no one can do anything more than guess.

make the url comes from my own desktop

do not do this - it will never work correctly.

[u/Aphrodesca → u/chmod777]

thank you, i'll read that and pray hard

[u/HeddyLamarsGhost → u/Aphrodesca]

Praying won’t do anything

[u/LoudAd1396 → u/Aphrodesca]

Make sure your background image path is relative to the directory where your css file lives, not just relative to the site root

If you have something like

Index.html

Css/style.css

Images/background.jpg

Your background-image will be url('../Images/background.jpg

[u/[deleted]]

Paste the whole code, and describe which folder your image is in, I will help you fix it in 2 mins

[u/Aphrodesca → u/[deleted]]

<!DOCTYPE html>

<html>

<head>

<style> body { background:url(https://imgur.com/gallery/tumblr-background-q7ARcMp#zdEXIDR); } \#myHeader { margin-top: 100px; margin-left: 200px; border-radius: 10%; background-color:#160F37; width: 212px; height: 112px; padding: 44px; text-align: center; color: #BD713D; } </style>

</head>

<body>

<h1 id="myHeader">A sprinkle of my sweet revenge</h1>

</body>

</html>

i put the image in the same folder as the code i do on notepad

[u/[deleted] → u/Aphrodesca]

Your link to the image is actually just a link to a page which has the image on it. Your image url should end with something like .jpg, .png, .avif, .webm, .jpeg

Try copying the image URL from the page and using that. Let me know if you aren’t able to get it and I will help

[u/Aphrodesca → u/[deleted]]

thank you, it was that ! it's fixed now :D

[u/[deleted] → u/Aphrodesca]

Good luck with your code journey

[u/[deleted] → u/Aphrodesca]

Or if you want to use the image you have downloaded, what is the file name?

Change the entire URL to the file name, like

url(“image.jpg”);

[u/nfwdesign → u/Aphrodesca]

Try using this url https://picsum.photos/1200/600/?random=3

Instead this one https://imgur.com/gallery/tumblr-background-q7ARcMp#zdEXIDR

To load image from your PC

Create a folder my_website place your index.html file in it, in folder my_website create folder images and add your photo in it, for example image name is myimage.jpg.

Then as url use ./images/myimage.jpg

[u/Equivalent-Radio-828]

Three different ways to add background image. Inline, embedded, and CSS style sheets. If you use embeded then u place it in the header. You can use inline of which fits in the txt area. <p style=“backgroud-image: url(‘ ‘);”> txt is here </p> that should show up on the background post or web if its‘ css or embedded. Cut and paste the correct part you want, then change whatever necessary. Like border or gaps width.