CODEWITHSUNDEEP
cssbackground-imagestylinginline-styles
Sarani
Sarani

Reputation: 1

Background image not displaying when applied via class with embedded CSS

I'm facing an issue with setting a background image using a CSS class with embedded CSS. Here's the CSS code I'm using:

.test-background {
    background-image: url('/img/roads.jpg');
    background-size: cover;
}

And here's the HTML code where I'm applying the .test-background class:

<div class="row test-background">
    <div class="col-md-2"></div>
    <div class="col-md-8 d-flex justify-content-center align-items-center" style="height: 100vh;">
        <img src="img/friend/1.png" class="img-fluid" style="width: 90%;" alt="Center Image">
    </div>
    <div class="col-md-2"></div>
</div>

The issue is that the background image is not displaying when I apply the .test-background class. However, if I set the background image directly as an inline style, it works fine:

<div class="row" style="background-image: url('img/roads.jpg'); background-size: cover;">
    <!-- Rest of the HTML content -->
</div>

I've double-checked the file path to the image and made sure it exists in the correct directory. Is there something I'm missing or doing wrong in my CSS or HTML code?

Upvotes: 0

Views: 66

Answers (1)

Fatemeh satouri
Fatemeh satouri

Reputation: 49

I checked your code. Your code is completely correct and I can easily set a backgradle on the CSS page. One of the reasons that came to my mind is that you may not have link to the CSS file or mistakenly link it to your HTML page.

 <link rel="stylesheet" href="style.css">

It was the only code I added to the html page and your code worked.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- link css file -->
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="row test-background">
        <div class="col-md-2"></div>
        <div class="col-md-8 d-flex justify-content-center align-items-center" style="height: 100vh;">
            <img src="img/friend/1.png" class="img-fluid" style="width: 90%;" alt="Center Image">
        </div>
        <div class="col-md-2"></div>
    </div>
</body>

</html>

And the second problem I noticed from your code is that you did this way:

 background-image: url('./image/imageNmme.png');

But you have already used using \ maybe you have a point before . \

I hope my response has helped solve your problem.

Upvotes: 0

Related Questions