Applying background from pc storage

HTML-CSS
1

How can i apply a “background-image” to my css style from my pc storage. I tried url(“”) but it doesn’t work. I googled it and found out i needed to use an http server but i really don’t get it. Can someone pls explain in details.

/* css style */

*  {margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins", sans-serif;
color: #fff;}

body  {min-height: 100vw;
background-image: url("c:\Users\user\Downloads\autumn-season-leafs-plant-scene-generative-ai.jpg");
background-size: cover;
background-position: center;}

.header {position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 100px;
background: transparent;
display: flex;
justify-content: space-between;
align-items: center;
}

.name {font-size: 32px;
color: #fff;
text-decoration: none;
font-weight: 700;}
2

Please post your current code. Thanks

3

i have pls help check.

4

You can only use this if you only want to use your website on your own computer. Where are you hosting this website?

5

i am not hosting it. at least not yet. i am just trying to practice html and css by building myself a port folio. i am using vs code and a live preview server extension to preview my work on a browser.

6

You want to use the relative path to the image file:

7

thanks. gone through this, i have checked my link in html and it is accurate. it doesn’t quite hit the nail on the head.

8

You aren’t using a relative path as described in that link. If you changed to using a relative path, please post your updated code.

9 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css"/>
    <title>Testing</title>
10

Ok, but that doesn’t have the line that you needed to change

11

ohh. i see. so i am to add my local storage to the html too. i’ll give it a try.

12

I don’ think the StackOverflow link said something about “add my local storage to the html”? The url() for the background-image should be the relative path from your CSS file to the image you want to use.

13

:sweat_smile: i’m not getting this thing to be honest.

14

Do you know what a relative path is? What I’m trying to say won’t make much sense if you don’t know the difference between an relative and absolute path.

15

relative path is the address directive to a file or folder.

16

Right, and this is an absolute path for your computer’s filesystem

You need the path relative to (from) your styles.css file to the image.

17

just figured it out!. apparently i needed to place the file item in the location of my css file. thank you for you assistance!.

18

I would suggest you go through this part of the curriculum.

It has a section on Links and Images as well.

19

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