Advanced Search

Background-Color Heading HMTL

/ Published in: CSS
Save to your folder(s)
Add background-color to headings

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <style type="text/css">
  2. 			body {
  3. 				padding-left:100px;
  4. 				padding-top:100px;
  5. 			}
  6.  
  7. 			h2 {
  8. 				line-height:1.15;
  9. 				font-size:2.2em;
  10. 				color:#fff;
  11. 				text-transform:uppercase;
  12. 				font-family:sans-serif;
  13. 				width:6em;
  14. 			}
  15.  
  16. 			.uniform-bg {
  17. 				background:red;
  18. 				position:relative;
  19. 				outline: red solid 0.3em;
  20. 				-moz-outline-offset:-0.04em;
  21. 			}
  22.  
  23. 			.uniform-bg span {
  24. 				position:relative;
  25. 			}
  26. 		</style>
  27. 		<!--[if lte IE 7]>
  28. 			<style type="text/css">
  29. 				h2 {
  30. 					border-left:0.3em solid red;
  31. 					padding-top:1px;
  32. 				}
  33.  
  34. 				.uniform-bg span {
  35. 					padding-right:0.3em;
  36. 				}
  37. 			</style>
  38. 		<![endif]-->
  39. [HTML]
  40. <h2><span class="uniform-bg"><span>Hello everyone</span></span></h2>

URL: http://www.ajaxline.com/the-even-background-under-the-text

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.