I try to use jpg files for the background in my project but I can't do this via .css files.

First of all - it seems all settings are right, since the setting from the HTML file works fine:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Home page</title>
</head>
<style>
body {
    background-image: url("img/mainpage.jpg");
}
</style>
...

And when I include my CSS file and use background-color, it also works fine:

main.css:

body {
    background-color: #193340;
}

But not for background-image. Even when I use both options, only color option is applied:

main.css:

body {
    background-color: #193340;
    background-image: url("img/mainpage.jpg");
}

how to correctly set the image file exactly in .css file?

CodePudding user response：

Pretty sure you are not refering to image path right inside the main.css file.

background-image: url("img/mainpage.jpg");

Try to write down correct relative path to your image. if let's say your file structure is like this

index.html
img/mainpage.jpg
css/main.css

then correct way to your refer to image file will be

background-image: url("../img/mainpage.jpg")