Как вставить изображение? Как сделать изображение фоном?

Скачать материалы:

Скачать 9-ый видеоурок по HTML Размер: 11.36 MB, скачали: 498 раз.
Скачать исходники к 9 видеоуроку по HTML Размер: 29.29 kB, скачали: 520 раз.

Как запустить видеоурок:

Разархивировать скачанный файл.
Открыть папку index.
Запустить файл index.html в браузере.

В прошлом видеоуроке, Вы узнали, что такое списки и линии. А в этом мы рассмотрим изображения: их форматирование и атрибуты.

Как вставить изображение в HTML?

Перейдем в папку нашего сайта. Я для вас подготовил изображение info-line.png. Сначала создадим папку с именем img. Открываем ее, и переносим туда наше изображение. Картинка имеет формат png. Это можно увидеть либо внизу, либо при наведении курсора, либо в свойствах.

Перейдем в код. Давайте вставим изображение в текст. Делается это с помощью тега <img>. В кавычках указывается путь до изображения. В нашем случае: img/info-line.png. Хочу отметить, что вводить путь нужно в соответствии с регистром, то есть, если у вас изображение прописано с большой буквы «I», то так его нужно и вводить, иначе могут возникнуть неполадки.

`1`	`<img` `src="img/info-line.png">`

Если изображение находится на каком-либо другом сервере, то вводится оно следующим образом: http://доменное_имя_сайта/ папка_с_изображением/изображение. Например, можно прописать:

`1`	`<img` `src="http://info-line.net/img/info-line.png">`

Вернем все, как было. Давайте сохраним и посмотрим нашу страницу в браузере. Обновляем. Наше изображение вставлено.

Атрибуты тега <img>

Давайте теперь разберем атрибуты, которые относятся к тегу <img>. Начнем с атрибута align. Знакомый нам атрибут. Поставим значение left. Здесь align может принимать также значения top (вверху), bottom (внизу) и middle (по центру). Но мы оставим left. Атрибут align означает здесь не только то, что наше изображение будет прибито гвоздями к левой части экрана, но и то, что текст, который обтекает данное изображение, будет обтекать его с правой стороны.

`1`	`<img` `src="img/info-line.png"` `align="left">`

Далее идет атрибут alt, который задает альтернативный текст для изображения. То есть, если наше изображение не будет загружено, или у пользователя в браузере будет отключен показ изображений, то вместо изображения будет появляться указанный в этом атрибуте текст. Введем, например “info-line”.

`1`	`<img` `src="img/info-line.png"` `align="left"` `alt="Info-line">`

Наше изображение было слишком большое. Давайте сделаем его меньше с помощью атрибутов width и height (ширина и высота). Например, по 150 пикселей.

`1`	`<img` `src="img/info-line.png"` `align="left"` `alt="Info-line"` `width="150"` `height="150"` `>`

Зададим рамку с помощью атрибута border, например 2 пикселя.

`1`	`<img` `src="img/info-line.png"` `align="left"` `alt="Info-line"` `width="150"` `height="150"` `border="2"` `>`

Сохраняем страничку и проверяем. На нашей странице с левого края появилась картинка размерами 150×150 пикселей с рамкой в 2 пикселя. Единственное, что нам здесь не нравится (во всяком случае, мне) – это то, что наше изображение так плохо обтекает текст, что нам это заметно.

Давайте сделаем отступ от изображения по горизонтали. Перейдем в код и добавим еще несколько атрибутов: hspase (горизонтальный отступ изображения от другого контента) и vspace (вертикальный отступ). Укажем, например, hspace – 2 пикселя, а vspace – 5 пикселей.

`1`	`<img` `src="img/info-line.png"` `align="left"` `alt="Info-line"` `width="150"` `height="150"` `border="2"` `hspace="2"` `vspace="5">`

Сохраним, проверим в браузере. Обновляем страницу – отступ удался.

