How to Use an Image from My Local File System as Background in HTML

How to give the background-image path in CSS?

Your css is here: Project/Web/Support/Styles/file.css

1 time ../ means Project/Web/Support and 2 times ../ i.e. ../../ means Project/Web

Try:

background-image: url('../../images/image.png');

How to add local file as background in CSS?

Please refer the below tested code.

The problem was you were using background-image which only accepts one parameter, you were supposed to use background which is a shorthand for writing all the background properties into one.

Refer: CSS background [last section]

You need to change the below CSS

body {
        background: url("Water.jpg") no-repeat center center;
        background-size: cover;
    }

Code example:

html, body{  width:100%;  height:100%;  margin:0px;}body {    background: url("http://lorempixel.com/400/200/") no-repeat center center;    background-size: cover;}

<html><body></body></html>

how to set background image url for local files?

When you're using relative paths, Webpack is unable to resolve them properly if they are found inside your inline style attributes. Webpack, can, however, resolve the image path properly if it is use as an <img> element source in the template directly. Therefore, the solution to use a resolved image path as a CSS attribute is to simply reference it as a computed property.

In your template, you can use v-bind:style="heroImage" to reference a computed property:

<template>
  <div id="app">
    <div v-bind:style="heroImage">
        Content without background image
    </div>
  </div>
</template>

Then, in your VueJS component itself, you can do:

computed: {
  heroImage() {
    return {
      backgroundImage: `url${require('../assets/images/HeroImg.jpg')}`
    };
  }
}

How to use local file as background image url

I guess that C:\xampp\htdocs\ is the root of your web site, meaning that relative URL / in your HTML, CSS and JavaScript files will probably point to C:\xampp\htdocs\. If so, URL /Folder/pic.jpg might just work for you, since that will internally translate to file C:\xampp\htdocs\Folder\pic.jpg.

.jumbotron{
    background: 
      linear-gradient(
        rgba(0, 0, 250, 0.25), 
        rgba(125, 250, 250, 0.45)
      ),
      url("/Folder/pic.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    color:white !important;
}

Local background image not displaying in html

Like, I mentioned in my comment above, "\" or backslash is generally used for referring to the absolute path of a path and is a Windows standard for referring to the location of files.
We make use of "/" or forward slashes as they are used to refer to the relative path with the current working file. So,

./ refers to the current working directory.

../ refers to the parent directory.

./images/ refers to a folder which is present in the same location as the working directory and likewise to access the files inside the folder, you put a forward slash to refer to it.

As for, why it worked when you used the backslash path inside the img tag but not in the css, I'm not really sure of. But it's not a good practice and definitely not the proper way of doing things. Hope, it helps.

How do I select a local background image for a section in my website?

Your website is stored on a server if it's a live site. So to the server that the site lives on your file path images/folder/image.jpg doesn't get found on the server that the site lives on (because the file is in that location on your machine not your sites machine basically). If your trying to find an alternative to uploading the file to the site you could add it to a sharing system like google cloud and use the link to view the photo as your background image url.

If your site is a local build still and the site lives at /users/sites/mysite and your images live at /users/images you would have to navigate backwards through the files from /mysite to get back to the /users folder then you can use the file path that you have , it can be a bit tricky to get it the first time but once you find your file path you should have no issues recreating the same selector to get photos from the /images/folder folder to display on your site. you can navigate backwards through the folders by using ../ in your url selection. In the above example getting from /mysite back to /users would require your css selector to look like this url(../../images/folder/image.jpg) where each of the ../ will take you out of a folder until your pointing to the /users folder then from there you can go into your images folder and find the file your trying to get added.