Пропал фон после подключения Bootstrap

@hisnik636 · Регистрация: 16.11.2016

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

Дорого времени суток.

Делал сайт, потом решил подключить bootstrap , чтобы сделать окно авторизации . Добавил библиотеку, но вот мой фон почему-то стал белым, хотя до этого был прозрачен для другого фона(плавный переход был). Формат фона у меня png.

Подскажите, как исправить , чтобы и бутстрап был и фон нормально показывал бы

@mrtoxas · 16.06.2017, 22:27

Вы подключили bootstrap только для того, чтобы сделать одно окно? Не слишком ли жирно для этого окошка будет?
А насчет фона, то тут не клуб гадания по картинкам. Дайте или код, или ссылку, где можно увидеть вашу проблему.

@hisnik636 · 16.06.2017, 23:45 **[ТС]**

Ну я только учусь пока что, что жирно, а что нет, для меня пока неизвестно)

Код прилагаю:

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
 
<html lang="en">
    <head>
        
        <meta charset="UTF-8">
        <title>Battlefield Blog</title>
        
        
        <link hrf="css/bootstrap.min.css" rel="stylesheet" >
        
        <link rel="stylesheet" type="text/css" href="css/style.css">
        
        <link rel="stylesheet" type="text/css" href="assets/slick/slick/slick.css">
        
        <link rel="stylesheet" type="text/css" href="assets/slick/slick/slick-theme.css">
        
        
        
        
    </head>
    
    <body>
        <div id="page-wrapper">
            <header id="header">
                <div class="container">
                
                    <div id="primary-menu">
                        <ul>
                            <li> <a href=#>Главная</a></li>
                            <li> <a href=#>Категории</a></li>
                            <li> <a href=#>О нас</a></li>
                            <li> <a href=#>Контакты</a></li>
                        </ul>
                    </div>
                    <div id="secondary-menu">
                        <ul>  
                            <li> <a href=#>Новости</a></li>
                            <li> <a href=#>Летсплей</a></li>
                            <li> <a href=#>Гайды</a></li>
                            <li id="logo"><img src="images/SF6E48OYJ2UC.jpg" alt=""></li>
                            <li> <a href=#>Читы</a></li>
                            <li> <a href=#>Форум</a></li>
                            <li> <a href=#>Разное</a></li>
                        </ul>
                    </div>
                </div>
            </header>
            
            <div id="content-wrapper" class="container">
                <div id="sidebar">
                    <div class="row">
                        <div class="well span4 offset4">
                            <legend> Авторизация</legend>
                                <div class="alert alert-error">
                                    <a class="close" href="#" datadismiss="alert">x</a>Введены неверные данные!
                                </div>
                            <form method="POST" action="" accept-charset="UTF-8">
                                <input type="text" class="span4" placeholder="Логин" name="login">
                                <input type="password" class="span4" placeholder="Пароль" name="password">
                                <label class="checkbox">
                                    <input type="checkbox" value="1" name="remember"> Запомнить меня
                                </label>
                                <button type="sumbit" name="sumbit" class="btn btn-block btn-success">Авторизироваться</button>
                            
                            </form>
                        </div>
                    </div>
                </div>
                <script src="http://code.jquery.com/jquery-latest.js"></script>
                <script src="js/bootstrap.min.js"></script>
                <div id="slider">
                    <div class="item"><img src="images/slider/11.jpg" alt=""></div>
                    <div class="item"><img src="images/slider/22.png" alt=""></div>
                    <div class="item"><img src="images/slider/33jpg.jpg" alt=""></div>
                    
                </div>
                
 
                    <div id="content">
    <img src="images/BF4-Nyhetsbild-700x247-1_w700_h247.png">                     
