CSS background image URL path

Question

Hello Im trying to use background for my page using CSS. The image is from another folder and I try to reference her to CSS file.

The CSS file URL is: /var/www/soFit/BO

The image file URL is: /var/www/soFit/BO/images/login

My CSS file:

#login-bg   
{

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

My HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<link rel="stylesheet" type="text/css" href="styles.css" />

</head>

<body id="login-bg"> 

<form action="" method="POST">

Username:  <input type="text" name="username" > 
<br>
Password:  <input type="text" name="password" > 
<br>
<input type="submit" value="enter"> 

</form>

</body>
</html>

Why I cant see my background image?

Have you tried it without the leading slash? background-image:url('images/login/login_background.jpg'); — Steve Sanders
– Steve Sanders, Commented Feb 27, 2014 at 17:25
For future reference if you look in the network inspector in the browsers developer tools you will be able to see the full path the browser is trying to read. — Alex K.
– Alex K., Commented Feb 27, 2014 at 17:25

Mimi · Accepted Answer · 2014-02-27 17:32:27Z

24

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.

edited Feb 27, 2014 at 17:32

answered Feb 27, 2014 at 17:24

Mimi

4673 silver badges10 bronze badges

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

3 Comments

Kyle Shevlin Over a year ago

You should probably explain why it's the issue. The forward slash tells the browser to look for a directory at the same level as the current directory. Removing the forward slash tells the browser to look for a directory within the current directory for the file.

Mimi Over a year ago

@KyleShevlin Absolutely, I was editing the post :) Thank you anyway.

Mimi Over a year ago

@dasdasd Don't mention it :)

Hoijof · Accepted Answer · 2014-02-27 17:24:34Z

6

Try this:

#login-bg   
{

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

Using the slash '/' at the beginning of the route makes it an absolute route, not a relative route, which is what you want.

answered Feb 27, 2014 at 17:24

Hoijof

1,43316 silver badges27 bronze badges

4 Comments

Misunderstood Over a year ago

Technically the correct syntax would be a leading dot slash ` './images/login/login_background.jpg'`

devios1 Over a year ago

@Misunderstood the dot to represent the current directory is a Unix thing. I'm not even sure that's part of the URI spec.

devios1 Over a year ago

I stand corrected, it is indeed part of the URI spec. However, it's technically equivalent to having no leading slash, so it's not technically any more "correct", and in fact it's so obscure on the web I would recommend avoiding it.

Misunderstood Over a year ago

@devios1 I don't remember making that comment or why. Probably because I ran into a case where not using the ./ did not work. If you go by what is "on the web" that would be a bad idea. It's the blind leading the blind out there. Technically I believe it is "more correct". But things change, I've been doing this stuff since the 70's. For example I designed IBM's first Ethernet card for their PC. I always use the full qualified url http://www.example.com/images/example.jpg. The Browsers needs to use the full qualified url and by abbreviating it you give the Browser a little extra work.

Alex · Accepted Answer · 2014-02-27 17:26:26Z

1

just write

background-image:url('images/login/login_background.jpg');

when you write /images it means images folder is coming from the root directory of the website. which in this case is not correct.

answered Feb 27, 2014 at 17:26

Alex

4571 gold badge3 silver badges16 bronze badges

Comments

GeekHamza · Accepted Answer · 2022-03-28 05:45:13Z

1

use this

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

answered Mar 28, 2022 at 5:45

GeekHamza

111 bronze badge

Collectives™ on Stack Overflow

CSS background image URL path

4 Answers 4

3 Comments

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related