Databases
StackOverflow2013
Postsdbo
POResize background-image to fill the page height-wise, but allow elements on either side
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POResize background-image to fill the page height-wise, but allow elements on either side
    text
    copied!<p>I'm having a lot of issues trying to do this, and I'm now wondering if it's even possible in css. (Maybe I will need to find some other way using PHP, Flash or Javascript!)</p> <p>Basically, I have 3 images. Each are 1920x1200 (x*y) in size. When placed from left-to-right they form an image of a landscape. I want to create a webpage in which you scroll horizontally to see each part of the site with the 3 images being the background-images of the div elements and touching each other on either side. The scrolling was going to be handled with <a href="http://flowplayer.org/tools/scrollable.html" rel="nofollow noreferrer">this</a> (which is also the reason why .items needed to be position: absolute.) For the most part, I've been able to create this:</p> <p><strong>HTML:</strong></p> <pre><code>&lt;div class="items"&gt; &lt;div class="item" id="item1"&gt;&lt;a name="item1"&gt;&lt;/a&gt; text &lt;/div&gt; &lt;div class="item" id="item2"&gt;&lt;a name="item2"&gt;&lt;/a&gt; more text &lt;/div&gt; &lt;div class="item" id="item3"&gt;&lt;a name="item3"&gt;&lt;/a&gt; even more text &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>CSS:</strong></p> <pre><code>#item1, #item2, #item3 { float: left; width: 1920px; height: 1200px; } #item1 { background: #ffffff url(../../images/main/1.jpg); } #item2 { background: #ffffff url(../../images/main/2.jpg); } #item3 { background: #ffffff url(../../images/main/3.jpg); } /* our additional wrapper element for the items */ .items { width: 5790px; position: absolute; } </code></pre> <p>However, the issue that I have is that I need to make this work for multiple screen sizes and resolutions. What I would like to be able to do, is to make the height of each of the #itemn to be 100% of the visible page, but I am unable to do so without stopping the div elements from appearing left-right. Often it causes them to appear on top of each other.</p> <p>I tried following out the instructions <a href="http://css-tricks.com/examples/ImageToBackgroundImage/" rel="nofollow noreferrer">here</a> and using an img. But, by setting the position to fixed or absolute I caused the images inside the div elements which I had previously floated left to appear on top of each other.</p> <p>Just to be clear, the effect that I am going for is like <a href="http://www.webtalents.pl/" rel="nofollow noreferrer">this sites'</a>, but I <em>need</em> the background image to be resized height-wise to fit the page, otherwise it will look bad on different resolutions from my machine. I can provide more explanation if needs be, but I think I've summed up the problem pretty well. Is it possible to fix this in any way - perhaps using Javascript, PHP, or Flash?</p> <p><strong>EDIT</strong></p> <p>I just found that there is a CSS3 property that does exactly what I need (background-size), but it's not implemented in most browsers... A hack would be to use -moz-border-image and then use php to place the correct height and width px into the css. I do not want to do that! </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload