масштабирование фоновой картинки

@Syltan · Регистрация: 27.08.2009

Студворк — интернет-сервис помощи студентам

Скажите ,как масштабировать фоновую картинку ,средствами CSS.
Когда пишу так:

HTML5
1
2
3
body{background-image:url(foto.jpg);
     background-repeat:repeat-у;
    }

Картинка, затем повторяется по-вертикали, что не есть красиво. Как мне сделать к примеру.
Статья большая написана. Чтоб фоновая картинка была на всю статью?

@koorya · 19.03.2010, 19:23

есть другой вариант, можно попробовать фреймами, основная страница это будет просто картинка на весь экран, а фреймом вставить статью.
я точно не знаю как именно этим всем пользоваться, попробуйте просто почитать по фреймы, и есть еще iframe

@Syltan · 19.03.2010, 19:40 **[ТС]**

Ребята ,подскажите если кто знает?

@DenQ · 19.03.2010, 20:18

HTML5
1
<img src='foto.jpg' width='100%' height='100%'>

@Syltan · 19.03.2010, 20:19 **[ТС]**

Я имею ввиду в CSS как это сделать.

@koorya · 19.03.2010, 20:22

я не знаю как, и не знаю как этот пост удалить

@A1mazik · 19.03.2010, 20:46

сделай разрешение картинки больше и поставь ее на фон, а если будешь пытаться растягивать то качество оооочень сильно пострадает

@koorya · 19.03.2010, 20:49

A1mazik, а качать ты её потом как собираешься?
хотя ответ верный, и решили средствами css

@DenQ · 19.03.2010, 20:49

Вот средствами CSS:
1.html /*имя картинки только смени на свою*/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-utf-8">
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>Index</title>
    </head>
<body>
    <div class="figure">
        <img class="scaled" src="1.png">
    </div>
</body>
</html>

style.css

HTML5
1
2
3
img.scaled {
  width: 100%;
}

koorya, что смешного?

@koorya · 19.03.2010, 20:52

DenQ

@A1mazik · 19.03.2010, 20:55

легче потом ее уменьшить чем растягивать да и качество лучше будет а на счет скачивать я не думаю что существенно отличаться размеры будут

@koorya · 19.03.2010, 20:59

A1mazik
уменьшать размеры скаченной картинки глупо, нафига же мы тогда столько качали раз нам её в уменьшенном виде показывают

@A1mazik · 19.03.2010, 21:01

koorya, а ты подумай как будет смотреться картинка разрешением допустим 1024*768 на экране с разрешением 1600*1200? это реально бред будет

@koorya · 19.03.2010, 21:10

A1mazik, я бы таких больших картинок на фон не ставил, не знаю зачем Syltan'у это понадобилось.
ну а впрочем была бы у всех скорость измеряемая в мегабайтах/сек, я бы фон и не с таким запасом отправлял.

@A1mazik · 19.03.2010, 21:13

koorya, согласен=)))

@Lolcht0 · 19.03.2010, 21:16

DenQ, так не будет работать. попробуй добваить еще элементы после <div>

@koorya · 19.03.2010, 21:20

DenQ, ну ты решил все в css, но все же не background'ом, а как сам и предлагал имэйджем

@Lolcht0 · 19.03.2010, 21:34

на самом деле, по ходу кроме как image-ем тут и не решить, вот только у меня не получилось, чтобы картинка оставалась на месте при скроллинге во всех браузерах (точнее в ie не работает). а если скорллинга нет, то прокатит. показать?

@A1mazik · 19.03.2010, 21:38

Lolcht0, покажи

@Syltan · 19.03.2010, 21:39 **[ТС]**

Погодите. Если я напишу как говорит Denq. Я просто размещу картинку размер на все 100%. А если у меня статья очень длинная, так картинка не будет фоном до конца статья, её размер в размер монитора закончится, а дальше спускаясь скролингом, картинка отображаться не будет. Ваш код толкьо отобразит картинку на экране, но эта картинка не станет фоном, чтоб на этой самой картинке было всё остальное, текст, кнопки, радио-переключатели, и др. картинки на этой же картинке. и т.д..

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом

@koorya 334 / 181 / 68 Регистрация: 18.03.2010 Сообщений: 586 Записей в блоге: 11
	19.03.2010, 19:23
	есть другой вариант, можно попробовать фреймами, основная страница это будет просто картинка на весь экран, а фреймом вставить статью. я точно не знаю как именно этим всем пользоваться, попробуйте просто почитать по фреймы, и есть еще iframe 0

