Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум web-программистов > HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.83/6: Рейтинг темы: голосов - 6, средняя оценка - 4.83
0 / 0 / 1
Регистрация: 24.01.2018
Сообщений: 23

Адаптивный фон

24.01.2018, 15:43. Показов 1236. Ответов 4
Метки background, css, html (Все метки)
Студворк — интернет-сервис помощи студентам
Возникла проблема с фоном.
Когда меняю ширину в консоли, фон на всех размерах ведет себя прекрасно. Но, стоит мне зайти через смарт, планшет, сразу включается какое-то дикое масштабирование и фон выглядит неправильно.
Собственно код(Понимаю, что он очень далек он идеала, но я постепенно учусь и делаю его лучше):
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
85
86
87

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Site</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="font/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/animate.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="css/media.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="js/viewportchecker.js"></script>
</head>
<body>
    <div class=" navbar navbar-fixed-top">
        <div class="container">
            <div class="navbar-container">
                <div class="navbar-item">Main</div>
                <div class="navbar-item">Skills</div>
                <div class="navbar-item">Projects</div>
                <div class="navbar-item">Contacts</div>
            </div>
        </div>
    </div>
<div class="content">
    <div class="header">
        <div class="photo">
        <img src="img/me.jpg" class="me">
        <h1>Имя Фамилия</h1>
        <ul class="short_word-container">
            <li>sagittis</li>
            <li>sagittis.</li>
            <li>sagittis</li>
            <li>sagittis.</li>
            <li>sagittis</li>
            <li>sagittis.</li>
        </ul>
        </div>
    </div>
<div class="about_sckillz">
    <div class="html">
        <img src="img/html5.png" class="about">
        <div class="about_html about">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pulvinar pellentesque quam, sed tristique dolor imperdiet et. Proin ornare pharetra sem vitae sagittis. Nam tincidunt, nibh sed scelerisque hendrerit, turpis tortor rhoncus ipsum, tristique lacinia mauris magna a justo. Nulla facilisi.</div></div>
        <div class="css">
            <img src="img/css3.png" class="about">
            <div class="about_css about">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pulvinar pellentesque quam, sed tristique dolor imperdiet et. Proin ornare pharetra sem vitae sagittis. Nam tincidunt, nibh sed scelerisque hendrerit, turpis tortor rhoncus ipsum, tristique lacinia mauris magna a justo. Nulla facilisi.</div></div>
        <div class="javascript">
            <img src="img/Javascript.png" class="about">
            <div class="about_javascript about">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pulvinar pellentesque quam, sed tristique dolor imperdiet et. Proin ornare pharetra sem vitae sagittis. Nam tincidunt, nibh sed scelerisque hendrerit, turpis tortor rhoncus ipsum, tristique lacinia mauris magna a justo. Nulla facilisi.</div></div>
        </div>
 
<input type="button" value="Подробнее" class="about skillz_more">
<hr align="center" color="#fff"/>
<div class="my_projects">
<h2>Проекты</h2>
<h2>Projects</h2>
</div>
<div class="contacts">
<hr align="center" color="#fff"/ class="for_mobile_device">
<hr align="left" width="30%" color="#fff" size="100" />
<hr align="right" width="30%" color="#fff"/>
<h2 class="name_contacts">Контакты</h2>
<div class="contacts_item">
    <div class="contacts_title">Skype</div>
    <div class="contacts_title">Email</div>
    <div class="contacts_title">Facebook</div>
</div>
<div class="contacts_item_description ">
    <div><a href="#"><img src="img/icons/skype.png" class="tada animated"></a><span>Link</span></div>
    <div><img src="img/icons/mail.png" class="tada animated"></a><span>Link</span></div>
    <div><a href="#"><img src="img/icons/facebook.png" class="tada animated"></a><span>Link</span></div>
</div>
<div class="contacts_item_second">
    <div class="contacts_title">Telegram</div>
    <div class="contacts_title">Phone</div>
</div>
<div class="contacts_item_description_second">
    <div><a href="#"><img src="img/icons/telegram.png" class="tada animated"></a><span>Link</span></div>
    <div><img src="img/icons/phone.png" class="tada animated"><span>Link</span></div>
</div>
</div>
</div>
    
    <script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206

@import url('https://fonts.googleapis.com/css?family=Anton|Lato|Oswald|Work+Sans');
*{
margin:0;
padding: 0;
}
html{
    overflow-x: hidden; 
}
body{
    font-family: "Lato";
    font-weight: 800;
    background-image: url('../img/background.jpg');  
    background-repeat:no-repeat;
    background-position: center center;
      -webkit-background-size: cover;
      -webkit-background-attachment: fixed;
          -moz-background-size: cover;
          -o-background-size: cover;
              
}    
h1{
    font-family: "Oswald";
    color: #fff;
}
 
