In the examples below, the page uses a 1500px wide background image, and it has this structure to make the visual render properly.
<div id="sitewrap"> <--100% width with repeated bg imgage <div id="container-wrap"> <--100% width with bg-hdr-1500.jpg <div id="container"> <-- width:1014px I need to keep the zoom feature enabled for iPad device, and ideally I want to target the portrait view only (with the condition that no futher treatment is needed for landscape view) 1. With no viewport nor media queries, the #container-wrap bg image got cut off in both landscape and portrait. http://jsbin.com/aholi4/ 2. With viewport which includes a media queries for portrait, the landscape view renders correctly (no media queries ) <meta content="width=device-width; initial-scale=1.0;" name="viewport"> http://jsbin.com/apeti4/10/ I serve a 768px wide background for portrait view but it's not working correctly, the bg image shows up fine but not the page's layout, the page doesn't scale down like #1, furthermore, desktop safari is picking up this queries. @media all and (orientation:portrait) { #container-wrap{width:100%;text-align: left;background:transparent url(bg-hdr-768.jpg) no-repeat center top;} #container, .quick-access-wrap{width:99%} #content, #footer, {width:100%} } 3. Same as above except desktop Safari. @media only screen and (device-width: 768px) http://jsbin.com/iziqi3 @media only screen and (device-width: 768px) { #container-wrap{width:100%;text-align: left;background:transparent url(bg-hdr-768.jpg) no-repeat center top;} #container, .quick-access-wrap{width:99%} #content, #footer, {width:100%} } 4. background-size treatment with "100% auto;" it shrinks (to 50% of original size I think) and with "100%100%;" it double the size (no screen catcher example for this). Cackground-size treatment affects both landscape and portrait. http://jsbin.com/uworu3/ <!-- bacgkround image ( bg-hdr-1500.jpg) loads from the desktop style --> #container-wrap{ width:100%;background-position: center top; -webkit-background-size:100% auto; -moz-background-size:100% auto; -o-background-size:100% auto;} Thanks! tee ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *******************************************************************