code/link fails with background image from my computer

Question

I'm trying to use a photo ( that I copied the path from) to make my background image. I added an image earlier using the same method to copy the location and it's showing up.background-image:

it's turning blue in the parenthesis. I'm brand new and have no idea what to do. Any help would be greatly appreciated!

#body{
background-image: url(/Users/samanthagaiser/Basic_portfolio/assets/images/dot-grid.png);
}

when I "follow the link" in cs code it clicks over to the next window where I have the image saved.

You really should practice using relative referencing for things like images. A copy of the image should be in your project folder and referencing it should be like this. background-image: url("/images/dot-grid.png"); — darkhouse
– darkhouse, Commented Oct 4, 2019 at 22:59
Please @Samantha review stackoverflow.com/help/how-to-ask and try to create a real verifiable example. This has not data as your css or the link you call. We also don't know what is your current HTML editor. Please, try to improve the question to help us to help you — Alejandro Teixeira Muñoz
– Alejandro Teixeira Muñoz, Commented Oct 4, 2019 at 23:16
Possible duplicate of Can I use an image from my local file system as background in HTML? — Alejandro Teixeira Muñoz
– Alejandro Teixeira Muñoz, Commented Oct 4, 2019 at 23:18

Mises · Accepted Answer · 2019-10-04 23:18:48Z

0

Copy and paste image, .CSS file and .html file in one folder. Or if You have just .html file copy image to same folder as .html then change:

body{
    background-image: url('./dot-grid.png');
}

Path to image have to be relative to file where You load it.

Bellow examples:

No 1.

CSS:   /resources/css/styles.css  
Image: /resources/images/image.jpg

CSS in styles.css:

div { background-image: url('../images/image.jpg');

No 2.

CSS:   /resources/css/styles.css
Image: /resources/css/image.jpg

CSS in styles.css:

div { background-image: url('./image.jpg');

./ = look for image in same folder where .css file is.
../ = look for image below folder where .css file is.
../../ = loog for image two folders below .css file is.

edited Oct 4, 2019 at 23:18

answered Oct 4, 2019 at 23:05

Mises

4,6332 gold badges24 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

code/link fails with background image from my computer

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related