Jak ustawić responsywne tło w css?

pytanie zadane 22 lipca 2017 w HTML i CSS przez The Real Slim Stefan Początkujący (450 p.)
zmienione kategorie 22 lipca 2017 przez ScriptyChris

Witam mam problem z tym że chciałbym żeby moje tło było responsywne, żeby ładnie skalowało się przy zmianie rozdzielczości tak samo jak robi to bootstrap (albo podobnie).

.bg_img1
{
    background-image: url(../img/zdj.jpg);
    position: relative;
    margin-top: 82px;
    width: 100%;
    overflow: hidden;
    height: 600px;
    filter: blur(0.5px);
}

w moim kodzie zdjęcie wraz ze zmianą rozdzielczości na mniejszą zdjęcie jest ucinane, mogłbym zrobić to po prostu wstawiając w diva zdjęcie i dodać img-responsive bo działam na bootstrapie ale to podobno semantycznie niepoprawnie.

1 odpowiedź

odpowiedź 22 lipca 2017 przez CenterPL Pasjonat (19,070 p.)

background-image:url('../images/zdj.jpg');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

Spróbuj tak

ew zamiast

background-size:contain; użyj background-size: cover;

komentarz 22 lipca 2017 przez The Real Slim Stefan Początkujący (450 p.)

właśnie o to mi chodziło, sam przed chwilą odkryłem tylko teraz jak zrobić żeby to zdjęcie było przyklejone do paska nawigacji który jest cały czas na górze strony bo przy zmniejszaniu odstęp od tego paska się zwiększa co raz bardziej bo wysokość zdjęcia maleje. Mam tam 600px wysokości może to jest powodem że zdjęcie zjeżdża do dołu? Tylko gdy nie ustawię wysokości zdjęcia nie ma na stronie :(

komentarz 22 lipca 2017 przez CenterPL Pasjonat (19,070 p.)

background-position: center top;

;)

komentarz 22 lipca 2017 przez The Real Slim Stefan Początkujący (450 p.)

Już prawie ale im bardziej zmniejszam tym bardziej zdjęcie włazi pod pasek nawigacji jest na to jakaś metoda? :P Dalej mi się wydaje że to wina wyskości