Не могу сделать изображение фоном сайта!

@SeRJiK B · Регистрация: 03.01.2014

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

Ребята, извиняюсь заранее если не туда пишу, я очень большой нуб в этих делах, только сегодня решил разобраться как же все таки создавать сайты. Занимаюсь продажей автозапчастей и поэтому сайт мне просто необходим. Почитал уроки, вроде все понятно, решил попробовать. Но как только решил сделать из картинки фон сайта возникли трудности.

Создал текстовый документ (блокнот).

Вот с этого сайта: http://ab-w.net/HTML/html_background.php скопировал вот это:

HTML5
1
2
3
4
5
6
7
8
<html>
<head>
<title>Картинка - фон в HTML</title>
</head>
<body style="background-image:url(../images/primer-img.jpg)">
<p>Какой-то произвольный текст.</p>
</body>
</html>

и вставил в свой блокнот.

Затем в блокноте выбрал "Сохранить как" и сохранил на диск С в заранее созданной папке, назвав документ index.html

Потом в браузере Opera нажал Ctrl+O, открыл созданный документ и кроме фразы "Какой-то произвольный текст" там ничего не было!

Попробовал вставить свою картинку, заменив в строчке: <body style="background-image:url(../images/primer-img.jpg)">
на <body style="background-image:url(c15ad2c79ae9.png)"> , т.к. рисунок у меня находится в той же папке что и документ и снова кроме фразы ничего не было(((

Ребята, что не так делаю подскажите!!!

@Миушник · 03.01.2014, 16:14

Предложу тебе
во-1 создать папку images и туда вставить свою картинку.
во-2 можно было бы и поменять название картинки на более простое, например, 1.png
в-3 обращайте на расширение картинки

в связи с этим вышло бы

HTML5
1
<body style="background-image:url(../images/1.png)">

@xxbesoxx · 03.01.2014, 17:09

Оформление внешнего вида делаем с помощью CSS вот пример

fanatdebian · 03.01.2014, 17:20

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style>
    .somebgpic {
        background-image:url(avatar1.png);
    }
    .block {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        padding: 5px;
    }
</style>
<body>
<div class="somebgpic block">sdsdfsdf</div>
<div class="somebgpic block">sdsdfsdf</div>
</body>
</html>

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

@SeRJiK B · 06.01.2014, 08:56 **[ТС]**

Сообщение от Миушник

Предложу тебе
во-1 создать папку images и туда вставить свою картинку.
>
[/HTML]

папку images где сохранить?

@miketomlin · 06.01.2014, 10:41

В корневой папке сайта. А вообще фоновая картинка - это, так сказать, элемент интерфейса, поэтому лучше ее не хранить в папке images и прописывать на нее ссылку в файле стилей относительно самого файла стилей (можно использовать краткое имя файла, если картинка хранится в одной папке с файлом стилей).

Может, будет проще заказать сайт профессионалам? Или хотя бы возьмите готовый HTML-шаблон и вносите в него изменения, или используйте какую-нибудь CMS с предназначенным специально для нее шаблоном.

@SeRJiK B · 06.01.2014, 11:05 **[ТС]**

Все делаю как говорите, сохраняю рисунок в корневой папке, там же находится и файл в котором путь прописываю, но все равно не открывается изображение!

@bb_oo · 06.01.2014, 13:12

Создаешь в корне папку /img После кидаешь фон, назови его наприме bg.png , после в css пиши

CSS
1
2
3
4
5
body {
 
      background: url('../img/bg.png');
 
}

@monochromer · 06.01.2014, 14:41

example.7z

@SeRJiK B · 07.01.2014, 08:35 **[ТС]**

Вставляю вот это:

HTML5
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>HTML изображение</title>
</head>
<body style="color:#ffffff; background-color:#0000aa"> 
<img src="2.jpg" alt="2" hspace="50" vspace="40" />
<p>Автор изображения неопределен.</p>
</body>
</html>

Получается просто текст без изображения!

@bb_oo · 07.01.2014, 11:56

Попробуйте там, где указываете путь дописать перед 2.jpg "../" Без кавычек

@Миушник · 26.01.2014, 12:31

Сообщение от SeRJiK B

Получается просто текст без изображения!

Ну так изображение вы вставляете ведь тегом <img>, а не через CSS
Как насчет такого варианта

HTML5
1
2
<body style="color:#ffffff; background: url(../images/2.jpg);"> 
<p>Автор изображения неопределен.</p>

папка images находится в том же месте где и файл index.html ваш.

@Елена Едыгарова · 26.01.2014, 12:42

HTML5
1
url(./images/2.jpg)

Если папка images находится в том же каталоге, что и файл.html - то нужна одна точка.
Насколько, я знаю. Две точки означают родительский каталог, одна - текущий... Может ошибаюсь.

@Миушник · 26.01.2014, 12:51

Сообщение от Елена Едыгарова

Если папка images находится в том же каталоге, что и файл.html - то нужна одна точка.

Не суть вопроса. Оно будет работать.

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

Добавлено через 7 минут
А можно вообще сделать вот так. Как я делал у себя в целях "поиграться"
В твоем html файле прописываем id

HTML5
1
<body id="index">

А потом в твоем файле CSS прописываем стиль для этой id
у меня папка bg находится корневой папке сайта и в ней лежит файл bluehouse.jpg

CSS
1
2
3
4
5
#index
{
background: url(../bg/bluehouse.jpg);
background-size: cover;
}

Если нету файла CSS у тебя, то его можно создать и подключить
Создание: в папке с сайтом создаешь папку с именем css и в неё помещаешь например файл с именем style.css
Потом в файл добавляешь, то что написано выше.
Подключение файла происходит в <head>

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

И все обязано работать

@Елена Едыгарова · 26.01.2014, 14:06

Сообщение от Миушник

Оно будет работать.

Сообщение от Миушник

папка images находится в том же месте где и файл index.html ваш.

Сообщение от Миушник

url(../images/2.jpg)

Суть/не суть. HTML - это детали. Вы уверены, что будет работать? Только недавно столкнулась - не работает. Сокращения относительной адресации прописаны в стандарте.

Относительную адресацию используют для указания адреса ресурса в пределах одного и того же сайта, логического диска. При этом используются следующие обозначения:
"/" - обозначает корневой каталог web-узла или диска
"./" - обозначает текущий каталог
"../" - обозначает родительский каталог
"имя/" - обозначает каталог, дочерний по отношению к текущему

@MGchannel · 27.01.2014, 20:07

СКОПИРУЙ КАРТИНКУ К САМОМУ САЙТУ (без папок)

HTML5
1
 background: url("bg.png");

@regnised · 28.01.2014, 11:53

Сообщение от SeRJiK B

Вставляю вот это:

HTML5
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>HTML изображение</title>
</head>
<body style="color:#ffffff; background-color:#0000aa"> 
<img src="2.jpg" alt="2" hspace="50" vspace="40" />
<p>Автор изображения неопределен.</p>
</body>
</html>

Получается просто текст без изображения!

Ты слышал про CSS? Это файл который подключается к страничке и используется для оформления ее.
так вот в CSS и надо добавить background-image

@MGchannel · 28.01.2014, 19:18

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

Ты слышал про CSS? Это файл который подключается к страничке и используется для оформления ее.
так вот в CSS и надо добавить background-image

Да кстати но можно и в самом HTML

Новые блоги и статьи Все статьи Все блоги /
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 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
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 была полностью переписана на Си, в. . .

@miketomlin 930 / 846 / 190 Регистрация: 28.11.2013 Сообщений: 3,621
	06.01.2014, 10:41
	В корневой папке сайта. А вообще фоновая картинка - это, так сказать, элемент интерфейса, поэтому лучше ее не хранить в папке images и прописывать на нее ссылку в файле стилей относительно самого файла стилей (можно использовать краткое имя файла, если картинка хранится в одной папке с файлом стилей). Может, будет проще заказать сайт профессионалам? Или хотя бы возьмите готовый HTML-шаблон и вносите в него изменения, или используйте какую-нибудь CMS с предназначенным специально для нее шаблоном. 0

@SeRJiK B 0 / 0 / 0 Регистрация: 03.01.2014 Сообщений: 4
	06.01.2014, 11:05 [ТС]
	Все делаю как говорите, сохраняю рисунок в корневой папке, там же находится и файл в котором путь прописываю, но все равно не открывается изображение! 0

@monochromer 419 / 381 / 163 Регистрация: 03.01.2013 Сообщений: 966
	06.01.2014, 14:41
	example.7z 1

@bb_oo 15 / 15 / 9 Регистрация: 22.11.2013 Сообщений: 762
	07.01.2014, 11:56
	Попробуйте там, где указываете путь дописать перед 2.jpg "../" Без кавычек 0