Давайте теперь сделаем так, чтобы после слова «нужно» обтекание текстом нашего изображения завершалось. Переходим в код, находим слово «нужно» с помощью комбинации клавиш «Ctrl+F». Видим тег переноса. Этот тег имеет атрибут clear, который непосредственно относится к тексту. Атрибут имеет три значения: all, left и right. Что они означают? Они завершают обтекание текста. Но значения left и right применяются тогда, когда в атрибуте align заданы значения left или right. Таким образом, у нас задано значение атрибута align – left, и мы применяем left к атрибуту clear. Наш текст будет отображен слева.

`1`	`<br` `clear="left">Это был именно тот момент в жизни, когда что-то внутри перещелкнуло и я стал идти по пути успеха.`

Давайте сохраним и обновим нашу страничку в браузере. Мы видим, что наш текст, который ранее отображался справа от изображения, теперь отображается снизу. Это выглядит красивее.

Как сделать изображение фоном?

Перейдем в код и поговорим о том, как задать фон странички с помощью изображений (ведь вы уже знаете, как задать фон обычными цветами?).

Ищем тег. Прописываем атрибут background. В кавычках указываем путь до изображения. Давайте перейдем на рабочий стол. Я подготовил еще одно изображение для этого видеоурока. Называется оно bg.png. Его также нужно перенести в папку img. Оно имеет такое же расширение – png.

`1`	`<body` `text="#660000"` `bgcolor="#FFFCC"` `background="img/bg.png">`

Давайте сохраним и проверим в браузере. Обновляем страницу. Как видим, фон у нас задан.

Что ж, на этом мы заканчиваем этот видеоурок. Попрактикуйтесь с изображениями. До встречи в следующем видеоуроке, в котором вы узнаете, что такое ссылки в HTML.

Подпишись на info-line:

Получать новые уроки на e-mail:

← Списки и линии в HTML

Что такое ссылка? Как создать ссылку в HTML? →

11 комментариев на “Как вставить изображение? Как сделать изображение фоном?”

Александр 17 апреля 2012 в 19:29 #

Неполучается вставить разные изображения, первое появляется, а второе просто как картинка «изображение», bottom, middle и top тоже не работают.

01<!DOCTYPE HTML PUBLIC>
02<html>
03<head>
04<title>Сайт</title>
05<meta http-equiv="content-language" content="ru">
06<meta http-equiv="content-tipe" content="text/html" charset="windows-1251">
07<meta name="keywords" content="Сайт, про, спорт">
08<meta name="destrictions" content="Сайт про разные виды спорта">
09</head>
10<body text="#110000" bgcolor="#FFCC99">
11<h1 align="center"><font size="10" color="#0099CC" face="monotype corsiva">Добро пожаловать на мой сайт!</font></h1>
12<p align="center"><font size="5">Текст</font></p>
13<h2 align="center"><font size="7" face="monotype corsiva">Альпинизм, спорт или отдых?</h2></font>
14<img align="left" src="img/img1.png" alt="img1" width=150" height="150"><br>Альпинизм — вид спорта и активного отдыха. Спортивная сущность альпинизма состоит в преодолении препятствий, создаваемых природой (высота, рельеф, погода), на пути к вершине. В спортивных соревнованиях по альпинизму объектом состязания являются высота вершины, техническая сложность пройденного маршрута, его характер и протяжённость.
15<br>Зародившись в <b>Альпах</b>, альпинизм именно здесь впервые стал развиваться как <b><i>вид спорта.</i></b> Чисто спортивные восхождения на вершины начали совершаться в Альпах ещё в начале XIX в. Особенно широкий размах развитие спортивного альпинизма получило в XX веке.
16<br>К началу XX века все вершины Альп были покорены, и восходители стали искать новые, более сложные маршруты восхождений. Чем сложнее был маршрут, тем более спортивным считалось восхождение. Так постепенно появился, вырос и утвердился «стенной» альпинизм, то есть прохождение маршрутов по отвесным стенам гор.
17<br>Сильнейшими альпинистами в этой области были представители альпийских государств: итальянцы, немцы, австрийцы, французы, а также англичане. Во второй половине ХХ века были пройдены такие стены в Альпах, которые до этого долгое время считались абсолютно неприступными. Это свидетельствовало о том, что спортивный класс альпинистов, безусловно, вырос. Большое значение для роста спортивного мастерства сыграло общее развитие снаряжения и техники преодоления скальных и ледовых участков. Появились более легкие и прочные верёвки из синтетических волокон, облегченные кошки, ледорубы, шлямбуры и закладки, дюралевые лесенки, усовершенствованные кухни, новые продукты, лёгкая, тёплая одежда и обувь — все это, существенно повлияло на качественный рост альпинизма.</br>
18<br>
19<hr>
20<img align="left" src="img/img1.png" alt="img1" width="150" height="150" border="1">
21<img align="right" src="img/QWE.png" width="150" height="150" border="1">

