3179 posts
  • Helps us moderate the forums
  • Has been part of the Envato Community for over 5 years
  • Helped several times protecting Envato Market against copyright violations
  • Won a competition
+15 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!).

3325 posts
  • Has sold $5,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Located in United States
  • Has been part of the Envato Community for over 4 years
+1 more
organicbee says
body{
overflow-x: hidden;}

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

3179 posts
  • Helps us moderate the forums
  • Has been part of the Envato Community for over 5 years
  • Helped several times protecting Envato Market against copyright violations
  • Won a competition
+15 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.

120 posts WordPress Wizard
  • 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
  • Won a Most Wanted contest
+5 more
CODE9RS says

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

1625 posts
  • Has been part of the Envato Community for over 3 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 :)

3179 posts
  • Helps us moderate the forums
  • Has been part of the Envato Community for over 5 years
  • Helped several times protecting Envato Market against copyright violations
  • Won a competition
+15 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 10+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Located in Europe
+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