-1

Following is my CSS and HTML file.`

.backgroundimage{
 backgroud:url('C:\Users\shvikram\Desktop\Social_Media\Images\login_page.jpg');
 background-attachment:fixed;
}
    <html>
 <head><link rel="icon" href="Images\Logo.ico" type="image/x-icon" /></head>
 <link rel="stylesheet" type="text/css" href="CSS\main.css">
 <title>Social Media</title> 
 <body>  
  <div class="backgroundimage">Hello World</div>    
 </body>
</html>

The Directory Structure is as follows.

Social_Media directory contains Images, CSS and index.html file.

I tried using following notation also, but it is not working.

.backgroundimage {
   background-image: url('\Images\login_page.jpg');
   background-repeat: no-repeat;
 }
XYZ
  • 4,450
  • 2
  • 15
  • 31
Vikram Sharma
  • 199
  • 2
  • 2
  • 13

2 Answers2

1

As first, your stylesheet link and title are not withing the head tag.

As second, the links inside your stylesheet are relative to CSS file (not to the file where the stylesheet was included), so it should be:

.backgroundimage{
    backgroud: url('../Images/login_page.jpg'); /* In parent folder, Images */
    background-attachment: fixed;
}

As third, do not use backslashes for file paths, no matter you are on Windows OS.

As fourth, go on and use your browser inspector, to be sure all resources are loaded, than to track errors etc.

Final HTML should look like this:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" /> 
        <link rel="icon" type="image/x-icon" href="Images/Logo.ico" />
        <link rel="stylesheet" type="text/css" href="CSS/main.css" />
        <title>Social Media</title>
    </head>
    <body>      
        <div class="backgroundimage">Hello World</div>              
    </body>
</html>
skobaljic
  • 9,379
  • 1
  • 25
  • 51
1

It's only a problem with the image path. It should be relative to your HTML file:

<head><link rel="icon" href="Images\Logo.ico" type="image/x-icon" /></head>
  <link rel="stylesheet" type="text/css" href="CSS\main.css">
    <title>Social Media</title> 
<body>      
        <div class="backgroundimage">Hello World</div>              
</body>

CSS:

.backgroundimage {
   background-image: url('http://via.placeholder.com/350x150');
   background-repeat: no-repeat;
   height: 300px;
 }

Read about it here: How to give the background-image path in CSS?

Piotr Drabik
  • 131
  • 4