2

I want to make so that when the user visits my site to see only one image (100% width) and when he scrolls down to be able to view the rest of the site.

I've seen this and tried it...it works: Full page background image with vertical scrolling

But i have two main concerns:

  1. By this method i must use position: absolute for every section below the image (I will have at least different 4-5 sections with content). Is that the right thing to do ?

  2. This method does not seem to be responsive, is there a way to make it ?

Community
  • 1
  • 1
user2013488
  • 363
  • 2
  • 6
  • 16

2 Answers2

2

You don't have to use position at all. Once you set a div's size with the screen size all the rest of your content will be below.

Here you go: example

The image div will contain your image, and you set it to width: 100% and height: 100%

then, just add your content below this div.

HTML:

<div class='image'>
    <img src="image.jpg" />
</div>
<div class='content'>Content</div>

CSS:

html, body{
    margin: 0;
    height: 100%;
}

.image{
    width:100%;
    height:100%;
    background: green;
}

.image img{
    width:100%;
    height:100%;
}

.content {
    width:100%; height: 100px;
}

You also need to add

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

to support all screen sizes.

Itay Gal
  • 10,706
  • 6
  • 36
  • 75
  • Thanks, I've tried it and it works in general. The problem is that the image becomes a little bigger that the screen and a scrollbar is displayed and I don't want that. Is there a way to remove it? – user2013488 Jan 27 '14 at 16:31
  • have you tried `overflow: hidden` in the img css? Anyway, in this structure it shouldn't happen. did you set your padding and margin to 0? did you set the img border to 0? – Itay Gal Jan 27 '14 at 16:32
  • Got it, the problem comes because the div class="image" is in section(this tag does not have any styling) tag in my code. When i remove the section the scrollbar disappears, but I don't know why does this problem comes in the first place. The overflow: hidden; does not seem to work, and the margin, padding and borders are 0 – user2013488 Jan 27 '14 at 16:38
  • 1
    I just added height: 100%; to the section tag and it works fine now. Thanks for your support :) – user2013488 Jan 27 '14 at 16:44
0

Try this: http://jsfiddle.net/stddC/

In this way the image will be 100% height and width and won't mess with the content.

Gianluca Mancini
  • 1,302
  • 9
  • 10