2

I know this sounds somewhat counterintuitive, but let me explain what I am trying to do.

I have a large element that serves as the background. It does not resize. It is often larger than the screen it is viewed on. Most of the content of this element (it's just an image) is near the center. Let's say that the only NECESSARY information is in the middle 800px, and the whole thing is 1600px wide.

Why is it wider than necessary? Because it fades pleasingly into the rest of the background and adds to the design of the site.

So I made the element fixed and used a standard trick to center it. It works perfectly on a large monitor. It stays centered, if some of it is a little too big, it doesn't allow you to scroll over in order to see what is basically nothing. I like that.

But if the screen is too small, you can't see it all. You can't just set the min-width or min-height of the page because when you go to scroll, the background image stays in place, because it is fixed.

If there was a way to have a fixed element actually move with everything else when the page is scrolled, that would work perfectly, because I could specify the min-width to the size of the required elements of the image. That would work very well.

Otherwise, another solution would be to use some other form of positioning that allows for the prevention of being able to scroll to see the whole thing. Then, again, I could just set the whole with a minimum width, which would allow me to set exactly how much of the content is scrollable.

Is any of this possible? I feel like I am missing something simple. Ideally I would not have to resize any images, serve up multiple css sheets, or use any elaborate javascript or anything like that. Thanks for the help!

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Brian Johnson
  • 561
  • 1
  • 6
  • 17
  • 3
    Having a hard time to grasp exactly your problem – if you post some code, like via http://jsfiddle.net/ I'm sure we will be able to help out quickly. – Marcus Olsson Feb 21 '12 at 19:39
  • @marcus [link](http://jsfiddle.net/5w9Y9/) This is the code. You will get to see it here, though I dunno if you are going to be able to understand much better whats happening without images. I am using a script that allows me to have images cycle through. The images are actual contained within a div. When any part of the image is too big to fit in the window, you can't scroll, which is mostly good because most of the image is filler. But if the window is very small, you miss some important middle content, and any attempt to make it scrollable doesn't help, because it stays centered. – Brian Johnson Feb 23 '12 at 04:22
  • @ryan The background element should not TRIGGER scrolling, but should scroll with the rest of the site when something else DOES trigger it – Brian Johnson Feb 23 '12 at 04:29

3 Answers3

3

I have finally solved this problem after a ton of experimentation and the solution turned out to be basic CSS, which is awesome.

I go into great detail illustrating this solution at my blog. Alternatively, here is the working demo.

HTML

<body>
 <div id="box">
  <div id="element"></div>
 </div>
</body>

CSS

<style type="text/css">
html, body {
 height:100%;
}
body {
 margin:0px;
 padding:0px;
 min-width:1000px; /*Set the width you want to be able to scroll to here*/
}
#element {
 height:100%;
 position:relative; /*This section centers your element*/
 left:50%;
 margin-left:-800px; /*Half the width of the image*/
 z-index:-9999; /*This part puts it behind everything, not needed if you aren't making a background*/
 background:url(image.jpg) no-repeat;
}
#box {
 height:100%;
 min-height:700px; /*Set the height you want to be able to scroll to here*/
 overflow:hidden; /*Needed due to centering with margins*/
}
</style>
Brian Johnson
  • 561
  • 1
  • 6
  • 17
1

I know you would prefer not to use elaborate javascript.... the JQuery library allows for some great little fixes to things like this with a minimum of code... you could also use a relatively small snippet without jquery... basically all you need to do is set an event listener for window.scroll and set your fixedElement.scrollTop to match...

quick JQuery example:

$(window).scroll(function(){
  $('#fixedBackground')[0].scrollTop=$(window).scrollTop();
});
Trey
  • 5,480
  • 4
  • 23
  • 30
  • I am trying this and I think you understand where I am coming from. Forgive me though, I am not great with javascript. I just took what you gave me, put it in the between and replaced #fixedbackground with the id of the image. Also tried the id of the div they are all in. What else do I need to do? Again sorry for my lack of JS skills :| – Brian Johnson Feb 23 '12 at 04:31
0

I am not CERTAIN I know exactly what you are wanting to do but the below snippet of css might help you. Not sure.

 body{ background-image:url(../images/bgImage.png); 
 background-attachment:scroll; background-position:center top;
 background-repeat:no-repeat; margin-top:0px; margin-bottom:0px;}

You can set up your positioning using any combination of the attributes in that snippet and the background-attachment is what makes it scrollable.

It would be helpful if you posted your css for what you have currently so we could really help you. Let me know if I can be more clear.

Spags
  • 531
  • 5
  • 13
  • 26
  • That makes sense, but my problem is I am not actually using background images. It is a slideshow using a script, you can see the code in the comments of the main post. So unfortunately anything that affects traditional backgrounds won't help me I don't think. And again, I could make the entire image scrollable, but I don't want to do that. It's essentially a gradient fadeout that should not be scrollable, just looks good on a big screen. In other words, The background element should not TRIGGER scrolling, but should scroll with the rest of the site when something else DOES trigger it – Brian Johnson Feb 23 '12 at 04:27
  • Ah, see, you didn't say any of that in your question. Looking at your jsFiddle I still can't really tell what you are trying to do but I can tell you that using 'fixed' you will not accomplish what it sounds like you want to. At least not with CSS. – Spags Feb 23 '12 at 14:12
  • Well okay, let's try going about it a different way then. Is there any way to prevent an element positioned any way other than 'fixed', from triggering the ability to scroll? Because if there is, then that's the ticket. That is exactly what I need. I have tried just making the overlapping images for the slideshow divs with the images as backgrounds of those divs, but the problem is you have to specify the dimensions otherwise they don't display. And then of course, if you DO specify, then it allows you to scroll, which I don't want. Is there a way to post pictures on here? That would help. – Brian Johnson Feb 23 '12 at 23:39
  • I tried apparently I can't post it because I don't have enough reputation points – Brian Johnson Feb 24 '12 at 19:37