image 100 % width

[zynif]

Καλησπέρα . Έχω ξεκινήσει να μαθαίνω html/css και έχω την εξής απορία.

Έχω τον  σκελετό που φαίνεται στο συνημμένο.

 

 

Θέλω δηλαδή να τοποθετήσω τα στοιχεία το ένα κάτω από το άλλο και θέλω τις εικόνες να πιάνουν όλο το πλάτος της οθόνης χωρίς να υπάρχει "άσπρο" δεξιά και αριστερά.

 

Έχω γράψει το παρακάτω αλλά έχω την αίσθηση ότι υπάρχει καλύτερος τρόπος .

Εσείς τι προτείνετε ;

<section >
    <img id="logo" src="logo.png">
</section>

<section >
    <img id="imgI" src="image1.jpg">
</section>

<section id="text1">
    Some text 1 
</section>

        #logo {
            width: 120px;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        #imgI {
            width: 100%;
            position: absolute;
            left: 0px;
        }

        #text1 {
            position: absolute;
            top : 700px; /* λίγο παραπάνω από το ύψος της εικόνας */
        }

[XPHSTOS_]

Δες αυτό:
http://codepen.io/anon/pen/doEype?editors=110

Στην ουσία το 3ο section δεν χρειάζεται, μπορείς να βάλεις μεσα σε ένα span, div ή ότι άλλο tag θέλεις το κείμενο και να το βάλεις μέσα στο 2ο section το οποίο section θα πρέπει να έχει position relative για να δουλέψει το absolute στο tag του κειμένου.