CSS background image URL path

12
votes

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?

3
htmlcssimagebackground
leading forward-slash is the issue. – John Riselvato
Have you tried it without the leading slash? background-image:url('images/login/login_background.jpg'); – Steve Sanders
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.

3 Answers

21
votes

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.

6
votes

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.

1
votes

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.