Как задать фон картинкой, внутри блока через стили?

@Zeos · Регистрация: 05.06.2014

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

Доброго времени всем. Сразу предупрежу, я новичок в плане верстки. Поэтому не удивляйтесь если напишу что-то не так. Собственно лучший способ получить практику после прочитанной литературы это верстать самому по найденным в интернете макетам.
А теперь к делу:
Щас картинки заданны так:

HTML5

1	<a href="/link left/" class="linkLeft"><img src="images/linkLeft.png" alt="Левый переход"></a>

HTML5

1	<a href="/link right/" class="linkRight"><img src="images/linkRight.png" alt="Правый переход"></a>

HTML5

1	<li><a href="/lupa/" class="lupa"><img src="images/lupa.png" alt="Лупа"></a></li>

Что является не очень хорошим тоном.
Вопрос-Как задать картинке при помощи background-img картинки, чтобы они отображались в блоках и как можно позиционировать картинку как фон блока внутри? При необходимости могу скинуть домен для визуализации.
Пример сss кода для первого и последнего класса:

CSS

.linkLeft {
    position:absolute;
    top: 225px;
    left: 8px;
    padding: 10px 14px;
    border-radius: 0px 5px 5px 0px;
    box-shadow: 0px 5px 0px #e2534b;
    background: #e8645a;
    color: #ffffff;
    height: 30px;
}

CSS

.lupa {
    padding: 10px 10px;
    border-radius: 5px;
    color: #ffffff;
}

CSS

a:hover {
    background: #e8645a;
    color: #ffffff;
    border-radius: 5px;
    box-shadow: 0px 5px 0px #e2534b;
}

mihalken · 05.06.2014, 08:59

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

Как задать картинке при помощи background-img картинки, чтобы они отображались в блоках

CSS

1	.block { background-image: url('абсолютный_путь_до_картинки'); }

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

как можно позиционировать картинку как фон блока внутри?

CSS

1	background-position: [left \| center \| right \| <проценты> \| <значение>] \|\| [top \| center \| bottom \| <проценты> \| <значение>] \| inherit

@Zeos · 05.06.2014, 10:55 **[ТС]**

Данные действия не помогают, уже пробовал не раз.
Убрал <img>из html кода и прописал такой стиль для класса .linkLeft

CSS

.linkLeft {
    background-image: url ("https://www.cyberforum.ru/images/linkLeft.png");
    background-position: center;
}

В результате рисунка нету в блоке, и фон такой как в прошлом коде(даже блок стал меньше по размерам)

@kvant355 · 05.06.2014, 11:24

давайте ссылку на домен

@Zeos · 05.06.2014, 18:15 **[ТС]**

Вот ссылка на домен(со старым расположением картинок через <img>) http://yurtest.8nio.com Знаю что уг верстка, как не крути первая) И еще один вопрос, как сделать, чтобы .top-menu при смене размеров браузера перестал смещаться, а оставался на своем месте как Лого например, оно всегда на месте.

@kvant355 · 05.06.2014, 18:32

я все таки не очень понял вашего вопроса с картинками, чего вам надо добиться?

Добавлено через 9 минут
чтобы не складывалось меню, можно сделать, например, вот так:

CSS

.top-menu {
    position: fixed;
    top: 10px;
        right: 5px;
}

@N3stY · 05.06.2014, 18:32

Полагаю, для автора и для всех начинающих подойдет прога dreamweaver

просто и удобно, настройка CSS разжевана и удобно размещена.

И таки да

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

block {
background-image: url('абсолютный_путь_до_картинки');
}

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

background-position: [left | center | right | <проценты> | <значение>] || [top | center | bottom | <проценты> | <значение>] | inherit

Единственный вариант, ну есче можно указать позицию по x/y ,

@Zeos · 05.06.2014, 18:57 **[ТС]**

я все таки не очень понял вашего вопроса с картинками, чего вам надо добиться?

Вот на сайте есть к примеру 2 картинки стрелочек в блоке .linkLeft и .linkRight. +Они же являються ссылками для перехода еще куда-то. Но, через <img> не желательно так задавать, поэтому хотел бы его заменить вставкой картинки как БГ для этого блока с сохранением возможности перехода как по ссылке. Грубо говоря результат должен быть таким как щас, только картинка задана через бг.

@kvant355 · 05.06.2014, 19:00

а почему вы решили что картинку ссылкой делать нежелательно?

@Zeos · 05.06.2014, 22:53 **[ТС]**

Ну дело не в ссылке, а в способе заливки картинки.

@kvant355 · 05.06.2014, 23:32

картинку можно отобразить как фон и как объект. Если как фон то background, если как объект, то <img src="путь" />. Объект может являться ссылкой, фон ссылкой не сделаете

@Zeos · 06.06.2014, 02:26 **[ТС]**

Можно ли спрайтом сделать тогда?

@kvant355 · 06.06.2014, 02:34

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

@Zeos · 07.06.2014, 22:37 **[ТС]**

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

А вот с менюшкой проблему не решил, переписал её заново, щас более солидней хедер и меню, но при уменьшении размеров окна браузера она смещаеться чего не должно быть. Вроде нужно значение

CSS

min-width

и

CSS

max-width

задать но я не знаю куда именно, к хедеру, менюхе или к контейнеру. Если можно с примером покажите

@N3stY · 10.06.2014, 19:58

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

Ну дело не в ссылке, а в способе заливки картинки.

Вот примерный код того что вы хотите сделать:
Пример работы тут: https://pp.vk.me/c619816/v6198... L81hLM.jpg (картинка)

HTML5

<style type="text/css">
.left {
    background-image: url(http://s1.iconbird.com/ico/0612/49handdrawnicons/w64h641339857755left3.png);
    background-repeat: no-repeat;
    height: 64px;
    width: 64px;
    float: left;
    margin-top: 100px;
}
.right {
    background-image: url(http://s1.iconbird.com/ico/0612/49handdrawnicons/w64h641339857808right3.png);
    background-repeat: no-repeat;
    height: 64px;
    width: 64px;
    float: left;
    margin-top: 100px;
}
.container {
    height: 200px;
    width: 500px;
    float: left;
    background-image: url(http://compress.ru/archive/cp/2008/8/36/38.png);
    color: #FFF;
    padding-top: 60px;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
}
.page {
    margin-left: 20%;
}
</style>
<div class="page">
<div class="left" onClick="location.href='#leftside'"></div>
<div class="container">
Для позиционирования можно так же использовать:<br>
background-position определяет горизонтальное (1-е значение) и вертикальное (2-е значение) позиционирование изображения-фона.<br> В результате позиционирования изображение-фон будет установлено по центру страницы, по горизонтали и на расстоянии 80px сверху по вертикали. Значения атрибута background-position могут быть определены в пикселях, в процентах или терминами: left, right, center, bottom, top.
</div>
<div class="right" onClick="location.href='#rightside'"></div>
</div>

@kvant355 43 / 43 / 25 Регистрация: 21.07.2013 Сообщений: 357
	05.06.2014, 11:24	4
	давайте ссылку на домен 0

@Zeos 0 / 0 / 0 Регистрация: 05.06.2014 Сообщений: 8
	05.06.2014, 18:15 [ТС]	5
	Вот ссылка на домен(со старым расположением картинок через <img>) http://yurtest.8nio.com Знаю что уг верстка, как не крути первая) И еще один вопрос, как сделать, чтобы .top-menu при смене размеров браузера перестал смещаться, а оставался на своем месте как Лого например, оно всегда на месте. 0

@N3stY (ノಠ益ಠ)ノ彡┻━┻ 152 / 152 / 78 Регистрация: 05.06.2014 Сообщений: 710 Записей в блоге: 2
	05.06.2014, 18:32	7
	Полагаю, для автора и для всех начинающих подойдет прога dreamweaver просто и удобно, настройка CSS разжевана и удобно размещена. И таки да Сообщение от mihalken block { background-image: url('абсолютный_путь_до_картинки'); } Сообщение от mihalken background-position: [left \| center \| right \| <проценты> \| <значение>] \|\| [top \| center \| bottom \| <проценты> \| <значение>] \| inherit Единственный вариант, ну есче можно указать позицию по x/y , 0

@Zeos 0 / 0 / 0 Регистрация: 05.06.2014 Сообщений: 8
	05.06.2014, 18:57 [ТС]	8
	я все таки не очень понял вашего вопроса с картинками, чего вам надо добиться? Вот на сайте есть к примеру 2 картинки стрелочек в блоке .linkLeft и .linkRight. +Они же являються ссылками для перехода еще куда-то. Но, через <img> не желательно так задавать, поэтому хотел бы его заменить вставкой картинки как БГ для этого блока с сохранением возможности перехода как по ссылке. Грубо говоря результат должен быть таким как щас, только картинка задана через бг. 0

@kvant355 43 / 43 / 25 Регистрация: 21.07.2013 Сообщений: 357
	05.06.2014, 19:00	9
	а почему вы решили что картинку ссылкой делать нежелательно? 0

@Zeos 0 / 0 / 0 Регистрация: 05.06.2014 Сообщений: 8
	05.06.2014, 22:53 [ТС]	10
	Ну дело не в ссылке, а в способе заливки картинки. 0

@kvant355 43 / 43 / 25 Регистрация: 21.07.2013 Сообщений: 357
	05.06.2014, 23:32	11
	картинку можно отобразить как фон и как объект. Если как фон то background, если как объект, то <img src="путь" />. Объект может являться ссылкой, фон ссылкой не сделаете 0

@Zeos 0 / 0 / 0 Регистрация: 05.06.2014 Сообщений: 8
	06.06.2014, 02:26 [ТС]	12
	Можно ли спрайтом сделать тогда? 0

@kvant355 43 / 43 / 25 Регистрация: 21.07.2013 Сообщений: 357
	06.06.2014, 02:34	13
	можно что угодно...спрайты можно реализовать и как объекты и как фон (но чаще спрайты фоном делают) 0