3318 posts
  • Provided great contribution to our forums
  • Nominated Community Superstar of the month
  • Helps us moderate the forums
  • Has been part of the Envato Community for over 5 years
+18 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!).

3437 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

3318 posts
  • Provided great contribution to our forums
  • Nominated Community Superstar of the month
  • Helps us moderate the forums
  • Has been part of the Envato Community for over 5 years
+18 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.

137 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
+6 more
CODE9RS says

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

1665 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
+1 more
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 :)

3318 posts
  • Provided great contribution to our forums
  • Nominated Community Superstar of the month
  • Helps us moderate the forums
  • Has been part of the Envato Community for over 5 years
+18 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
  • Sells items exclusively on Envato Market
+1 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.

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by