html - Background color in header and footer to be wider than the device width -

I'm trying to make the background color in the header and footer to move forward from the background width, The width of the resolution image I created this jsfiddle () which shows our problem.

As you can see, when you scroll horizontally horizontally to see the second image, the gray foot and the header bar are cut off. Please note that we want to keep a large high resolution image like ourselves (without reducing its dimensions) so that the user can scroll horizontally and see the detail in the picture. Apart from this, we have many high resolution images on different pages and these images will have different widths so that the settings for a footer width and a fixed width (such as 1920 px) do not provide a universal solution.

Will you be very kind to offer a solution to this problem? Many thanks for your help :)

We are currently using the code given below:

HTML

  & lt; Div id = "header" & gt; & Lt; Div id = "logodiv" & gt; & Lt; IMG ID = "Logo" limit = "0" src = "http://www.refugeeweek.org.uk/Resources/RefugeeWeek2012/Images/CounterPointsArts3.bmp" & gt; & Lt; Br style = "clear: both" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "description" & gt; & Lt; H1 id = "topics" & gt; The paragraph with a high resolution image showing the top part of a good painting & lt; / H1> & Lt; P id = "paragraph" & gt; Contrary to popular belief, Lorem Ipsum is not just random text. It has roots in a piece of classical Latin literature from 45 BC, making it 2000 years old. & Lt; / P & gt; & Lt; / Div & gt; & Lt; Div id = "photo" & gt; & Lt; Img id = "large" range = "0" src = "http://www.irmakennaway.com/images/stripe_27.jpg" & gt; & Lt; / Div & gt; & Lt; Div id = "description" & gt; & Lt; P id = "paragraph" & gt; Many portions of Lorem Ipsum are available, but most people have undergone injected humor, or have changed in some form from random words, which do not seem to be a bit too reliable. & Lt; / P & gt; & Lt; / Div & gt; & Lt; Div id = "footer" & gt; & Lt; Div id = "footer" & gt; & Lt; P id = "description" & gt; About us | Contact Us | Privacy & lt; P & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

css

  div # header {width: 100%; Margin-left: auto; Margin-Correct: Auto; Cushion Top: 10px; Padding-bottom: 10px; Background color: # e1e1e1; } Div # logodiv {max-width: 728px; Margin-left: auto; Margin-Correct: Auto; } @ Media screen and (max-width: 744px) and (minimum-width: 345 px) {div # logodiv {max-width: 93%; Margin-left: auto; Margin-Correct: Auto; }} Img # logo {max-width: 100%; Height: auto; Swim left; } Div # description {max-width: 728px; Margin-left: auto; Margin-Correct: Auto; } Media screen and (max-width: 744px) and (min-width: 345px) {div # description {max-width: 93%; Margin-left: auto; Margin-Correct: Auto; }} Div # photo {width: 100%; Overflow-x: scroll; Margin top: 2px; Margin-bottom: 2px; } Img # large {min-width: 1600px; Margin: 0px; } Div # footer {width: 100%; Margin-left: auto; Margin-Correct: Auto; Padding-top: 4px; Padding-bottom: 4px; Background color: # e1e1e1; } Div # footertext {max-width: 728px; Margin-left: auto; Margin-Correct: Auto; } @ Media screen and (max-width: 744px) and (minimum-width: 345px) {div # footertext {max-width: 93%; Margin-left: auto; Margin-Correct: Auto; }} P # Description {Max-width: 728px; Margin-left: auto; Margin-Correct: Auto; Text-align: center; }  

UPDATE The answer to the user Cdrini provides the best solution to our problem. The following 2 additional lines of code have provided a very clean and visually forced effect. I have now updated the original Bela to include this solution.

  div # photo {width: 100%; Overflow-x: scroll; }  

I think what you want by changing Keith's answer a bit . Add it to your CSS:

  div # photo {width: 100%; Overflow-x: scroll; }  

Also & lt; Meta name = "viewport" content = "width = tool-width, initial-scale = 1, maximum-scale = 1" / / width: 100% in the head of the page & gt; Device width on mobile (this is not true by default)

(See code here:, or result here :)