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

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

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

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

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

2

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

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

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

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

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

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

Дописав

background-attachment:fixed;

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

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

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

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

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

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

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

5

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

75px 70px

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

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

6

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

quez написав:

75px 70px

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

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

7

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

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

8

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