5409 posts
  • Has sold $750,000+ on Envato Market
  • Helps us moderate the forums
  • Won a competition
  • Has been part of the Envato Community for over 6 years
+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
  • Has sold $5,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Achieved the monthly Community Superstar Award
  • Located in United States
+2 more
organicbee
says
body{
overflow-x: hidden;}

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

5409 posts
  • Has sold $750,000+ on Envato Market
  • Helps us moderate the forums
  • Won a competition
  • Has been part of the Envato Community for over 6 years
+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
  • Had an item that became a weekly top seller
  • Elite Author: Sold more than $75,000 on Envato Market
  • Made it to the Authors' Hall of Fame
  • Had an item featured on Envato Market
+6 more
CODE9RS
says

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

1747 posts
  • Has been part of the Envato Community for over 4 years
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
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 :)

5409 posts
  • Has sold $750,000+ on Envato Market
  • Helps us moderate the forums
  • Won a competition
  • Has been part of the Envato Community for over 6 years
+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
  • Has referred 50+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Located in 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