Responsive background-image CSS ?

Sveiki,

Reikia padaryti, jog paveikslėlis 1000x50px dydžio, automatiškai prisitaikytų prie naršyklės pločio. Tačiau aukštis turi būti fiksuotas. Gali keistis tik plotis.

Bandžiau kažką tokio, tačiau aukštis irgi kinta:

#top {

background-image: url('linkas');

background-repeat:no-repeat;

background-size:100%;

background-position:center;

-moz-background-size: cover; /* Firefox 3.6 */

background-position: center; /* Internet Explorer 7/8 */

height: 50px;

width: 100%;

min-width: 320px;

}

background-size: width (naudok 100%) height (pixeliais nusistatyk)

Kaip padaryti toki dalyką:

Puslapio plotis: 1000px.

Puslapyje yra du stulpeliai. Abu vienodo pločio. {width: 50%}

Reikia padaryti, kad jeigu puslapio plotis sumažėja iki 640px, jog antrasis stulpelis nušoktų žemyn ir puslapio turinys užimtų 100% pločio.

Pas mane prie 640px, antrasis stulpelis nušoka žemyn, tačiau stulpelis nebūna 640px pločio, jis būna tik 500px pločio.

Ar galima šitą visą apsirašyti vienai bendrai rezoliucijai, neskaidant CSS klasių / failų pagal rezoliucijas ?

Kaip padaryti toki dalyką:

 

Puslapio plotis: 1000px.

Puslapyje yra du stulpeliai. Abu vienodo pločio. {width: 50%}

 

Reikia padaryti, kad jeigu puslapio plotis sumažėja iki 640px, jog antrasis stulpelis nušoktų žemyn ir puslapio turinys užimtų 100% pločio.

 

 

Pas mane prie 640px, antrasis stulpelis nušoka žemyn, tačiau stulpelis nebūna 640px pločio, jis būna tik 500px pločio.

 

 

Ar galima šitą visą apsirašyti vienai bendrai rezoliucijai, neskaidant CSS klasių / failų pagal rezoliucijas ?

Nemanau, kad neskaidant eis padaryt, nes tau reikia kad vienam scenarijui būtų 50% o kitam 100%. Tačiau nematau problemos tiesiog daryti

.stulpelis {
width: 50%;
}
@media (max-width: 640px){
.stulpelis {
width: 100%;
}