Резиновый фон!?!?

@Artur Black · Регистрация: 04.11.2011

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

Подскажите каким образом создается резиновый фон страницы, размер изображения 1600x900px , пробовал подгонять под 1366x768px,но на экране формата 1024, не полное изображение. Как решить такую проблему?

@Kilos11 · 03.03.2012, 01:51

Если у тебя изображение такого размера то его по средствам CSS не уменьшить физически, можно только обрезать. Так что делаешь маленькое изображение и

CSS
1
2
3
min-width:1024px;
max-width:1600px;
background-repeat: repeat-x;

@Artur Black · 05.03.2012, 23:47 **[ТС]**

Может я что не так сделал, но у меня не вышло!(((
Вот код

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Главная</title>
<style type="text/css">
div.menu_ihtut_net {
        background: url(enuihtutnet-fon.png) repeat-x 0 0; /* фон меню , пропишите правильный путь! */
        height:80px;
        overflow: hidden;
}
 
div.menu_ihtut_net div#menu_ihtut_net{
        float: left;
        padding:0;
        height:80px;
        margin: 0 300px;
}
 
div.menu_ihtut_net a{
        background: url(enuihtutnet-link.png) no-repeat 0 0; /* фон пунктов меню , пропишите правильный путь! */
        color: #bbb; /* цвет шрифта */
        display: block;
        float: left;
        font: 17px/63px Impact; /* размер шрифта / высота шрифта (НЕ МЕНЯТЬ!) / семейство шрифтов */
        height:65px;
        text-decoration: none; /* подчеркивание(сейчас его нет) */
        text-align: center;
        width: 147px;
        overflow: hidden;
        margin: 10px 0 0 0; /* отступы пунктов меню */
        text-shadow: #000 0 0 1px; /* тень у букв */
}
 
div.menu_ihtut_net a:hover, div.menu_ihtut_net a.active{
        background: url(enuihtutnet-link.png) no-repeat 0 100%; /* фон пунктов меню (при наведении) , пропишите правильный путь! */
        color: #bff5ff; /* цвет шрифта при наведении */
        text-shadow: #249dfb 0 0 25px; /* тень у букв при наведениии */
  }
 
  
body {
    background-image: url(dsaq.jpg);
    min-width:1024px;
    max-width:1600px;
    background-repeat: repeat-x;
}
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
 
 
<!-- код меню -->
<div class="menu_ihtut_net" >
  <div id="menu_ihtut_net">
                <a href="sw.html">Главная</a>
                <a href="#">Об Авторе</a>
                <a href="#">Мои работы</a>
                <a href="#">Прайс лист</a>
                <a href="#">Контакты</a>
        </div>
</div>
<!-- end код меню -->
 
 
 
 
 
            
 
 
</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p align="center"><img src="artur.gif" width="80" height="15"></p>
</body>
</html>

@Mailo · 06.03.2012, 08:01

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

- если фоновая картинка под 1024px однотонная(то что можно размножать по осям) по краям, размножаю после 1024 по x, можно и по y.
- если не однотонная, но есть широкоформатный вариант в фотошопе, вставляю её в body целиком, соответственно на 12ках отображается всё без краёв и скролла, на широкоформатках вариант бг полнеет в зависимости от ширины.
- если не однотонная и нету в макете широкоформатного варианта, то тут уже можно либо самому в фотошопе поработать, либо дизайнера напрячь, ещё как вариант - предложить заказчику нарисовать самому, после того как он начинает утверждать, что её можно размножить с лёгкостью.

@Artur Black · 06.03.2012, 08:49 **[ТС]**

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

@Mailo · 06.03.2012, 09:06

Вариант как сжималась = не отображалась по краям подойдёт? Или должна именно уменьшаться картинка по горизонтали или по вертикали?
Если подойдёт, то создаёшь блок div именно для сайта, указываешь ширину 1260 px или что у тебя по макету. И задаёшь 2 одинаковых бэкграунда для body и для этого div,

CSS
1
background: url("Img/bg.jpg") no-repeat center top ;

в бэкграунде соответственно лежит каринка под 1600px или какая там у тебя.

@tgarl · 06.03.2012, 10:30

есть jquery-плагин называется jquery.backstretch попробуй его может он подойдет

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Artur Black 1 / 1 / 1 Регистрация: 04.11.2011 Сообщений: 180

	Резиновый фон!?!? 03.03.2012, 00:14. Показов 6945. Ответов 6 Метки нет (Все метки) Подскажите каким образом создается резиновый фон страницы, размер изображения 1600x900px , пробовал подгонять под 1366x768px,но на экране формата 1024, не полное изображение. Как решить такую проблему? 0

@Mailo 178 / 226 / 31 Регистрация: 18.02.2010 Сообщений: 2,313
	06.03.2012, 08:01
	Скорее всего тут не резиновый фон имеется ввиду, а увеличении ширины фона в зависимости от ширины экрана, я поступаю следующим образом. - если фоновая картинка под 1024px однотонная(то что можно размножать по осям) по краям, размножаю после 1024 по x, можно и по y. - если не однотонная, но есть широкоформатный вариант в фотошопе, вставляю её в body целиком, соответственно на 12ках отображается всё без краёв и скролла, на широкоформатках вариант бг полнеет в зависимости от ширины. - если не однотонная и нету в макете широкоформатного варианта, то тут уже можно либо самому в фотошопе поработать, либо дизайнера напрячь, ещё как вариант - предложить заказчику нарисовать самому, после того как он начинает утверждать, что её можно размножить с лёгкостью. 0

@Artur Black 1 / 1 / 1 Регистрация: 04.11.2011 Сообщений: 180
	06.03.2012, 08:49 [ТС]
	Картинку размножить нельзя, формат большой , нужно просто чтобы она сжималась под размеры монитора, а вот какой код для этого нужен не знаю((( 0

@tgarl 467 / 431 / 117 Регистрация: 15.02.2012 Сообщений: 1,947
	06.03.2012, 10:30
	есть jquery-плагин называется jquery.backstretch попробуй его может он подойдет 0