<h4>Приветствуем вас бойцы! Пришло время для летнего турнира по Battlefield 4 и мы объявляем набор команд для регистрации в турнире. 
Призовой фонд - 1-е место - 5000 рублей. Игры будут проходить в формате<a href="">...читать далее</a></h4>
 
 
                    </div>
                    
                
                        <div class="news"> <img src="images/maxresdefault.jpg">Вышел долгожданный новый патч версии 1.04<a href="">...читать далее</a></div>
                        <div class="news"> <img src="images/battlefield-3-end-game-dlc_pdp_3840x2160_en_WW.jpg">Создатели игры аннонсировали дату выхода дополнения END THE GAME<a href="">...читать далее</a> </div>
                        <div class="news"> <img src="images/maxresdefault%20(1).jpg"> Вот уже совсем скоро состоиться встреча 2-ух сильнейших команд<a href="">...читать далее</a></div>
 
 
            <div class="clear"></div>
            
            </div>
            <div class="container">
                <footer id="footer">
           2017 All rights reserved.
            </footer>
            </div>
            
        </div>
        
        <script src="assets/jquery/jquery-3.2.1.min.js" defer></script>
        <script src="js/main.js" defer></script>
        <script src="assets/slick/slick/slick.min.js" defer></script>
        
    </body>
</html>

CSS:

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
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
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
 
 
 
 
* {
    font-family: 'Roboto Condensed', Arial,  sans-serif;
    box-sizing:content-box;
}
.container {
    width:1200px;
    margin:0 auto;
}
 
#page-wrapper {
    padding-top:200px;
    padding-bottom: 200px;
}
 
html {
    background-repeat: no-repeat;
}
 
html {
    background-image: url(../images/thumb-1920-458036.jpg);
 background-position: top center;
 background-repeat: no-repeat;
 background-attachment: fixed;
    
}
#page-wrapper {
    height:150px;
    width:100%;
}
 
#page-wrapper {
    background-image: url(../images/header.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size:100% 100%;
    
    
            
}
hmtl,body {
    padding:0px;
    margin:0px;
}
 
img {
    max-width:100%;
    
}
a {
    display:inline-block;
}
#primary-menu {
    Background: #FF9700;
    height:75px;
    width:50%;
    position:relative;
    margin:0 auto;
 
}
#primary-menu::before {
    content:" ";
    top:-1px;
    left:-76px;
    position:absolute;
    border: 38px solid transparent;
    border-right-color: #FF9700;
    border-bottom-color: #FF9700;
}
 
#primary-menu::after{
    content:" ";
    top:-1px;
    right:-76px;
    position:absolute;
    border: 38px solid transparent;
    border-left-color: #FF9700;
    border-bottom-color: #FF9700;
}
 
#primary-menu > ul {
    padding:0;
    margin:0;
    font-size: 0;
    overflow: hidden;
    text-align:center;
}
 
#primary-menu > ul > li {
    display:inline-block;
    list-style: none;
    font-size: 16px;
    
}
 
#primary-menu > ul > li a{
    color: #fff;
    text-decoration: none;
    height:75px;
    line-height:75px;
    padding:0 15px;
    position: relative;
    z-index:999;
    color:#fff;
    
}
#primary-menu > ul > li a:hover{
    color:#333;
}
 
#primary-menu > ul > li a::before {
    content: " ";
    position: absolute;
    left:-4px;
    top:-25px;
    width:100%;
    height:150px;
    opacity:0;
    transform: rotate(20deg);
    background-color: rgba(255,255,255, 1);
    z-index:-1;
    opacity: 0;
 
}
#primary-menu > ul > li a:hover::before {
    opacity:1;
}
 
#secondary-menu {
    Background: #061727;
    height:100px;
    width:100%;
    margin:0 auto;
    padding: 0 ;
    text-align: center;
}
 
#secondary-menu ul {
    padding:0;
    margin: 0;
    display:inline-block;
    line-height: 100px;
}
#secondary-menu > #logo {
    display:inline-block;
    width:400px;
}
 
#secondary-menu > ul > li {
    display: inline-block;
    list-style: none;
    margin-right:20px;    
}
#secondary-menu > ul > li > a {
    text-decoration: none;
    color:#fff;
}
 
#secondary-menu > ul > li > a:hover {
    color: #FF9700;
}
#secondary-menu > ul > #logo {
    width:550px;
    position: relative;
}
 
#slider {
    width:78%;
    overflow: hidden;
    margin:0;
 
    
}
#secondary-menu > ul > #logo > img {
    position: absolute;
    width:400px;
    left:75px;
    top:-45px;
}
 
#content-wrapper {
    background-color: #fff;
}
 
#main-content {
 
}
 
#content, #sidebar, #slider {
    float:left;
    padding:40px;
 
 
 
}
 
