Stie cineva cum pot face o imagine de background responsive, cu bootstrap sau fara. Daca pun o imagine basic de pe internet pe background nu se adapteaza deloc la rezolutia de la telefon sau alt dizpozitiv cu o rezolutie mai mica ca cea de calculator, cum o pot face in asa fel incat cum o arata pe calculator asa sa o arate si pe telefon ? Ce linie de cod sa bag sau altceva.
Dacă e imagine de background înseamnă că imaginea e definită în CSS, ceea ce face lucrurile și mai simple. Nu ai decât să generezi mai multe imagini și să încarci cea mai potrivită imagine în funcție de lățimea ferestrei. E.g.
@media (min-width: 601px) {
#page {
background: url('images/white-zigzag.png') repeat-x;
}
}
@media (max-width: 600px) {
#page {
background: url('images/white-zigzag-mobile.png') repeat-x;
}
}
Codul de mai sus e copiat de aici.
Se poate rezolva ușor cu background-size: cover
dar asta înseamnă că încarci aceeași imagine de rezoluție mare și pe web și pe mobile (într-o țară unde accesul la date este ieftin asta nu este problemă)
Cu un pic de compasiune pentru consumul de date al utilizatorilor vei aborda fie soluția lui @Luxian fie încerci și https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
Responsive nu se referă doar la aspect ci și la performanță
+1 pt srcset
si pt ca se cerea pt background image, echivalentul lui srcset ar fi image-set
background: -webkit-image-set( url('path/to/image') 1x, url('path/to/high-res-image') 2x );