Menu
Hello. I am building this joomla template and I need to have a background image at the top and one at the bottom that go all the way to the edges of the screen.
so i put one image on the html tag and one on the body tag. the images are wider then the screen so they reach the edge regardless of the person’s screen size:
html {margin:0; padding:0; background: #f4f4f4 url(../images/image.png) center top no-repeat;}
body {margin:0; padding:0; background: url(../images/image2.png) center bottom no-repeat;}
everything looks fine on firefox and IE8,7. but when I look at the page on my iPhone built-in safari browser the bottom image does extend all the way to the right edge. It stops about 150px away from the edge.
And I’ve noticed this problem before with other websites. Has anyone else ran into this and is there a way to fix it?