1 Тема від Faraon Востаннє редагувалося Faraon (22.11.2014 20:42:23)

  • Faraon
  • Faraon
  • Користувач
  • Поза форумом
  • Дата реєстрації: 28.05.2013
  • Повідомлень: 697
    • Репутація: 59

Тема: Як зробити фонову картинку 100% по ширині екрана і по висоті???

Привіт всім. Є картинка 735px на 800px. Я хочу зробити розтягнути її по ширині та по висоті екрану.
Код css:

html {
background-image: url(img/background_5.jpg);
background-size: 100%;
}

але чомусь так не відбувається... картинка розтягується в два, а може й більше рази ніж розмір екрана. чому?

2 Відповідь від Faraon

  • Faraon
  • Faraon
  • Користувач
  • Поза форумом
  • Дата реєстрації: 28.05.2013
  • Повідомлень: 697
    • Репутація: 59

Re: Як зробити фонову картинку 100% по ширині екрана і по висоті???

Ще пробував так:

html {
background-image: url(img/background_5.jpg);
background-size: 100% 100%;
}

але тоді зовсім непонятно що відбувається. Картинка зменшується в висоті до одного піксуля і дублюється

3 Відповідь від Faraon Востаннє редагувалося Faraon (22.11.2014 21:02:06)

  • Faraon
  • Faraon
  • Користувач
  • Поза форумом
  • Дата реєстрації: 28.05.2013
  • Повідомлень: 697
    • Репутація: 59

Re: Як зробити фонову картинку 100% по ширині екрана і по висоті???

Дописав

background-attachment:fixed;

і все розтягується як треба.

Подякували: 0xDADA11C72

4 Відповідь від Faraon Востаннє редагувалося Faraon (30.11.2014 03:44:45)

  • Faraon
  • Faraon
  • Користувач
  • Поза форумом
  • Дата реєстрації: 28.05.2013
  • Повідомлень: 697
    • Репутація: 59

Re: Як зробити фонову картинку 100% по ширині екрана і по висоті???

тепер виникла проблема з розтягуванням фонової картинки по ширині div блоку 75% на 70%.
пробував так:

background: url(img/loc/'.$img_loc.') no-repeat; background-size:75% 70%; background-attachment:fixed';

картинка навіть не появляється.
Пробував ще декількома способами, але все марно.

5 Відповідь від quez

  • quez
  • quez
  • Replace Team
  • Поза форумом
  • Звідки: Новий Єрусалим
  • Дата реєстрації: 01.05.2014
  • Повідомлень: 3 103
    • Репутація: 1621

Re: Як зробити фонову картинку 100% по ширині екрана і по висоті???

75px 70px

Що значить «px»?

Подякували: Faraon1

6 Відповідь від Faraon

  • Faraon
  • Faraon
  • Користувач
  • Поза форумом
  • Дата реєстрації: 28.05.2013
  • Повідомлень: 697
    • Репутація: 59

Re: Як зробити фонову картинку 100% по ширині екрана і по висоті???

quez написав:

75px 70px

Що значить «px»?

ой... там стоїть у мене не в px, а в %. В пікселях тут бажаного не зробиш.

7 Відповідь від quez

  • quez
  • quez
  • Replace Team
  • Поза форумом
  • Звідки: Новий Єрусалим
  • Дата реєстрації: 01.05.2014
  • Повідомлень: 3 103
    • Репутація: 1621

Re: Як зробити фонову картинку 100% по ширині екрана і по висоті???

Так питання ще в силі? Бо в мене все працює.

8 Відповідь від Faraon

  • Faraon
  • Faraon
  • Користувач
  • Поза форумом
  • Дата реєстрації: 28.05.2013
  • Повідомлень: 697
    • Репутація: 59

Re: Як зробити фонову картинку 100% по ширині екрана і по висоті???

quez написав:

Так питання ще в силі? Бо в мене все працює.

до цього моменту воно було актуальне, а тепер ні. Справа ось в чому...
Я розділив сторінку на 4 частини

<div id=left>

</div>
<!-- ---------------------------------------------------------------------------------------------------------  -->

<div id=top_right>

</div>
<!-- ---------------------------------------------------------------------------------------------------------  -->

<div id=mapa>

</div>
<!-- ---------------------------------------------------------------------------------------------------------  -->
<div id=botom_right>

</div>

ну і звичайно задав розмір та розміщення блоків:

#top_right
{
background-image: url(img/png.png);
position: fixed;
top: 0px;
right: 0px;
width: 75%;
height: 5%;

}

#botom_right
{
background-image: url(img/png.png);
position: fixed;
bottom: 0px;
right: 0px;
width: 75%;
height: 25%;
}

#left
{
background-image: url(img/bg.png);
position: fixed;
top: 0px;
left: 0px;
width: 25%;
height: 100%;
}

  #mapa
{
position: fixed;
top: 5%;
left: 25%;
background: url(img/loc/'.$img_loc.') no-repeat; background-size: 100% 100%;
}

як ви всі бачите, всі блоки крім останього мають 2 характеристики: розмір та координати, а останьому я задав лише координати. Розмір вирішив не задавати так як подумав що всі інші частини екрана уже зайняті... подумав що воно автоматично оприділить ширину/висоту блоку. В цьому була моя помилка. Задавши розмір все запрацювало.

Подякували: Djalin1