Why does my image not fit 100% background

user_10012659 0
Viewed 1021

I am trying to make my background image fit 100% screen width and hight. But it does not even show my image. Any that can tell me, what i am doing wrong.

Here you can see the code, that i've tryed. And i don't get why it dont work.

<section id="forside" >
      <div class="container">
            <div class="row">
            </div>
      </div>
</section>

#forside {
    background: url(images/FBIlled.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

My image is not even getting showen. It's just blank. I wish that my section with id="forside" had the image FBIlled to be 100% screen width and hight. Full code can be showen here: https://codepen.io/anon/pen/maLYrZ

css html
4 Answers

Even better idea: 

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

.bg { 
  /* The image used */
  background-image: url("img_girl.jpg");

  /* Full height */
  height: 100%; 
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
<div class="bg"></div>

Put code inside div.
Taken from https://www.w3schools.com/howto/howto_css_full_page.asp.

user_106490390

The problem you are having is caused by leaving the element completely empty. Since there is nothing in the row, content, or forside div the height is 0. To fix this explicitly set the height or min-height using CSS (height:100px or min-height:100px where 100px is however big your image is).

Another problem you are having is with the actual property name, which should be background-image: url("path/to/image.jpg"). This page has some good info on background images.

I would recommend replacing the forside divs styling with:

#forside {
    background-image:url(https://placeimg.com/640/480/any);
    min-height:100px;
}

If this works, replace the url with the path to your image, and change the min-height to one that works for you. Hope this helps!

user_81328090

Maybe that is due to the div being empty? I tested adding a width and a height to your div, and the background imaged worked perfectly.

user_47752520

Your problem is simple.

Your section is empty & it's size is variable. Since there is no content & no size requirements the "box" is 0px x 0px it's not that the file isn't there, it's that it's so small it doesn't exist.

Edited you codepen by adding some text in there & change the image address and it works

Let me know if you have any other problems.

user_47471880
Related