0

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.

Alejandro Teixeira Muñoz
  • 2,758
  • 1
  • 22
  • 31
Samantha
  • 1
  • 1
  • 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 Oct 04 '19 at 22:59
  • Please @Samantha review https://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 Oct 04 '19 at 23:16
  • Possible duplicate of [Can I use an image from my local file system as background in HTML?](https://stackoverflow.com/questions/14519388/can-i-use-an-image-from-my-local-file-system-as-background-in-html) – Alejandro Teixeira Muñoz Oct 04 '19 at 23:18

1 Answers1

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');
  1. ./ = look for image in same folder where .css file is.
  2. ../ = look for image below folder where .css file is.
  3. ../../ = loog for image two folders below .css file is.
Mises
  • 4,251
  • 2
  • 19
  • 32