0

I've searched and searched but haven't been able to figure out what mistake I've made. I have a background image in my header div that is expanded across the width of the screen. In other words, even though the original image is relatively small, it's expanded seamlessly across the width of the screen. However, when you view the site on mobile (viewed as desktop), the image does not fill the screen. Instead, it only shows the .jpg image one, and does not fill the width of the screen.

Image on desktop: https://i.stack.imgur.com/CpB8p.png (ideal)

Image on mobile: https://i.stack.imgur.com/BoqP6.png (error)

Here's my CSS on the item. I can add any other info desired. Thanks in advance for your patience guys. I'm trying to learn.

#headerWrap {
background: #343434 url(../images/template/bg.jpg) repeat-x 0 0;
}

EDIT: ^typos corrected, site still shows properly. And thank you all for the responses and suggestions.

After more research, it seems the picture breaks at the point where the screen ends, as though the image does not extend beyond the initial view width. I'm now researching the link someone just suggested below.

Sam
  • 7,252
  • 16
  • 46
  • 65
user3562787
  • 1
  • 1
  • is the background image is main problem ??? if so you are having a double slash before bg.jpg .... or if other problem show us the missing code.... or [save to jsfiddle](http://jsfiddle.net/) would be better...!!! – Bhojendra Rauniyar Apr 23 '14 at 03:20
  • If you are using @media queries, or any other additional code, I'd recommend posting the code in it's entirety, or post a jfiddle. We can better diagnose the problem with more information. – Mastrianni Apr 23 '14 at 03:44
  • possible duplicate of [Website body background rendering a right white margin in iPhone Safari](http://stackoverflow.com/questions/5804441/website-body-background-rendering-a-right-white-margin-in-iphone-safari) – Amarnath Balasubramanian Apr 23 '14 at 04:37
  • ^ Looking more into this. I think the problem lies in the wrapper not extending beyond the width of the screen when the page first loads. So, even though the users must scroll to the right, the image does not continue. – user3562787 Apr 23 '14 at 04:49
  • Check your DIV if it is 100% when you are below 900 screen or lower. Are you using percent in your div header? – Gian Carlo Apr 23 '14 at 04:57
  • All, thank you very much for the help. I've solved the problem thanks to this thread -> http://stackoverflow.com/questions/5804441/website-body-background-rendering-a-right-white-margin-in-iphone-safari submitted by http://stackoverflow.com/users/3030434/amarnath-balasubramanian. In short, I added the following code to the BODY section of my CSS, and it works like a charm. --> min-width: 1280px; <--- If someone will add this as an answer, I'll mark it as solved. – user3562787 Apr 23 '14 at 05:00

2 Answers2

0

put this code in your css you have placed wrong path in background image. 

#headerWrap {
background: #343434 url(../images/template/bg.jpg) repeat-x 0 0;
Amarnath Balasubramanian
  • 9,300
  • 8
  • 34
  • 62
nbparmar
  • 19
  • 2
0

I see two problems with your code:

1] You have an extra forward slash / in your image path.

2] You forgot to close the CSS declaration block. You need another } on the end of your code.

Instead of this:

#headerWrap {
background: #343434 url(../images/template//bg.jpg) repeat-x 0 0;

Try this:

#headerWrap {
background: #343434 url(../images/template/bg.jpg) repeat-x 0 0;
}
Mastrianni
  • 3,900
  • 3
  • 20
  • 32