Ответить

Олег Зубцов 17 апреля 2012 в 20:48 #

Значения bottom, middle и top не работают, потому что для них используется атрибут valign, а не align. И если мне не изменяет память, то они работают только в таблицах. Но возможна память мне изменяет
На счет изображений — скорее всего проблема в том, что 2-ое изображение у вас не находится в той папке, которую вы указали или называется по другому, или имеет другое расширение. Проверьте это!
P.S. Чтобы вставлять в комментариях код правильно, не забывайте в атрибут lang="" значение языка, например html или css.

Ответить

Александр 18 апреля 2012 в 21:20 #

Спасибо, помогло =)

Ответить
Илья 23 июля 2012 в 9:26 #

Олег, у меня почему-то не вставляется изображение. эксплоуер и опера пишут изображение, но саму картинку не отображают, почему?

Ответить
- Олег Зубцов 29 октября 2012 в 8:34 #
  
  Проверь путь к изображению и сверь указанный формат изображения с настоящим.
  
  Ответить

Константин 14 января 2013 в 20:23 #

Олег, если я тебе сайт с HTML кодом скину, сможешь показать где там меняется фон: в голове и теле (как ты говорил:) )?

Все просмотрел не могу найти. Спасибо

www.everestprof.ru

Ответить

Олег Зубцов 20 января 2013 в 14:38 #

Вот твой HTML-код:

001<html><head>
002                <title>Пиротехника, салюты, фейерверки</title>
003        <meta name="keywords" content="Пиротехника, салюты, фейерверки">
004                <meta name="description" content="Пиротехника, салюты, фейерверки">
005        <link rel="stylesheet" href="/assets/1/2127/75855/v_1358424797/style.css">
006                <link rel="stylesheet" href="/assets/1/2127/75855/v_1358424797/custom.css">
007        <link rel="stylesheet" href="/assets/1/2127/75855/v_1358424797/wysiwyg.css">
008 
009        <!--[if lt IE 7]><link href="/assets/1/2127/75855/v_1358424797/ie6-style.css" rel="stylesheet"><![endif]-->
010 
011        <script src="http://google.com/jsapi"></script><style type="text/css"></style>
012        <script>google.load("jquery","1.4.2");</script><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
013        <script src="/javascripts/shop/insales-api.js?1352793590"></script>
014        <script>
015Insales.money = '{{amount_with_comma_separator}} руб';
016Insales.addToCartUrl = (function(){var Splited = "/cart_items".split("?");Splited[0] += ".json";return Splited.join("?")})()</script>
017        <script>          $(function(){if(($.browser.opera&&$.browser.version<10.50)||$.browser.msie)$("body").addClass( "bad-browser");})
018        </script>
019 
020        <script src="/javascripts/shop/theme_common.js?1343231090"></script>
021        <script src="/assets/1/2127/75855/v_1358424797/theme.js"></script>
022        <script type="text/javascript" src="/javascripts/shadowbox/adapter/shadowbox-jquery.js?1343231090"></script>
023        <script type="text/javascript" src="/javascripts/shadowbox/shadowbox.js?1343231090"></script>
024        <script type="text/javascript">
025            Shadowbox.loadSkin('classic', '/javascripts/shadowbox/skin');
026            Shadowbox.loadLanguage('ru', '/javascripts/shadowbox/lang');
027            Shadowbox.loadPlayer(['img'], '/javascripts/shadowbox/player');
028            window.onload = Shadowbox.init;
029        </script><link rel="stylesheet" type="text/css" href="/javascripts/shadowbox/skin/classic/skin.css"><script type="text/javascript" src="/javascripts/shadowbox/skin/classic/skin.js"></script><script type="text/javascript" src="/javascripts/shadowbox/lang/shadowbox-ru.js"></script><script type="text/javascript" src="/javascripts/shadowbox/player/shadowbox-img.js"></script>
030    <meta name="chromesniffer" id="chromesniffer_meta" content="{&quot;jQuery&quot;:&quot;1.4.2&quot;,&quot;Google Loader&quot;:-1}"><script type="text/javascript" src="chrome-extension://homgcnaoacgigpkkljjjekpignblkeae/detector.js"></script><script id="objHTMLFormElementPrototype">try{   document.objHTMLFormElementPrototype = new Object();   document.objHTMLFormElementPrototype.submit = HTMLFormElement.prototype.submit;   HTMLFormElement.prototype.submit = function(AEvent)   {      var kpmEvent = document.createEvent('Event');      kpmEvent.initEvent('kpm_submit', true, true);      this.dispatchEvent(kpmEvent);      document.objHTMLFormElementPrototype.submit.apply(this);   };}catch(e){  alert('Error during attach to HTMLFormElement.prototype.submit: ' + ErrorMessage);}</script></head><div style="display: none;" id="LZ1TFwfH2A0rAd5eSLk8phjOM8" class="HF_Dct1liQWwXnvYv"></div><div style="display: none;" id="mPpcbwpLiUcD56UC0JHlUTMwMl" class="HF_Dct1liQWwXnvYv"></div><div style="display: none;" id="vZRAc54O9GldP6VL" class="HF_Dct1liQWwXnvYv"></div>
031 
032    <body kpmisdocumentcomplete="666" kpmsourceindexset="666">
033 
034        <div class="insales-wrapper">
035            <div class="insales-header">
036 
037                <ul class="navigation">
038                     
039                    <li><a href="/" class="d-link active" data-dlink="done"><span class="d-shadow">О компании</span><span class="d-text">О компании</span></a></li>
040                     
041                    <li><a href="/page/доставка" class="d-link" data-dlink="done"><span class="d-shadow">Условия доставки</span><span class="d-text">Условия доставки</span></a></li>
042                     
043                    <li><a href="/page/feedback" class="d-link" data-dlink="done"><span class="d-shadow">Обратная связь</span><span class="d-text">Обратная связь</span></a></li>
044                     
045                    <li><a href="/page/kontakty" class="d-link" data-dlink="done"><span class="d-shadow">Контакты</span><span class="d-text">Контакты</span></a></li>
046                     
047                    <li><a href="/cart_items" class="d-link" data-dlink="done"><span class="d-shadow">Корзина</span><span class="d-text">Корзина</span></a></li>
048                     
049                </ul>
050 
051                <form class="searchform" action="/search" sourceindex="0">
052                    <input class="query" type="text" name="q" value="" sourceindex="1">
053                    <input class="submit" type="submit" value="" sourceindex="2">
054                </form>
055 
056            </div>
057 
058            <table class="insales-body">
059                <tbody><tr>
060                <td class="insales-sidebar">
061                    <div class="shop-ph">(495) 762-45-37</div>
062                    <h2 class="shop-name">
063                         
064                         
065                            <a href="/" class="d-link" data-dlink="done"><span class="d-shadow">Пиротехника, салюты, фейерверки</span><span class="d-text">Пиротехника, салюты, фейерверки</span></a>
066                         
067                         
068                    </h2>
069                    <p class="shop-slogan"></p>
070 
071                    <div class="cart">
072                        <div class="cart-header">
073                                <a href="/cart_items" class="d-link" data-dlink="done"><span class="d-shadow">Корзина</span><span class="d-text">Корзина</span></a>
074                                <div class="cart-loading">Подождите...</div>
075                        </div>
076 
077                        <div class="cart-body">
078                                <div class="bill">
079                                        <span class="products">Товаров: <span class="count">3</span></span>
080                                        <span class="sum-container">780 руб</span>
081                                </div>
082                        </div>
083                         
084                        <div class="buttons-container">
085                                <a href="/cart_items" class="d-link gr-button" data-dlink="done"><span class="d-shadow">Оформить заказ</span><span class="d-text">Оформить заказ</span></a>
086                        </div>
087                         
088                    </div>
089 
090                     
091                    <p class="block-headline"><a class="d-link" href="/collection/batarei-salyutov" data-dlink="done"><span class="d-shadow">Батареи салютов</span><span class="d-text">Батареи салютов</span></a></p>
092                     
093                    <ul class="block-body">
094                         
095                        <li><a href="/collection/kategoriya-2">0,8"</a>
096                             
097                        </li>
098                         
099                        <li><a href="/collection/kategoriya-1">1,00"</a>
100                             
101                        </li>
102                         
103                        <li><a href="/collection/kategoriya-2-2">1,25"</a>
104                             
105                        </li>
106                         
107                    </ul>
108                     
109                     
110                    <p class="block-headline"><a class="d-link" href="/collection/feyerverki" data-dlink="done"><span class="d-shadow">Фейерверки</span><span class="d-text">Фейерверки</span></a></p>
111                     
112                    <ul class="block-body">
113                         
114                        <li><a href="/collection/kategoriya-3">Летающий</a>
115                             
116                        </li>
117                         
118                        <li><a href="/collection/kategoriya-1-2">Наземный</a>
119                             
120                        </li>
121                         
122                    </ul>
123                     
124                     
125                    <p class="block-headline"><a class="d-link" href="/collection/odinochnye-salyuty" data-dlink="done"><span class="d-shadow">Одиночные салюты</span><span class="d-text">Одиночные салюты</span></a></p>
126                     
127                     
128                    <p class="block-headline"><a class="d-link" href="/collection/kategoriya" data-dlink="done"><span class="d-shadow">Петарды</span><span class="d-text">Петарды</span></a></p>
129                     
130                     
131                    <p class="block-headline"><a class="d-link" href="/collection/rakety" data-dlink="done"><span class="d-shadow">Ракеты</span><span class="d-text">Ракеты</span></a></p>
132                     
133                     
134                    <p class="block-headline"><a class="d-link" href="/collection/rimskie-svechi" data-dlink="done"><span class="d-shadow">Римские свечи</span><span class="d-text">Римские свечи</span></a></p>
135                     
136                     
137                    <p class="block-headline"><a class="d-link" href="/collection/fontany" data-dlink="done"><span class="d-shadow">Фонтаны</span><span class="d-text">Фонтаны</span></a></p>
138                     
139                     
140                    <p class="block-headline"><a class="d-link" href="/collection/hlopushki" data-dlink="done"><span class="d-shadow">Хлопушки</span><span class="d-text">Хлопушки</span></a></p>
141                     
142                     
143                </td>
144 
145                <td class="insales-content">
146                    <h1 class="page-title">О компании</h1>
147<div class="wysiwyg-content">
148    <p style="text-align: center;"><span style="color: #993300; font-size: large;"><strong><span style="font-family: verdana, geneva;">Добро пожаловать в интернет-магазин пиротехники, </span></strong></span></p>
149<p style="text-align: center;"><span style="color: #993300; font-size: large;"><strong><span style="font-family: verdana, geneva;">салютов</span><span style="font-family: verdana, geneva;"> и фейерверков!</span></strong></span></p>
150<p style="text-align: center;"><strong><span style="font-size: medium; color: #0000ff;"><span style="font-family: verdana, geneva;">&nbsp;</span></span><span style="color: #0000ff;"><span style="font-family: verdana, geneva;"><span style="color: #000000;">Компания&nbsp;</span><span style="color: #000000;">&nbsp;ООО "Эверест"&nbsp;предлагает Вашему вниманию фейерверки в Москве и Московской области.</span></span></span></strong></p>
151<p style="text-align: center;"><strong><span style="color: #000000;"><span style="font-family: verdana, geneva;">&nbsp; Наша компания занимается продажей широкого ассортимента фейерверк продукции, которое отвечает самым высоким качеством и безопасности изделий. У нас самые доступные цены на пиротехнику.</span></span></strong></p>
152<p style="text-align: center;"><strong><span style="font-family: verdana, geneva;">Мы с радостью принимаем и обслуживаем заказы 7 дней в неделю с 8.00 до 20.00 по московскому времени.&nbsp;</span></strong></p>
153<p style="text-align: center;"><strong><span style="font-family: verdana, geneva;">Сделайте заказ через сайт и мы Вам перезвоним для согласования времени доставки заказа.</span></strong></p>
154<p style="text-align: center;"><img src="http://static2.insales.ru/files/1/8135/409543/original/231.png" width="256" height="256">&nbsp; &nbsp; &nbsp;<img src="http://static2.insales.ru/files/1/8136/409544/original/73.png" width="256" height="256"></p>
155</div>
156<ul class="collection-products">
157     
158</ul>
159                </td>
160                </tr>
161            </tbody></table>
162 
163            <div class="insales-footer floats-container">
164                <div class="left">
165                    © <a class="d-link" href="/" data-dlink="done"><span class="d-shadow">Пиротехника, салюты, фейерверки</span><span class="d-text">Пиротехника, салюты, фейерверки</span></a> 2010. Все права защищены.
166                </div>
167 
168                <div class="right">
169                    <p>(495) 762-45-37</p>
170                     
171                    <p><img src="http://status.icq.com/online.gif?icq=623669499&amp;img=5"> 623669499</p>
172                     
173                </div>
174            </div>
175        </div>
176            <!--InsalesCounter -->
177        <script type="text/javascript">
178        if (typeof(__id) == 'undefined') {
179          var __id=70202;
180          document.write(unescape('%3Cscript type="text/javascript" src="/javascripts/insales_counter.js"%3E%3C/scr' + 'ipt%3E'));
181        }
182        </script><script type="text/javascript" src="/javascripts/insales_counter.js"></script>
183        <!-- /InsalesCounter -->
184 
185 
186 
187<embed id="kpmAutofillPlugin" type="application/x-npkpmautofillplugin" style="visibility: hidden; width: 0; height: 0; position: absolute;"><div id="shadowbox_container"><div id="shadowbox_overlay"></div><div id="shadowbox"><div id="shadowbox_title"><div id="shadowbox_title_inner"></div></div><div id="shadowbox_body"><div id="shadowbox_body_inner"></div><div id="shadowbox_loading"><div id="shadowbox_loading_indicator"></div><span><a onclick="Shadowbox.close();">Отмена</a></span></div></div><div id="shadowbox_info"><div id="shadowbox_info_inner"><div id="shadowbox_counter"></div><div id="shadowbox_nav"><a id="shadowbox_nav_close" title="Закрыть" onclick="Shadowbox.close()"></a><a id="shadowbox_nav_next" title="Следующая" onclick="Shadowbox.next()"></a><a id="shadowbox_nav_play" title="Пуск" onclick="Shadowbox.play()"></a><a id="shadowbox_nav_pause" title="Пауза" onclick="Shadowbox.pause()"></a><a id="shadowbox_nav_previous" title="Предыдущая" onclick="Shadowbox.previous()"></a></div><div class="shadowbox_clear"></div></div></div></div></div></body></html>

