div can not be styled (e.g. background) with external css file
Question
My hierarchy is the following:
├── static
│ ├── css
│ │ └── main.css
│ ├── img
│ │ └── main_bkg.jpg
│ └── js
└── templates
└── index.html
In my index.html , I have the following code:
<body>
<header> ... </header>
<div class="container"></div>
<footer> ... </footer>
</body>
In my main.css file, I have
.container {
background-image: url('../img/main_bkg.jpg');
}
This does not load the image in my index page. However if I change .container to body, then it works. So I think there is no problem with the path of the image.
I tried to use
<div id="container"></div>
Then using css selector #container , still no luck.
What did I miss in my steps? Thanks!
2 answers
solution1
2 2015-12-01 07:22:44
The reference is wrong. It should be:
.container {
background-image: url("../img/main_bkg.jpg");
}
Since you have an empty container, the height of .container is 0. Try adding a min-height or padding to see the effect. This might cause issue too. This might help:
.container {
background-image: url("../img/main_bkg.jpg");
min-height: 100px;
height: 50px; /* Something */
}
solution2
2 ACCPTED 2015-12-01 07:25:19
Since .container do not have any height and width , so it is not showing background image, while body might be having some dimensions.
So add style in css as:
.container {
background-image: url('../img/main_bkg.jpg');
height: 100px;
width: 100px
}
Now try it will display the image.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.