Search code examples
htmlcsscss-positionbackground-size

Background-size:cover and text in an horizontal scrolling page

I'm trying to make a very simple HTML page with horizontal scrollbar that contains only one big picture (with background-size:cover) on the left and a long text with columns on the right of the cover.

I think that my problem is about position:relative (with float) and position:absolute (with left), but I don't manage to fix it. At the moment, the cover picture is OK, displayed on the top left. But the text is displayed on the bottom right (instead of on the top right of the cover).

Could you please help me ?

Here is the demo showing what I've done : http://jsfiddle.net/kz5ch49w/38/

Solution

  • If i understanded you corectly, than you need to put text in to your cover id, not in seperate div. However, you can change your cover id position to absolute only, and relative position to your text div.

    #cover { position:absolute; /* other stuff */ }

    and

    #text {  position:relative; /* other stuff */ }


http://jsfiddle.net/kz5ch49w/46/