background-image

I have this css: #wrapper1 { min-width:1020px; min-height:100%; } #wrapper2 { height:100%; background: url('img1.jpg') -100px 300px no-repeat, url('img2.jpg') 1165px 300px no-repeat; } #wrapper3 { width:1020px; margin:0 auto; } and this html: <div id="wrapper1"> <div id="wrapper2"> <div id="wrapper3" class="clearfix" <!-- content here --> <p>blah blah blah</p> </div> </div> </div> I need to add 2 images - left and right from center column without center column width changes and that the images did not affect the overall width of the page. Example: I can add images, and made a some attempts

I want to have a background image on the right hand side of one slide in a reveal.js presentation. I added the image to the slide like this: <section data-background="myImage.jpg"> // content </section> How can I add css styles to make it appear on the right edge of the screen? This article helped to find the solution . You can add a style to the html element for the current section using data-state="something" and of course you can use that style for tweaking your css. So I used this html: <section data-background="myImage.jpg" data-state="img-right"> // content </section> and the following

I came across this website today and I was mystified: http://www.actionbutton.net/ Is he using some kind of known technique for his backgrounds that scroll at a different rate and overlap each other. I looked at the source but am pretty confused. Does anyone know what the technique is called and how to learn it? It's call parallax there's plenty of plugin for this e.g. http://www.ianlunn.co.uk/plugins/jquery-parallax/ Here is an approximation of the parallax effect that doesn't use JS (thus backgrounds are scrolling at constant speed). The jfiddle example: http://jsfiddle.net/MFC9B/2/ Key is

this CSS gets my background to fill 100% of the screen height in iOS but there is a minor problem - when you scroll down there is initially white space, then when you release your finger and stop scrolling the background image "adjusts" and fills 100% of the screen height again. The problem does not re-occur on the same page if you continue to scroll, just the first time. Could someone please help? Thanks #background { background: url(../img/background.jpg) center repeat-x; position: fixed; background-size: auto 100%; top: 0; left: 0; right: 0; bottom: 0; z-index: -1 } This happens because