Глюк с background-image

@ARGR · Регистрация: 19.05.2013

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

Добрый день Друзья!
Осваиваю верстку, и у меня возникла проблема с background-image.
Когда файл стилей лежит в одной папке с index.html - фоновое изображение отображаетсяВ ШАПКЕ САЙТА .
Когда переношу файл стилей во внутреннюю папку - background-image ИСЧЕЗАЕТ из видимости!!!

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script><![endif]-->
    <title>Косвет</title>
    <meta name="keywords" content="Ключевики" />
    <meta name="description" content="описание" />
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<!--[if lt IE 7]>
    <![if gte IE 5.5]>
    <script type="text/javascript" src="js/fixpng.js"></script>
    <style type="text/css"> 
    .iePNG { filter:expression(fixPNG(this)); } 
    .iePNG A { position: relative; }/* стиль для нормальной работы ссылок в элементах с PNG-фоном */
    </style>
    <![endif]>
    <![endif]-->
</head>
 
<body>
 
<div class="wrapper">
 
    <header class="header">
        
        <div id="logo"><img src="img/logo.png" class="iePNG" alt="Логотип"/></div>
        .
    </header><!-- .header-->
 
    <div class="middle">
 
        <div class="container">
            <main class="content">
                <strong>Content:</strong> Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl. Quisque vitae pede. Nam et augue. Sed a elit. Ut vel massa. Suspendisse nibh pede, ultrices vitae, ultrices nec, mollis non, nibh. In sit amet pede quis leo vulputate hendrerit. Cras laoreet leo et justo auctor condimentum. Integer id enim. Suspendisse egestas, dui ac egestas mollis, libero orci hendrerit lacus, et malesuada lorem neque ac libero. Morbi tempor pulvinar pede. Donec vel elit.
            </main><!-- .content -->
        </div><!-- .container-->
 
        <aside class="right-sidebar">
            <strong>Right Sidebar:</strong> Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit.
        </aside><!-- .right-sidebar -->
 
    </div><!-- .middle-->
 
</div><!-- .wrapper -->
 
<footer class="footer">
    <strong>Footer:</strong> Mus elit Morbi mus enim lacus at quis Nam eget morbi. Et semper urna urna non at cursus dolor vestibulum neque enim. Tellus interdum at laoreet laoreet lacinia lacinia sed Quisque justo quis. Hendrerit scelerisque lorem elit orci tempor tincidunt enim Phasellus dignissim tincidunt. Nunc vel et Sed nisl Vestibulum odio montes Aliquam volutpat pellentesque. Ut pede sagittis et quis nunc gravida porttitor ligula.
</footer><!-- .footer -->
 
</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
/* Eric Meyer's CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* End of Eric Meyer's CSS Reset */
 
html {
    height: 100%;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display: block;
}
body {
    font: 12px/18px Arial, sans-serif;
    width: 100%;
    height: 100%;
    background-color:#ffcc66;
}
.wrapper {
    width: 913px;
    margin: 0 auto;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    background-color:#FFFFFF;
}
 
 
/* Header
-----------------------------------------------------------------------------*/
.header {
    height: 126px;
    width:913px;
    background-image:url(img/bg_header.gif);
    background-repeat:no-repeat;
}
 
 
/* Middle
-----------------------------------------------------------------------------*/
.middle {
    width: 100%;
    padding: 0 0 100px;
    position: relative;
}
.middle:after {
    display: table;
    clear: both;
    content: '';
}
.container {
    width: 100%;
    float: left;
    overflow: hidden;
}
.content {
    padding: 0 270px 0 0;
}
 
 
/* Right Sidebar
-----------------------------------------------------------------------------*/
.right-sidebar {
    float: left;
    width: 250px;
    margin-left: -250px;
    position: relative;
    background: #FFACAA;
}
 
 
/* Footer
-----------------------------------------------------------------------------*/
.footer {
    width: 913px;
    margin: -100px auto 0;
    height: 100px;
    background: #BFF08E;
    position: relative;
}
 
 
 
 
/* --------------------  moi pravki ----------------------------------------*/
#logo{
width:290px;
height:104px;
}
 
#logo img{
width:290px;
height:104px;
}

@shvyrevvg · 04.02.2019, 06:02

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

Когда переношу файл стилей во внутреннюю папку - background-image ИСЧЕЗАЕТ из видимости!!!

ARGR, после переноса изменится путь к изображению.

CSS
1
background-image: url("../img/bg_header.gif");

Почитайте про относительные и абсолютные пути.

@ARGR · 04.02.2019, 06:18 **[ТС]**

Стили вообще ПРОПАЛИ!

@shvyrevvg · 04.02.2019, 06:35

ARGR, очевидно, у Вас путаница с путями. Проверьте чтобы путь к css был правильным. Можете скинуть архив(zip).

@LFC · 04.02.2019, 11:43

Не по теме:

shvyrevvg, Привет!Ты личку закрыл?

@ARGR · 04.02.2019, 16:30 **[ТС]**

Ссылка на АРХИВ на ГуглДиске.

@Academik · 04.02.2019, 16:35

ARGR, путь к стилям в index.html поправьте:

HTML5
1
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />

Добавлено через 1 минуту
а в css путь к изображениям:

CSS
1
2
3
.header {
    background-image:url(../img/bg_header.gif);
}

@ARGR · 04.02.2019, 17:11 **[ТС]**

Огромное Вам СПАСИБО!
Все ПОЛУЧИЛОСЬ!!! :0)

Новые блоги и статьи Все статьи Все блоги /
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, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .

@ARGR 5 / 5 / 1 Регистрация: 19.05.2013 Сообщений: 452
	04.02.2019, 06:18 [ТС]
	Стили вообще ПРОПАЛИ! Миниатюры 0

@shvyrevvg 1786 / 1036 / 445 Регистрация: 12.05.2016 Сообщений: 2,550
	04.02.2019, 06:35
	ARGR, очевидно, у Вас путаница с путями. Проверьте чтобы путь к css был правильным. Можете скинуть архив(zip). 0

@LFC
	04.02.2019, 11:43
	Не по теме: shvyrevvg, Привет!Ты личку закрыл? 0

@ARGR 5 / 5 / 1 Регистрация: 19.05.2013 Сообщений: 452
	04.02.2019, 16:30 [ТС]
	Ссылка на АРХИВ на ГуглДиске. 0

@ARGR 5 / 5 / 1 Регистрация: 19.05.2013 Сообщений: 452
	04.02.2019, 17:11 [ТС]
	Огромное Вам СПАСИБО! Все ПОЛУЧИЛОСЬ!!! :0) 0

Глюк с background-image

Решение