a{
    text-decoration: none;
}
a:hover{
    text-decoration: none;
}
.navbar{
    width: 100%;
    background-color: #f2f2f2;
    height: 23px;
    overflow: hidden;
    position: fixed; 
    top: 0; 
}
.navbar-container{
    display: flex;
    flex-direction: row;
    width: 100%;
}
.navbar-container >.navbar-item{
    margin-left: 15%;
}
.content{
    
    width: 100%;
    max-width: 1368px;
    
}
.header >.photo >.me{
    margin-top: 120px;
    width: 180px;
    height: 180px;
    border-radius: 1px;
    border-style: solid;
    border-color: #fff;
}
.header >.photo >h1{
    margin-top: 20px;
    margin-left: -85px;
}
.header >.photo{
    margin-left: 42%;
}
.header >.photo >.short_word-container{
    list-style: none;
    margin-left: -320px;
    color: #fff;
    font-size: 1.5em;
}
.header >.photo >.short_word-container > li{
    float: left;
    padding-right: 6px; 
}
.header >.photo >.short_word-container > li:nth-child(1){
    text-decoration: underline;
}
.header >.photo >.short_word-container > li:nth-child(4){
    text-decoration: underline;
}
.header >.photo >.short_word-container > li:nth-child(5){
    text-decoration: underline;
}
 
.content > .about_sckillz{
    display: flex;
    flex-direction: row;
    color: #fff;
    margin-top: 100px;
    text-align: center;
}
 
.content >.about_sckillz > div{
    margin: 0 auto;
    width: 200px;
}
.content >.about_sckillz >.html > img{
    width: 120px;
    height: 120px;
    
}
.content >.about_sckillz >.css > img{
    width: 150px;
    height: 150px;
    
}
.content >.about_sckillz >.javascript > img{
    width: 110px;
    height: 110px;
}
 
.hidden{
    opacity: 0;
}
.visible{
    opacity: 1;
}
 
.skillz_more{
    margin-left: 43%;
    width: 145px;
    height: 50px;
    font-size: 27px;
    border-style: none;
    background-color: transparent;
    color: #fff;
}
.my_projects > h2{
    margin-left: 10%;
    color: #fff;
    font-size: 3em;
    font-family: "Oswald";
}
.contacts{
    margin-top: 300px;
    text-align: center;
}
 
.contacts > hr:nth-child(2){
    position: absolute;
    height: 5px;
    left: -1%;
    max-width: 580px;
}
.contacts > hr:nth-child(3){
    position: absolute;
    left: 70%;
    height: 5px;
}
.contacts > h2{
    color: #fff;
    height: auto;
    font-size: 3em;
    font-weight: 900;
}
.contacts >.contacts_item{
    display: flex;
    flex-direction: row;
    color: #fff;
}
.contacts >.contacts_item >.contacts_title{
    font-size: 2em;
    margin-top: 50px;
    margin: 0 auto;
    text-decoration: underline;
}
    .contacts >.contacts_item_description >div > a >img,.contacts >.contacts_item_description > div > img {
    width: 50px;
    height: 50px;
}
.contacts >.contacts_item_description{
    display: flex;
    flex-direction: row;
}
 
.contacts >.contacts_item_description >div{
    margin: 0 auto;
    color: #fff;
} 
.contacts >.contacts_item_description >div:last-child{
    margin-left: 12%;
}
.contacts >.contacts_item_second{
    display: flex;
    flex-direction: row;
    color: #fff;
}
.contacts >.contacts_item_second >.contacts_title{
    font-size: 2em;
    margin-top: 50px;
    margin-left: 27%;
    text-decoration: underline;
}
.contacts >.contacts_item_description_second{
    display: flex;
    flex-direction: row;
}
 
.contacts >.contacts_item_description_second >div{
    margin-left: 25%;
    color: #fff;
}
И последнее, файл с @media
CSS
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98

