Example: Background Image Size - HTML Dog

Trang chủ » Html Background Image Original Size » Example: Background Image Size - HTML Dog

Có thể bạn quan tâm

You are here: Home → Examples →

HTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>background-size</title> <style> body { font: 14px courier; background: #c72 url("/examples/images/opacityBg.gif"); color: #000; margin: 0; padding: 10px; } p { background: #7a796b url("/examples/images/tikal.jpg"); margin: 10px; width: 300px; height: 300px; float: left; text-align: center; } code { background: white; padding: 0 15px 2px; } #p1 { background-size: auto; } #p2 { background-size: 50%; } #p3 { background-size: 100px; } #p4 { background-size: 100px 100px; } #p5 { background-size: contain; } #p6 { background-size: cover; } #borderCollie a { display: block; height: 300px; background: white url("http://www.htmldog.com//badge1.gif") center no-repeat; background-size: 60px 45px; transition: background-size .5s; text-indent: -999em; } #borderCollie a:hover { background-size: 120px 90px; } </style> </head> <body> <p id="p1"><code>background-size: auto;</code></p> <p id="p2"><code>background-size: 50%;</code></p> <p id="p3"><code>background-size: 100px;</code></p> <p id="p4"><code>background-size: 100px 100px;</code></p> <p id="p5"><code>background-size: contain;</code></p> <p id="p6"><code>background-size: cover;</code></p> <!-- Link back to HTML Dog: --> <p id="borderCollie"><a href="http://www.htmldog.com/examples/"><img src="http://www.htmldog.com/badge1.gif" alt="HTML Dog"></a></p> </body> </html>

Output

View original

Main menu

  • Tutorials
    • HTML
    • CSS
    • JavaScript
  • Techniques
  • Examples
  • References
    • HTML
      • Tags
      • Attributes
      • Characters
    • CSS
      • Properties
      • Selectors
      • Values

Supplemental menu

  • About Us
  • Contact Us
  • Link to Us
  • Advertise With Us
  • Web Hosting
  • Site Map
  • Home
Search ↑ Top

Từ khóa » Html Background Image Original Size