Stretch Background Image In Header Only Horizontally, It Does Not ...

Trang chủ » Html Background Image Stretch Horizontally » Stretch Background Image In Header Only Horizontally, It Does Not ...

Có thể bạn quan tâm

Hi Ryan,

Presently whenever I resize the view-port, the header’s background image sizes vertically and horizontally, as mentioned in my question, I would like to just stretch the abstract horizontally, I would prefer to not use a link but I would like to turn folks onto a great program I found while creating the abstract and anyone who wants to mimic my process can give it a go, you will need java running, I simply imported the image into Photoshop and set the image height to 100px, if you want to play with online version of this cool software, go here, http://www.escapemotions.com/experiments/flame/#top, he does have a paid version, looks pretty cool…

This is the code, if I have some irrelevant code, be aware, I am quite the amateur…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>2 Column Liquid Fixed CSS Layout</title> <style type='text/css'> html, body { background-image: url('images/bgb.jpg'); background-repeat: no-repeat; background: bottom; height: 100%; background-size: 90%; } .header, .footer { position:fixed; width:100%; left:0; top:0; } body { font-family:Arial, Helvetica, sans-serif; font-size:13px; padding: 0px; margin: 0px; } .wrapper{ width: 98%; margin: 0 auto; } .header{ background-position: top; height: 98px; float: left; width: 100%; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black; /* For IE 8 */; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')"; /* For IE 5.5 - 7 */; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000'); z-index: 999; background-image: url('images/Flame.jpg'); background-repeat: no-repeat; background-size: cover; } .luminouspiritlogo { padding-left:20px; } .footer { background-position: bottom; bottom: 0; top: auto; height: 46px; font-family: Arial, Helvetica, sans-serif; color: #99CCFF; font-size: 10px; clear: both; -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0px -8px 6px -6px #000; /* For IE 8 */; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=0, Color='#000000')"; /* For IE 5.5 - 7 */; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=0, Color='#000000'); z-index: 999; background-image: url('images/footer.jpg'); background-repeat: repeat-x; } .wrapleft{ float: left; width: 100%; } .left{ margin-right: 210px; margin-top: 100px; } .right{ position:fixed; top:100px; right: 1%; width: 180px; margin-left: -181px; background-color: #ABA5F2; z-index:998; padding:10px; min-height:100%; } .footer{ float: left; width: 100%; } .style1 { text-align: left; } </style> </head> <body> <div class="wrapper"> <div class="header"> <div class="logo"><img src="images/logo.png" /></div> </div> <div class="right"> right fixed </div> <div class="wrapleft"> <div class="left"> <table cellpadding="0" cellspacing="0.5%" style="width: 100%; height: 100px"> <tr> <td style="width:180px" class="style1" valign="top">&nbsp;</td> <td>&nbsp;</td> </tr> </table> </div> </div> <div class="footer"> footer </div> </div> </body> </html>

Từ khóa » Html Background Image Stretch Horizontally