0

I hope what I try is not impossible.

Let me explain first: I have a responsive design which requires a background to be fixed under some situations (media query blocks). The design in question is this one:

http://think-open.at/fileadmin/templates/responsive/content.html

Basically there are two media queries: one for the maximal height and one for the minimal width. If there is enough viewport height there is a scrollbar in the content area and the design height is fixed. But if the viewport is not large enough for showing the predefined height the height-mediaquery removes the scrollbar from the inner div so there won't be two nested scrolling containers (body + div) and sets the content area to height: auto.

There is also a responsive media query if the viewport is too narrow but this works flawless.

Now the problem: When the design switches to the mode where the whole page scrolls (below 830px height) I would like to position the image in the right container "fixed" so it does not scroll out of the viewport. But then the problem arises, that I can't really position the background in regards to the container div as "fixed" positions an background image in regard to the viewport. I have created a CSS fiddle here:

http://dabblet.com/gist/ae5c3598e1465ce0c90e

If you change the width you notice the problem. I would like to have the right border of the image aligned with the right border of the green box.

Is this somehow possible? I have no problem using calc() as there will be a condition in my CMS to use the plain old-school design if an older browser gets detected.

kraftb
  • 625
  • 5
  • 15
  • I think you have posted the wrong link to cssdesk.. it's the default site page – BeNdErR Jul 18 '14 at 17:13
  • Thanks. I set the link to a working CSS playground. This cssdesk didn't work properly at the beginning anyways. – kraftb Jul 22 '14 at 10:31

1 Answers1

0

I solved it myself now. Sorry for posting.

The trick was: As my design is centered, I started to try using calc(50% + somepixelvalue). This did the job.

I adjusted the CSS playground: http://dabblet.com/gist/5b63553f47a81f3bb701

Now the image is always up in line with the right border of the green area. When scaling there is sometimes a 1pixel difference but this doesn't matter as the background will get assigned to some container element which acts as mask.

kraftb
  • 625
  • 5
  • 15