Please any one tell me why background image not working using sass

This is the first time I am using sass, so, I don’t know is there any problem. I am using koala for compile scss

<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./base.css">
   <div id="mainView">
       <div id="navigator">
        <div id="logo"><p>Anime</p></div>
        <div id="navigation">
                <li class="nav-item">Home</li>
                <li class="nav-item">About</li>
                <li class="nav-item">Community</li>
                <li class="nav-item">Blog</li>
                <li class="nav-item">Contact us</li>
        <p>We are the best group to provide news about Anime and Manga</p>
        <p>There are more than 30 people in our ground who's working with anime production company like KyoAni</p>
        <button>Discover Us</button>
    <section id="types">
            <img src="" alt="">
            <p>Find romance anime which have awsome heart whelming story line</p>
            <img src="" alt="">
            <p>Anime with epic fight and badass character</p>
            <img src="" alt="">
            <p>slice of life</p>
            <p>Anime with beautiful story life and great character development</p>
    <section id="manga">
        <div><img src="" alt=""></div>
        <p>Let's talk about manga</p>
        <p>Manga is like a comic book and because it's created in japan, so we call it manga
            many anime stroies are based on manga. If a manga gettin very popular then producar make it an anime.
            So,yeah manga is very awesome thing
    <section id="hub"></section>
    <h3>Community hub</h3>
    <p>This is the place where we find young talent. If you are a story writer or illustrator, then show us your taled</p>
        <p>Submit your stories here</p>
        <p>Submit your wounderful drawing</p>
        <p>talk with our professional about your carrer in japan anime world</p>


    height: 100%;
    margin: 0;

@import "main";


    margin: 0;
    height: 80vh;
    background-image: url("./image/Glassess.png");
// Navigation area

    padding-top: 20px;
    margin-top: 20px;
    overflow: hidden;
    width: 70%;
    margin: auto;
    background-color: white;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 30px;
    align-items: center;
        padding-left: 20px;
        font-size: 1.2rem;
    #navigation ul{
        display: flex;
        justify-content: space-around;
        list-style-type: none;
        padding-right: 10px;
        align-items: center;
    #navigation ul li{
        height: 100%;
        display: block;
        font-size: 1.1rem;
        height: 100%;
// main text area
    text-align: center;
    position: relative;
    top: 30%;
        font-size: 2.2rem;
        font-size: 1.4rem;
        padding: 10px;
        border-radius: 15px;
        font-size: 0.9rem;
        background-color: hsl(228, 100%, 63%);
        box-sizing: border-box;
        color: white;

Perhaps because you are using SCSS syntax instead of SASS?
SASS syntax does not use curly braces.

Rename the file as a .scss instead and try to compile once more.

Ohh no…sorry for that…it was my typing mistake I actually used scss not sass

I assume you have a file named base.css already and it is in the root directory, and also that you have set it up to compile it to base.css already?

I can’t be certain with the provided information.

I have not used koala for compiling myself. I typically use node-sass to compile.

1 Like