5441 posts
  • Author Level 11
  • Moderator
  • Winner
  • 6 Years of Membership
+20 more
dtbaker
Moderator
says

Here’s my mockup of what I’m trying to achieve:

Here’s some code to play with:

http://jsfiddle.net/TV8sB/1/

Here’s my full question on stackoverflow:

http://stackoverflow.com/questions/15939119/css-make-left-right-background-images-slide-out-of-view-for-small-screens

any CSS gurus here know of a way to do this? if not I’ll just use javascript (bah!).

3439 posts
  • Author Level 4
  • Collector Level 2
  • Community Superstar
  • United States
+2 more
organicbee
says
body{
overflow-x: hidden;}

Should do it, may. Need to do html, body

5441 posts
  • Author Level 11
  • Moderator
  • Winner
  • 6 Years of Membership
+20 more
dtbaker
Moderator
says

Two nice solutions popped up:

Using absolute positioning: http://jsfiddle.net/TV8sB/3/ (but using the not-widely-supported 4 value background-position rule)

Using CSS calc() http://jsfiddle.net/TV8sB/4/ (again not widely supported)

Might be using these and doing a javascript fallback for browsers that do not support calc.

154 posts WordPress Wizard
  • Weekly Top Seller
  • Elite Author
  • Featured Author
  • Featured Item
+6 more
CODE9RS
says

A lot of media queries http://jsfiddle.net/RQekc/ ?? :P

1749 posts
  • 4 Years of Membership
  • Beta Tester
  • Collector Level 2
  • Exclusive Author
webdesignerart
says

A lot of media queries http://jsfiddle.net/RQekc/ ?? :P

WAOn.. Great, can you share/write as CSS 2 Background image article on my blog :)

5441 posts
  • Author Level 11
  • Moderator
  • Winner
  • 6 Years of Membership
+20 more
dtbaker
Moderator
says

A lot of media queries http://jsfiddle.net/RQekc/ ?? :P

haha nice!

woa! check out this nice one. only 1 media query required and all standard CSS: http://jsfiddle.net/TV8sB/7/

10 posts
  • Affiliate Level 3
  • Author Level 5
  • Collector Level 2
  • Spain
+2 more
wpshards
says

The problem with media queries, though, is that they’re not supported by IE8. Instead, you might want to try using min-width, as it is more supported:

http://jsfiddle.net/eQPLe/1/

In this case, there is also an outer div that protects content from overflowing and popping up scrollbars.

by
by
by
by
by
by