CODEWITHSUNDEEP
htmlcss
Luka Kobaidze
Luka Kobaidze

Reputation: 5

CSS background image and height

I have this code:

.main {
  min-height:100%;
  width:100%;
  position: relative;
  background-image: url('onepage_restaurant.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
}

but the div of class .main isn't showing up. Why?

Upvotes: 1

Views: 50

Answers (4)

Maximo
Maximo

Reputation: 186

Could be either background image wrong path or, if you have no content, html, body height set to zero. try this in your css

html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    }

Upvotes: 0

Nandan Bhat
Nandan Bhat

Reputation: 1563

Set the height in pixels. Example.

height: 100px;

Upvotes: 0

andreas
andreas

Reputation: 16936

Your code works fine unless you make sure that your parent element has a height greater than zero - otherwise your .main element will have no height either.

Also make sure that the file path to your image is correct. You can use the developer tools of your browser to check the height of your container and the image url.

html, body {
  width: 100%;
  height: 100%;
}
.main {
  min-height: 100%;
  width: 100%;
  position: relative;
  background-image: url(//placehold.it/500);
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
}
<div class="main"></div>

Upvotes: 1

Simon Knittel
Simon Knittel

Reputation: 1851

You want to set the min-height of that element to 100%. When you want to set the height of an element with percentage you need to set the height of the parent element to a specific value.

Upvotes: 0

Related Questions