#content {
    padding:0;
    width:75%;
    margin:0;
    width:78%;
    outline: 1px solid #000;
}
#content > img {
    width:100%;
    height:350px;
}
 
#sidebar {
    width: 15%;
    background: red
    text-align: center;
    margin: 0;
    height:900px;
}
button {
   margin-left: -13px;
    
}
.well {
    margin-top:20px;
}
.news {
    width:22%;
    height:100%;
    float:left;
    text-align:center;
    outline: 1px solid #000;
    margin-top: 50px;
    margin-left:20px;
    border: 10px solid #fff;
    
}
.clear {
    clear:both;
}
 
 
#footer {
    background-color: #061727;
    padding:40px;
    color:#fff;
}

@53ifbb · 17.06.2017, 00:47

у бутстрап есть reset.css.
подключать его нужно первым, а ваш стиль вторым.
Фон нужно задать к боди, а не к html...

@hisnik636 · 17.06.2017, 01:35 **[ТС]**

Почему , допустим, к html нельзя привязать фон?

Рыжий Лис · 17.06.2017, 09:39

Сообщение от hisnik636

Почему , допустим, к html нельзя привязать фон?

Можно, но у body может быть (и есть) свой фон, который полностью закроет фон у html.

@hisnik636 · 17.06.2017, 23:25 **[ТС]**

что-то не вижу reset.css файла.

Подключать вторым , вы имеете ввиду, что , к примеру, бутстрап на 3 строчке, а мой стиль на 4?

@mrtoxas · 17.06.2017, 23:38

Назначьте фоновое изображение не для html, а для body. И поставьте точку с запятой в 215й строке css-файла.

CSS
1
2
3
4
5
6
7
8
9
html,body{
  height:100%;
}
body{
 background-image: url(../images/thumb-1920-458036.jpg);
 background-position: top center;
 background-repeat: no-repeat;
 background-attachment: fixed;
}

@hisnik636 · 17.06.2017, 23:52 **[ТС]**

Благодарю) Все работает.

Новые блоги и статьи Все статьи Все блоги /
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .	Фото: Daniel Greenwood kumehtar 13.11.2025	Расскажи мне о Мире, бродяга kumehtar 12.11.2025 — Расскажи мне о Мире, бродяга, Ты же видел моря и метели. Как сменялись короны и стяги, Как эпохи стрелою летели. - Этот мир — это крылья и горы, Снег и пламя, любовь и тревоги, И бескрайние. . .

@hisnik636 0 / 0 / 0 Регистрация: 16.11.2016 Сообщений: 26

	Пропал фон после подключения Bootstrap 16.06.2017, 22:01. Показов 5248. Ответов 8 Метки нет (Все метки) Дорого времени суток. Делал сайт, потом решил подключить bootstrap , чтобы сделать окно авторизации . Добавил библиотеку, но вот мой фон почему-то стал белым, хотя до этого был прозрачен для другого фона(плавный переход был). Формат фона у меня png. Подскажите, как исправить , чтобы и бутстрап был и фон нормально показывал бы Миниатюры 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	16.06.2017, 22:27
	Вы подключили bootstrap только для того, чтобы сделать одно окно? Не слишком ли жирно для этого окошка будет? А насчет фона, то тут не клуб гадания по картинкам. Дайте или код, или ссылку, где можно увидеть вашу проблему. 0

@53ifbb 55 / 55 / 21 Регистрация: 01.03.2016 Сообщений: 594
	17.06.2017, 00:47
	у бутстрап есть reset.css. подключать его нужно первым, а ваш стиль вторым. Фон нужно задать к боди, а не к html... 0

@hisnik636 0 / 0 / 0 Регистрация: 16.11.2016 Сообщений: 26
	17.06.2017, 01:35 [ТС]
	Почему , допустим, к html нельзя привязать фон? 0

@hisnik636 0 / 0 / 0 Регистрация: 16.11.2016 Сообщений: 26
	17.06.2017, 23:25 [ТС]
	что-то не вижу reset.css файла. Подключать вторым , вы имеете ввиду, что , к примеру, бутстрап на 3 строчке, а мой стиль на 4? 0

@hisnik636 0 / 0 / 0 Регистрация: 16.11.2016 Сообщений: 26
	17.06.2017, 23:52 [ТС]
	Благодарю) Все работает. 0

Пропал фон после подключения Bootstrap

Решение