Home/ Questions/Q 7591195
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T20:35:32+00:00

I’ve a similar problem than div background-image overflow : I’ve a page where I

  • 0

I’ve a similar problem than div background-image overflow :
I’ve a page where I want a ‘header’ and a ‘footer’ with the same background.
Immediately under the header, a large image and finally under this image the content.

All the content(incl header/footer/image) is centered and the problem is with the image (width:1600px) and the size of the browser… When it’s under 1600px, we can scroll and the background STOPS… I’d like them to be extended as well…
(I can set the body element with the same background than header/footer, but the content would be missing it…)

Here is the a jsFiddle as an example of my problem, I ended-up having Wraps around the different parts to set the correct backgrounds.

Here is the normal behavior, full sized screen Here is the normal behavior

Here is the problem, when the the browser is smaller than the content, the scroll-bar appear and the background disappear… Here is the problem

I tried many many things to find the workaround. I cannot set a min-width:1600px to the bodywrap (to my real case) as it will cause a lot of scroll for a small resolution user to find the ‘centered content’ !

If you have suggestions, or a different approach to my problem, thanks in advance !

Final edit :
– @Happy Singh code (using a background image and a overflow:hidden on the imagewrap) with my addition of min-width for each content element. The final jsFiddle.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this fiddle http://jsfiddle.net/3KtSf/ if i am getting your problem correct then it might be your solution;

    UPDATE:

    Revised fiddle ( http://jsfiddle.net/ux2pj/1/ ) as per comment’s requirement.

    In the fiddle the image is from background so the width/height of image is 500 x 367px.

    • 0