CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
grhu
grhu

Reputation: 470

CSS background-image not showing my image

I have a problem with background-image property in one of my sections. Here is the HTML code:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css" type="text/css">
    <link rel="stylesheet" href="css/custom.css" type="text/css">
    <title>Elipsis</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
</head>
<body> 
<header id="intro">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12">

            </div>
        </div>
    </div>
</header>
<main>
<section id="about">  
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12">
            </div>
        </div>
    </div>
</section>   
<section id="services">  
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12">
            </div>
        </div>
    </div>
</section>   

</main> 
<footer id="contact">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12">
            </div>
        </div>
    </div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

And CSS:

#intro {
    background-image: url(.../.../img/intro.png);
    background-image: url(intro.png);    
    background-image: url(".../.../img/intro.png");
    background-image: url("intro.png"); 
}

Index.html is in root folder, css file is in root/css/... and intro.png is in both root/img/... and root folders. Why it's not showing? I've read a couple of topics here on stack and some articles from google but nothing seems to work.

Upvotes: 0

Views: 784

Answers (2)

Johannes
Johannes

Reputation: 67778

The way you wrote that CSS rule only the very last line will apply, which is

background-image: url("intro.png");

(it overwrites the other lines before it)

So you probably want to change that to

#intro {
  background-image: url("../img/intro.png"); 
  height: 300px; /*whatever value, if there is no content */
}

Plus, as someone wrote in the comments: if that element has no content and no defined height, it will have height 0, therefore the background image will not be visible.

Upvotes: 1

jmag
jmag

Reputation: 826

Try this. background-image: url('../img/intro.png');

I usually drag and drop that image to get the proper path. I hope this helps.

Upvotes: 1

Related Questions