Вставка картинки в div

@JohnLemon · Регистрация: 14.02.2011

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

Подскажите плз есть страница

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
    <title>
        JLUpload
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <link href="main.css" rel="stylesheet" type="text/css">
    <body>
        <div id ="box">
            <div id ="image">
                Привет
            </div>
            <div>
                <input type='file' multiple='multiple' />
            </div>
        </div>
    </body>
</head>

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
* {
    margin:0;
    padding:0;
}
 
body {
    background:url(image/logo.png) no-repeat top, left;
}
 
body:before {
      content: "";
      position: fixed;
      top: -10px;
      left: 0;
      width: 100%;
      height: 10px;
      z-index: 99;
      -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
      -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
      box-shadow: 0px 0px 10px rgba(0,0,0,.8);            
}
 
#box {
 position: relative;
 width: 600px;
 background: #ddd;
 -moz-border-radius: 4px;
 border-radius: 4px;
 padding: 2em 1.5em;
 color: rgba(0,0,0, .8);
 text-shadow: 0 1px 0 #fff;
 line-height: 1.5;
 margin: 60px auto;
}
 
#box:before, #box:after {
 z-index: -1;
 position: absolute;
 content: "";
 bottom: 15px;
 left: 10px;
 width: 50%;
 top: 80%;
 max-width:300px;
 background: rgba(0, 0, 0, 0.7);
 -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);
 -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
 box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
 -webkit-transform: rotate(-3deg);
 -moz-transform: rotate(-3deg);
 -o-transform: rotate(-3deg);
 -ms-transform: rotate(-3deg);
 transform: rotate(-3deg);
}
 
#box:after {
 -webkit-transform: rotate(3deg);
 -moz-transform: rotate(3deg);
 -o-transform: rotate(3deg);
 -ms-transform: rotate(3deg);
 transform: rotate(3deg);
 right: 10px;
 left: auto;
}
 
#image {
    height:29px;
    width:109px;
    background:url(image/logo.png) no-repeat top, left;
    display: block;
}

При добавлении div-а "image" не видно фоновой картинки как будто ее что то перекрывает можете подсказать что, сам только учусь, код стырил )
Получается что то в роде этого

@Jallik Lich · 15.10.2012, 10:21

Картинку перекрывает фоновый цвет #box

CSS
1
2
3
body {
    background:url(image/logo.png) no-repeat top, left;
}

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
#box {
 position: relative;
 width: 600px;
 background-color: #ddd;
 background-image:url(image/logo.png) no-repeat top, left;
 -moz-border-radius: 4px;
 border-radius: 4px;
 padding: 2em 1.5em;
 color: rgba(0,0,0, .8);
 text-shadow: 0 1px 0 #fff;
 line-height: 1.5;
 margin: 60px auto;
}

@JohnLemon · 15.10.2012, 12:33 **[ТС]**

хм, не нету картинку, в body прост забыл удалить, нужна та которая идет в теге div id = "image"

CSS
1
2
3
4
5
6
#image {
    height:29px;
    width:109px;
    background:url(image/logo.png) no-repeat top, left;
    display: block;
}

HTML5
1
2
3
4
5
<div id ="box">
            <div id ="image">
                Привет
            </div>
            <div>

Добавлено через 5 минут
и по возможности подскажите что сделать что бы она отобразилась фсе таки ) ?

@Jallik Lich · 16.10.2012, 22:11

Что делать, если не отображается фоновая картинка?

1) Проверьте правильность указания пути. При этом не забывайте, что путь необходимо указывать от файла стилей... Проверить можно открыв в браузере раздел информации о странице и посмотреть все загруженные изображения в разделе "Медиа"

2) Если Вы уверены, что путь указан верно и картинка загружена, проверьте рамки самого элемента на странице... может быть что div, фон которого эта картинка, имеет размер в 1 пиксель... Для этого я использую браузер FireFox с плагином FireBug

3) Если же и картинка загружена, и размер блока нормальный - значит загвоздка в чем-то посерьезнее... Не хочу пока об этом, посмотрите первые два пункта

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

@Jallik Lich Исследователь 196 / 175 / 13 Регистрация: 30.10.2011 Сообщений: 605 Записей в блоге: 7
	16.10.2012, 22:11
	Что делать, если не отображается фоновая картинка? 1) Проверьте правильность указания пути. При этом не забывайте, что путь необходимо указывать от файла стилей... Проверить можно открыв в браузере раздел информации о странице и посмотреть все загруженные изображения в разделе "Медиа" 2) Если Вы уверены, что путь указан верно и картинка загружена, проверьте рамки самого элемента на странице... может быть что div, фон которого эта картинка, имеет размер в 1 пиксель... Для этого я использую браузер FireFox с плагином FireBug 3) Если же и картинка загружена, и размер блока нормальный - значит загвоздка в чем-то посерьезнее... Не хочу пока об этом, посмотрите первые два пункта 1