Put the background-size, but it did not work.

*{ margin:0; padding:0; } div{ display:block; } body{ background-size: 100% 100%; background:url(images/bg.png); } header { height:8%; width: 100%; background-color: #FFF; margin: 0 auto; border-bottom: 1px solid #000; } .right{ float:left; background-color: #fff; width:15%; height:100%; } .menu{float:left; background-color:#fff; width:70%; height:100%; } .left{float:left; background-color: #fff; width:15%; height:100%; } img{ border:none; } ul{ margin-left:10%; width:80%; height:100%; background-color:#fff; list-style-type: none; } li { float: left; height: 90%; width:10%; background-color:#fff; text-align: center; line-height: 50px; } a { display: inline-block; width: 100%; height: 100%; text-decoration:none; color:#000; } .container{ }
  • Create a more detailed question, give an example. - Maqsood

2 answers 2

Set background-size after background

 body { background:url(images/bg.png); background-size: 100% 100%; }
  • I never would have thought that the order of writing the code also plays a role. Thank you very much! - V. Clerk
  • @ V.Clerk, still playing! - HamSter
  • @ V.Clerk, well, so background is a group property that sets everything in one fell swoop. Anything that is not specified is reset to its default values. - ߊߚߤߘ

Rubber background is better not to use, this solution is only suitable for a fixed layout, and when the picture has the same ratio as the user's monitor.

Example :

 html { background: url(http://www.shareable.net/sites/default/files/blog/top-image/city%20pic.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

ps. I decided to add a little. Just initially it is better not to use this approach. The solution is higher cross-browser, so you can safely use it.