@Syltan 241 / 9 / 7 Регистрация: 27.08.2009 Сообщений: 868
	19.03.2010, 19:40 [ТС]
	Ребята ,подскажите если кто знает? 0

@Syltan 241 / 9 / 7 Регистрация: 27.08.2009 Сообщений: 868
	19.03.2010, 20:19 [ТС]
	Я имею ввиду в CSS как это сделать. 0

@koorya 334 / 181 / 68 Регистрация: 18.03.2010 Сообщений: 586 Записей в блоге: 11
	19.03.2010, 20:22
	я не знаю как, и не знаю как этот пост удалить 0

@A1mazik 4 / 4 / 0 Регистрация: 14.03.2010 Сообщений: 69
	19.03.2010, 20:46
	сделай разрешение картинки больше и поставь ее на фон, а если будешь пытаться растягивать то качество оооочень сильно пострадает 0

@koorya 334 / 181 / 68 Регистрация: 18.03.2010 Сообщений: 586 Записей в блоге: 11
	19.03.2010, 20:49
	A1mazik, а качать ты её потом как собираешься? хотя ответ верный, и решили средствами css 0

@koorya 334 / 181 / 68 Регистрация: 18.03.2010 Сообщений: 586 Записей в блоге: 11
	19.03.2010, 20:52
	DenQ 0

@A1mazik 4 / 4 / 0 Регистрация: 14.03.2010 Сообщений: 69
	19.03.2010, 20:55
	легче потом ее уменьшить чем растягивать да и качество лучше будет а на счет скачивать я не думаю что существенно отличаться размеры будут 0

@koorya 334 / 181 / 68 Регистрация: 18.03.2010 Сообщений: 586 Записей в блоге: 11
	19.03.2010, 20:59
	A1mazik уменьшать размеры скаченной картинки глупо, нафига же мы тогда столько качали раз нам её в уменьшенном виде показывают 0

@A1mazik 4 / 4 / 0 Регистрация: 14.03.2010 Сообщений: 69
	19.03.2010, 21:01
	koorya, а ты подумай как будет смотреться картинка разрешением допустим 1024768 на экране с разрешением 16001200? это реально бред будет 0

@koorya 334 / 181 / 68 Регистрация: 18.03.2010 Сообщений: 586 Записей в блоге: 11
	19.03.2010, 21:10
	A1mazik, я бы таких больших картинок на фон не ставил, не знаю зачем Syltan'у это понадобилось. ну а впрочем была бы у всех скорость измеряемая в мегабайтах/сек, я бы фон и не с таким запасом отправлял. 0

@A1mazik 4 / 4 / 0 Регистрация: 14.03.2010 Сообщений: 69
	19.03.2010, 21:13
	koorya, согласен=))) 0

@Lolcht0 125 / 123 / 0 Регистрация: 30.03.2009 Сообщений: 766
	19.03.2010, 21:16
	DenQ, так не будет работать. попробуй добваить еще элементы после <div> 0

@koorya 334 / 181 / 68 Регистрация: 18.03.2010 Сообщений: 586 Записей в блоге: 11
	19.03.2010, 21:20
	DenQ, ну ты решил все в css, но все же не background'ом, а как сам и предлагал имэйджем 0

@Lolcht0 125 / 123 / 0 Регистрация: 30.03.2009 Сообщений: 766
	19.03.2010, 21:34
	на самом деле, по ходу кроме как image-ем тут и не решить, вот только у меня не получилось, чтобы картинка оставалась на месте при скроллинге во всех браузерах (точнее в ie не работает). а если скорллинга нет, то прокатит. показать? 0

@A1mazik 4 / 4 / 0 Регистрация: 14.03.2010 Сообщений: 69
	19.03.2010, 21:38
	Lolcht0, покажи 0

@Syltan 241 / 9 / 7 Регистрация: 27.08.2009 Сообщений: 868
	19.03.2010, 21:39 [ТС]
	Погодите. Если я напишу как говорит Denq. Я просто размещу картинку размер на все 100%. А если у меня статья очень длинная, так картинка не будет фоном до конца статья, её размер в размер монитора закончится, а дальше спускаясь скролингом, картинка отображаться не будет. Ваш код толкьо отобразит картинку на экране, но эта картинка не станет фоном, чтоб на этой самой картинке было всё остальное, текст, кнопки, радио-переключатели, и др. картинки на этой же картинке. и т.д.. 0