Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.55/29: Рейтинг темы: голосов - 29, средняя оценка - 4.55
1 / 1 / 1
Регистрация: 04.11.2011
Сообщений: 180
1

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

03.03.2012, 00:14. Просмотров 5688. Ответов 6
Метки нет (Все метки)

Подскажите каким образом создается резиновый фон страницы, размер изображения 1600x900px , пробовал подгонять под 1366x768px,но на экране формата 1024, не полное изображение. Как решить такую проблему?
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
03.03.2012, 00:14
Ответы с готовыми решениями:

Как сделать резиновый фон шапки и резиновый фон меню?
Как сделать резиновый фон шапки и резиновый фон меню?

Резиновый фон
Как быть с картинкой с разрешением 1536x896 если она открывается на экране с разрешением 1366x768...

Резиновый фон
Всем привет) Есть макет, в середине книга в которой находится контент. Ширина фиксированная. Для...

Резиновый фон
У меня фоновая картинка немного обрезается в полном окне. но резинится при разной ширине окна. Если...

6
0 / 0 / 0
Регистрация: 26.11.2011
Сообщений: 18
03.03.2012, 01:51 2
Если у тебя изображение такого размера то его по средствам CSS не уменьшить физически, можно только обрезать. Так что делаешь маленькое изображение и

CSS
1
2
3
min-width:1024px;
max-width:1600px;
background-repeat: repeat-x;
0
1 / 1 / 1
Регистрация: 04.11.2011
Сообщений: 180
05.03.2012, 23:47  [ТС] 3
Может я что не так сделал, но у меня не вышло!(((
Вот код
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>
0
151 / 139 / 18
Регистрация: 18.02.2010
Сообщений: 1,543
06.03.2012, 08:01 4
Скорее всего тут не резиновый фон имеется ввиду, а увеличении ширины фона в зависимости от ширины экрана, я поступаю следующим образом.

- если фоновая картинка под 1024px однотонная(то что можно размножать по осям) по краям, размножаю после 1024 по x, можно и по y.
- если не однотонная, но есть широкоформатный вариант в фотошопе, вставляю её в body целиком, соответственно на 12ках отображается всё без краёв и скролла, на широкоформатках вариант бг полнеет в зависимости от ширины.
- если не однотонная и нету в макете широкоформатного варианта, то тут уже можно либо самому в фотошопе поработать, либо дизайнера напрячь, ещё как вариант - предложить заказчику нарисовать самому, после того как он начинает утверждать, что её можно размножить с лёгкостью.
0
1 / 1 / 1
Регистрация: 04.11.2011
Сообщений: 180
06.03.2012, 08:49  [ТС] 5
Картинку размножить нельзя, формат большой , нужно просто чтобы она сжималась под размеры монитора, а вот какой код для этого нужен не знаю(((
0
151 / 139 / 18
Регистрация: 18.02.2010
Сообщений: 1,543
06.03.2012, 09:06 6
Вариант как сжималась = не отображалась по краям подойдёт? Или должна именно уменьшаться картинка по горизонтали или по вертикали?
Если подойдёт, то создаёшь блок div именно для сайта, указываешь ширину 1260 px или что у тебя по макету. И задаёшь 2 одинаковых бэкграунда для body и для этого div,

CSS
1
background: url("Img/bg.jpg") no-repeat center top ;
в бэкграунде соответственно лежит каринка под 1600px или какая там у тебя.
0
384 / 368 / 92
Регистрация: 15.02.2012
Сообщений: 1,481
06.03.2012, 10:30 7
есть jquery-плагин называется jquery.backstretch попробуй его может он подойдет
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
06.03.2012, 10:30

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Резиновый фон
Помогите с резиновым фоном) уже замучился.. пользовался тегом background-size: cover но картинка...

резиновый фон
Добрый всем день хотелось бы поинтересоваться как сделать с помощью CSS резиновый фон. у меня есть...

Резиновый фон а именно картинка
описывается резиновый фон а именно картитка body { background: url(nature.jpg) center center...

Как сделать резиновый фон ?
добрый день! как сделать резиновый фон, он у меня не растягивается, вместе с контентом ...


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

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.