Твой тег body:

`1`	`<body></body>`

Твоя обложка (обертка, wrapper):

`1`	`<div` `class="insales-wrapper"></div>`

Твоя шапка:

`1`	`<div` `class="insales-header"></div>`

Твой левый сайдбар:

`1`	`<td` `class="insales-sidebar"></td>`

Твой контент:

`1`	`<td` `class="insales-content"></td>`

Как видишь, все твои области имеют свой класс. Значит все задается в CSS. В этом уроке, я показывал как с помощью html задать все это. Если хочешь — задавай с помощью HTML, но смотри, чтобы не было нестыковок с CSS.

Или, лучше всего, на мой взгляд, просто подредактируй файл CSS.

01body {
02color: #333333;
03background: #F7F7F7;
04font-family: Verdana, Helvetica, Arial, sans-serif;
05background-image: url('/assets/1/2127/75855/v_1358424796/bg.jpg');
06background-position: top right;
07background-repeat: repeat-x;
08background-attachment: scroll;
09}
10.insales-wrapper {
11width: 960px;
12margin: 0 auto;
13}
14.insales-header {
15position: relative;
16height: 75px;
17}
18.insales-sidebar {
19background: #A6D6E0 url('/assets/1/2127/75855/v_1358424796/sidebar.svg.png') repeat-x;
20border-right: 1px solid #1009E3;
21}
22.insales-content {
23background: #89D1E0;
24}

