How to Give the Background-Image Path in CSS

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');

CSS background image URL path

Remove the leading forward-slash from the image URL, as follows:

#login-bg {
    background-image:url('images/login/login_background.jpg');
    font-size: 20px;
}

By using the leading forward-slash, browser tries to load the image from the web root directory of the domain (e.g /var/www/) instead of the current (CSS) file location.

React path to public folder in css background image

They have changed that but I don't know why. Working path:

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

EDIT 2021

For people who think that it doesn't work:

https://codesandbox.io/s/agitated-turing-gsnr3

Correct way to set a background image path for development and production?

if your folder structure is like

/css
/js
/img

In most cases css and images will be in their separate folders so you need to go back one step by using ../ It means it will go back one folder so the correct CSS property would be,

html {background-image: url('../img/background.jpg')}

This will work in all situation and servers unless you chnage the folder structure.

And if your css and images both are in same folder you can just write

html {background-image: url('background.jpg')}

for more information see this thread : How to go up a level in the src path of a URL in HTML?

CSS- tricks blog - Quick Reminder About File Paths

SCSS/CSS background-image url path problem

In a perfect world your URL paths should be absolute, so always starting with / refering to the base path of the domain.

You have:

background-image: url('./../img/coffee.png') no-repeat;

The shape you should be looking for is:

 background-image: url('/folder/img/coffee.png') no-repeat;
                        ^ This lead slash references the base path of the domain.

So, the above example is domain.com/folder/img/coffee.png - you see the leading / is the base the whole URL is based from.

The advantage of this is your SCSS or CSS or image files can be placed in any location in your domain structure.

Absolute Pathing is the key to success!

Example 2:

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

Image is located at:

 mydomain.org/images/tea.png 

The location of the SCSS or CSS file is not important, as long as it's on the same domain.

background-image path css

url() value in css has to be between quotes:

section.middle{
    background-image: url("/public/css/img/gymbackgroundhome.jpg");
}

Can't find the right path for background-image: url() on xampp localhost

because the image is in another directory, I would suggest putting the exact path of the image.

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

Path in css to call background image in codeigniter

Please update your question and put your file structure.
Assuming that your css file is inside the css folder and image file inside img folder within the assets directory.

Call html helper inside your controller:

$this->load->helper('html');

How to call the stylesheet:

<?php echo link_tag('assets/css/home/css/style.css'); ?>

Try to change the url like this:

background: url(../img/home/images/cover.jpeg)no-repeat center;

---

Related Topics