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?
url() The url() CSS function is used to include a file. The parameter is an absolute URL, a relative URL, a blob URL, or a data URL.
Usage is simple — you insert the path to the image you want to include in your page inside the brackets of url() , for example: background-image: url('images/my-image. png'); Note about formatting: The quotes around the URL can be either single or double quotes, and they are optional.
use this
background-image: url('../images/background.png');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With