I downloaded a responsive trial web template and it appears fine on my desktop and iphone.
But, I swapped out the header image (bg_header.jpg) and only half width of the new image appears in the mobile view (I removed the original bg_header.jpg and named my new image bg_header.jpg).
The original jpg is 2000x920. My replacement is 2000x1333, Here is the css code, if that might help you with helping me:
/* Header */
#head { background:#181015 url( ../images/bg_header.jpg) no-repeat; background-size: cover; min-height:520px; text-align: center; padding-top:240px; color:white; font-family:"Open sans", Helvetica, Arial; font-weight:300; }
#head.secondary { height:100px; min-height: 100px; padding-top:0px; }
#head .lead { font-family:"Open sans", Helvetica, Arial; font-size:44px; margin-bottom:6px; color:white; line-height:1.15em; }
#head .tagline { color:rgba(255,255,255,0.75); margin-bottom:25px; }
#head .tagline a { color:#fff; }
#head .btn { margin-bottom:10px;}
#head .btn-default { text-shadow: none; background:transparent; color:rgba(255,255,255,.5); -webkit-box-shadow:inset 0px 0px 0px 3px rgba(255,255,255,.5); -moz-box-shadow:inset 0px 0px 0px 3px rgba(255,255,255,.5); box-shadow:inset 0px 0px 0px 3px rgba(255,255,255,.5); background: transparent; }
#head .btn-default:hover,
#head .btn-default:focus { color:rgba(255,255,255,.8); -webkit-box-shadow:inset 0px 0px 0px 3px rgba(255,255,255,.8); -moz-box-shadow:inset 0px 0px 0px 3px rgba(255,255,255,.8); box-shadow:inset 0px 0px 0px 3px rgba(255,255,255,.8); background: transparent; }
#head .btn-default:active,
#head .btn-default.active { color:#fff; -webkit-box-shadow:inset 0px 0px 0px 3px #fff; -moz-box-shadow:inset 0px 0px 0px 3px #fff; box-shadow:inset 0px 0px 0px 3px #fff; background: transparent; }
@media (max-width: 767px) {
#head { min-height:420px; padding-top:160px; }
#head .lead { font-size: 34px; }
}
Any help with helping me resolve this half image issue, will be appreciated.