tinfanide Posted October 20, 2011 Share Posted October 20, 2011 <!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style>@charset "utf-8";/* CSS Document */body {margin: 0;padding: 0;}div#header {width: 100%;height: 300px;background-image:url(images/header-background1.PNG)}div#background {width: 1280px;height: 300px;margin: 0 auto;}</style></head><body><div id="header"><div id="background"></div></div></body></html> Very strange.Please download the header background and put it inside a folder callled "images"In FF5, it looks fine.In IE9, it looks strange. The header background image ends somewhere and the background starts using another colour. Link to comment Share on other sites More sharing options...
Demiscient Posted October 20, 2011 Share Posted October 20, 2011 It looks the same to me: Link to comment Share on other sites More sharing options...
dsonesuk Posted October 20, 2011 Share Posted October 20, 2011 is it because you have not defined the start background-position for the background image? some might start from left and repeat, while others start from center and repeat, haven't checked. Link to comment Share on other sites More sharing options...
tinfanide Posted October 20, 2011 Author Share Posted October 20, 2011 But I have set the width:100%There should not be any repeat and it must start from the very left. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 20, 2011 Share Posted October 20, 2011 By default the background image will repeat across and down unless you use background-repeat: no-repeat; background-repeat: repeat-x; (across only a-x) or background-repeat: repeat-y; (down only) background-position: left top; or background-postion: 0 0; I think you will find it defaults to center center and repeats outwards. Link to comment Share on other sites More sharing options...
Demiscient Posted October 21, 2011 Share Posted October 21, 2011 Yes, you're only making the div containing the image stretch across the page by setting the width to 100%, the actual image itself won't stretch. My recommendation is that you use the background image but also a fallback colour (in this case it would be what the colour on the right of the gradient is): #header {background:#fff url('images/header-background1.png') no-repeat left top;} (Where #fff is replaced by the colour you want) Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.