2815 posts
  • 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
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
+10 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!).

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

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

2815 posts
  • 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
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
+10 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
  • Microlancer Beta Tester
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Most Wanted Bounty Winner
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 3-4 years
XiaoThemes says

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

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

2815 posts
  • 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
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
+10 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