.header >.photo >.short_word-container > li{
    float: left;
    padding-right: 6px; 
}
.contacts >.for_mobile_device{
    height: 5px;
    display: none;
}
@media screen and (max-width: 900px){
.header >.photo > .me{
    margin-left: -9%;
}
.header >.photo > h1{
    margin-left: -31%;
}         
.header >.photo >.short_word-container > li:nth-child(5){
    clear: both;
    margin-left: 120px;
}
.header >.photo >.short_word-container{
    margin-left: -220px;
}
.content > .about_sckillz >.about{
    margin-left: 7.5%;
}
.content > .icon >.icon-row{
    margin-left: 16%;
}
 
.icon{
    margin-left: -10%;
}
 
.contacts > .contacts_item_second, .contacts_item_description_second{
    margin-left: -15%;
}
 
 
}   
@media (max-width: 600px){
.navbar-container > .navbar-item{
    margin: 0 auto;
}
.header >.photo >.me{
    margin-top: 50px;
    margin-left: -15%;
}
.header > .photo > h1{
    margin-left: -140px;
}
.header >.photo >.short_word-container > li:nth-child(3){
    clear: both;
    margin-left: 80px;
}
.content > .about_sckillz{
    font-size: 1em;
}
.skillz_more{
    margin-left: 37%;
}
.content >.about_sckillz {
    display: block;
}
.content >.about_sckillz > div{
    width: 400px;
}
.contacts_item_description_second {
    margin-left: 8%;
}
.contacts > hr:nth-child(2),hr:nth-child(3){
    display: none;
}
.contacts >.for_mobile_device{
    display: block;
}
.contacts > .contacts_item, .contacts_item_second > .contacts_title, .contacts_item_description > div >span, .contacts_item_description_second > div > span{
    display: none;
}
}
@media (max-width: 478px){
.header >.photo >.me{
    margin-left: -22%;
}
.header >.photo >h1{
    font-size: 2em;
    margin-left: -110px;
}
.header >.photo >.short_word-container{
    padding-left: 80px;
    font-size: 1em;
}
.content > .about_sckillz{
    margin-top: 100px;
}
.content >.about_sckillz > div{
    width: 300px;
}
}
Миниатюры
Адаптивный фон   Адаптивный фон  
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
 24.01.2018, 15:43
Ответы с готовыми решениями:

адаптивный фон
Всем здравствуйте!! Подскажите решение. Нужно сверху страницы на всю ширину окна замостить по горизонтали картинку: width: 248px; и...

Адаптивный фон
Подскажите можно как-то такой бэкграунд сделать адаптивным и что-бы он тянулся от контента?? Знаю вариант если бы не было...

Адаптивный фон c bootstrap
Пытаюсь сделать адаптивный фон, но почему-то изображение получается обрезанным подскажите почему? &lt;div id=&quot;main&quot;&gt; ...

4
33 / 31 / 18
Регистрация: 05.07.2014
Сообщений: 230
25.01.2018, 20:35
А ссылка на сайт есть?
0
Заблокирован
25.01.2018, 21:04
Можно разрезать картинку фона на две части, часть нижняя ( скалы) и верх- небо. И далее играться с свойством background-size. Будут вопросы- пиши в личку.
0
52 / 52 / 39
Регистрация: 15.11.2014
Сообщений: 696
26.01.2018, 09:35
Jef_Chenger, понимаю, что то, что я предложу - это костыль/хак, но я пробовал успешно поставить такое правило для всех элементов страницы.
CSS
1
2
3

* {
max-height: 999999999px;
}
Выглядит как абсурд, но у меня была подобная проблема с масштабированием и это помогло
0
Заблокирован
26.01.2018, 22:09
Можно попробовать юзать max-height или что то вроде height:100vh;
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
 26.01.2018, 22:09
Помогаю со студенческими работами здесь

Адаптивный фон фигура
Возможно ли реализовать красный треугольник адаптивно при помощи css прозрачный и непрозрачный вариант или надо делать как картинку...

Как сделать адаптивный задний фон CSS
Сайт делал на мониторе 1980X1080, у меня все ок, но заметил что на ноуте с меньшим разрешением фон смещается, на телефоне такая же шляпа....

Bootstrap3: как сделать адаптивный текст, ссылки и фон?
Подскажите пож как в боотстрап3 делают адаптивный текст, ссылки, и фон. Добавлено через 1 час 12 минут Что никто не знает ответа?)))

Фон позади кнопки должен быть, как фон блока
Фон позади кнопки должен быть, как фон блока Это сложно объяснить словами, скину скрины макета Надеюсь вы мне поможете и...

Фон body перекрывает фон остальных элементов
Добрый день. Столкнулся с такой проблемой когда писал сss код body{ background:red;}; div {background:green;}.У меня почему-то бэкраунд...


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

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Новые блоги и статьи
Символьное дифференцирование
igorrr37 13.02.2026
/ * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила»
zbw 12.02.2026
«Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image
8Observer8 10.02.2026
Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .
Установка Qt-версии Lazarus IDE в Debian Trixie Xfce
volvo 10.02.2026
В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru