HTML background-image not showing on screen

I am trying to create an full width image above my nav bar, but I cant even get the image to show on screen. Here is my simple HTML:

<html>
  <body>
    <div class="wrapper" />
  </body>
</html>

And the css:

.wrapper {
  background-image: url(../assets/bridge.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  height: 100%;
}

I see the jpg made it to my browser and can click on it in my resources, so there is no problem with the path. The screen is still blank and showing nothing. Any help would be awesome.

Answers


This is because height:100% is functionally useless, and your div resultingly has no height.

If you give the div a fixed height, the image should appear as expected.

Alternatively if you want the background image to apply to the background of the page, you can apply it to the <html> element and avoid the whole wrapper, 100% debacle.

html {
     background-image: url(../assets/bridge.jpg);
     background-repeat: no-repeat;
     background-size: 100%;
}

Need Your Help

What is the best way to store list/vector of dynamically created objects?

c++ dynamic storage

I was always wondering about this and today I have finally came to a moment that I need to get the answer right.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.