Как видишь, в обертке и в шапке, фон не задается. Он задан у тебя в теге body. Сайдбар и контент тоже имеют свой фон

Мой совет: редактируй CSS.

Ответить

Олег Зубцов 14 января 2013 в 21:08 #

Кидай, только в тегах code, чтобы он отобразился
Я в этом уроке это говорил?)) Или в каком-то другом?)
Итак, чтобы ты не скидывал лишний раз, попытаюсь ответить на твой вопрос сразу
Как прописать фоновое изображение ячейке таблицы?
Способ 1: с помощью свойства background (рекомендуется не использовать)
просмотреть источник
распечатать ?
1 <table>
2 <tr>
3 <td background="URL картинки"></td>
4 </tr>
5 </table>

Способ 2: с помощью таблиц стилей (CSS)
просмотреть источник
распечатать ?
1 <table>
2 <tr>
3 <td style="background-image: url(image.jpg);"></td>
4 </tr>
5 </table>

Ответить
Серикбол 18 января 2013 в 14:25 #

После того как вставил изображение, при его открытии выходит , «проверьте правильность введённого имени файла, соответствие регистра и отсутствие других ошибок в имени файла.Проверьте, не был ли файл переименован, удалён или перемещён.» Т.е я вставил имеющиеся в данный мом.изображение в формате JPEG , а изображеие в формате «png» при скачивании не сохраняется, сохраняется только в word

Ответить
- Олег Зубцов 20 января 2013 в 1:52 #
  
  В смысле «при скачивании не сохраняются, сохраняется только в word»?
  Это как? И в чем, собственно вопрос, если он тут есть?)
  На счет вставки изображений: должно вставляться и jpeg и png. Главное, чтобы расширение изображения совпадало с указанным в коде. Т.е. если изображение имеет расширение jpg, то и в коде должно быть jpg, а не jpeg.
  На счет непонятных скачиваний и т.п. — обычно дело в браузере.
  Ребята, проверяйте сайт в разных браузерах, при возникновении каких-либо неполадок.
  
  Ответить
Мари 22 августа 2013 в 3:45 #

Спасибо!!!!!!! наконец то нашла то что заработало!

Ответить

Как вставить изображение? Как сделать изображение фоном?

Как вставить изображение в HTML?

Атрибуты тега <img>

Как сделать изображение фоном?

Похожее видео

Подпишись на info-line:

11 комментариев на “Как вставить изображение? Как сделать изображение фоном?”

Оставить ответ на Серикбол