2965 posts
  • Football Contest Participant/Runner-up
  • Australia
  • Community Moderator
  • Elite Author
  • Author had a Free File of the Month
  • Most Wanted Bounty Winner
  • Author had a File in an Envato Bundle
  • Has been a member for 5-6 years
  • Contributed a Blog Post
+11 more
dtbaker Volunteer 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!).

3202 posts
  • Sold between 5 000 and 10 000 dollars
  • United States
  • Bought between 10 and 49 items
  • Has been a member for 4-5 years
  • Exclusive Author
organicbee says
body{
overflow-x: hidden;}

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

2965 posts
  • Football Contest Participant/Runner-up
  • Australia
  • Community Moderator
  • Elite Author
  • Author had a Free File of the Month
  • Most Wanted Bounty Winner
  • Author had a File in an Envato Bundle
  • Has been a member for 5-6 years
  • Contributed a Blog Post
+11 more
dtbaker Volunteer 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.

115 posts WordPress Wizard
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Most Wanted Bounty Winner
  • Exclusive Author
  • Envato Studio (Microlancer) Beta Tester
  • Has been a member for 3-4 years
  • Bought between 10 and 49 items
CODE9RS says

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

1531 posts
  • Bought between 10 and 49 items
  • Envato Studio (Microlancer) Beta Tester
  • Exclusive Author
  • Has been a member for 3-4 years
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 :)

2965 posts
  • Football Contest Participant/Runner-up
  • Australia
  • Community Moderator
  • Elite Author
  • Author had a Free File of the Month
  • Most Wanted Bounty Winner
  • Author had a File in an Envato Bundle
  • Has been a member for 5-6 years
  • Contributed a Blog Post
+11 more
dtbaker Volunteer 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
  • Referred between 1 and 9 users
  • Europe
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 2-3 years
  • Sold between 10 000 and 50 000 dollars
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