Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
 
Рейтинг 4.61/72: Рейтинг темы: голосов - 72, средняя оценка - 4.61
241 / 9 / 7
Регистрация: 27.08.2009
Сообщений: 868

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

19.03.2010, 18:51. Показов 15321. Ответов 38
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Скажите ,как масштабировать фоновую картинку ,средствами CSS.
Когда пишу так:
HTML5
1
2
3
body{background-image:url(foto.jpg);
     background-repeat:repeat-у;
    }
Картинка, затем повторяется по-вертикали, что не есть красиво. Как мне сделать к примеру.
Статья большая написана. Чтоб фоновая картинка была на всю статью?
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
19.03.2010, 18:51
Ответы с готовыми решениями:

Задать прозрачность фоновой картинки
background-image:url('../images/g.png') ; Нужно добавить параметр прозрачность 0.2 (только для картинки). Как?

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

Цвет для фоновой картинки (png)
Здравствуйте. У меня есть иконка крестика (close; "X" — только пересечение прямое) для модального окна, но она черного цвета, не...

38
 Аватар для koorya
334 / 181 / 68
Регистрация: 18.03.2010
Сообщений: 586
Записей в блоге: 11
19.03.2010, 19:23
есть другой вариант, можно попробовать фреймами, основная страница это будет просто картинка на весь экран, а фреймом вставить статью.
я точно не знаю как именно этим всем пользоваться, попробуйте просто почитать по фреймы, и есть еще iframe
0
241 / 9 / 7
Регистрация: 27.08.2009
Сообщений: 868
19.03.2010, 19:40  [ТС]
Ребята ,подскажите если кто знает?
0
Комбинатор
 Аватар для DenQ
980 / 252 / 13
Регистрация: 10.03.2010
Сообщений: 3,556
19.03.2010, 20:18
HTML5
1
<img src='foto.jpg' width='100%' height='100%'>
0
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
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
Комбинатор
 Аватар для DenQ
980 / 252 / 13
Регистрация: 10.03.2010
Сообщений: 3,556
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, что смешного?
0
 Аватар для koorya
334 / 181 / 68
Регистрация: 18.03.2010
Сообщений: 586
Записей в блоге: 11
19.03.2010, 20:52
DenQ
0
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
4 / 4 / 0
Регистрация: 14.03.2010
Сообщений: 69
19.03.2010, 21:01
koorya, а ты подумай как будет смотреться картинка разрешением допустим 1024*768 на экране с разрешением 1600*1200? это реально бред будет
0
 Аватар для koorya
334 / 181 / 68
Регистрация: 18.03.2010
Сообщений: 586
Записей в блоге: 11
19.03.2010, 21:10
A1mazik, я бы таких больших картинок на фон не ставил, не знаю зачем Syltan'у это понадобилось.
ну а впрочем была бы у всех скорость измеряемая в мегабайтах/сек, я бы фон и не с таким запасом отправлял.
0
4 / 4 / 0
Регистрация: 14.03.2010
Сообщений: 69
19.03.2010, 21:13
koorya, согласен=)))
0
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
125 / 123 / 0
Регистрация: 30.03.2009
Сообщений: 766
19.03.2010, 21:34
на самом деле, по ходу кроме как image-ем тут и не решить, вот только у меня не получилось, чтобы картинка оставалась на месте при скроллинге во всех браузерах (точнее в ie не работает). а если скорллинга нет, то прокатит. показать?
0
4 / 4 / 0
Регистрация: 14.03.2010
Сообщений: 69
19.03.2010, 21:38
Lolcht0, покажи
0
241 / 9 / 7
Регистрация: 27.08.2009
Сообщений: 868
19.03.2010, 21:39  [ТС]
Погодите. Если я напишу как говорит Denq. Я просто размещу картинку размер на все 100%. А если у меня статья очень длинная, так картинка не будет фоном до конца статья, её размер в размер монитора закончится, а дальше спускаясь скролингом, картинка отображаться не будет. Ваш код толкьо отобразит картинку на экране, но эта картинка не станет фоном, чтоб на этой самой картинке было всё остальное, текст, кнопки, радио-переключатели, и др. картинки на этой же картинке. и т.д..
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
19.03.2010, 21:39
Помогаю со студенческими работами здесь

Создание фоновой картинки средствами HTML
Народ здравствуйте. Сдавал контрольную работу преподу и он спросил почему я фоновую картинку прописал путь через CSS? Сказал что правильно...

Растягивание фоновой картинки на весь экран
body { bgcolor:#f0f8ff; background: url(&quot;../images/bg.jpeg&quot;) no-repeat;... Как присвоить картинке растягивание,то-есть,чтобы картинка...

Из-за фоновой картинки, сайт сдвинулся, как подправить?
Добрый день, без фоновой картинки все норм, но когда я ее вставляю, появляется справа белая полоска, как ее адаптировать? Вроде бы...

как сменить цвет фоновой картинки в background: url?
Есть элемент со свойством: background: url(img/checkPoint.png) no-repeat; Картинка checkPoint.png белая, имеет прозрачный фон. Надо...

Изменение фоновой картинки одного блока при наведении на другой
Добрый вечер.Верстаю макет, ломаю голову над одним моментом, а именно: Есть блок wrapper, внутри которого находится меню, задача - при...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
Новые блоги и статьи
Загрузка 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
Решили писать научную статью с неким РОманом
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru