футер (картинка)

[bobb]

Привет народ, помогите пожалуйста решить задачу.

 

Мне в футер надо вставить картинку и чтобы она была прижата к правому углу футера.

 

вот у меня  такое:

 

<div id="footer"><div class="footer_image"></div></div>

 

#footer {height: 150px;width:891px;background-color: darkblue; .footer_image {background-image: url(/theme/spring/p1.png);background-repeat: no-repeat;height: 150px;}

 

Если возможно и есть время, то помогите пожалуйста.

 

 

[satantx]

background-position: 100% 0;

[bobb]

Спасибо большущее! Теперь картинка в углу как и надо, задача решена. Если можно, то ещё вопрос - как лучше текст копирайтов оформить в этом же футере, чтобы они по середине были.

[bobb]

подскажите пожалуйста, как можно отредактировать картинку в блоке? я хочу придать ей эффект. Вот у меня так:

.footer_img {background-image: url(/theme/spring/p1.png);background-repeat: no-repeat;

Edited February 12, 2016 by bobb

[Sergey_K_2015]

Добавьте background-size:0;

Придадите эффект отсутствия картинки.

Вы бы написали, какой эффект нужен. И учтите, что на фоновых картинках особо не разгуляешься. Поменять можно размер, позиционирование, повторение.

[bobb]

Спасибо за ответ! Я сделал background-size:0; картинка вообще пропала +)) Я нашёл в интернете эффект свечения, выпуклости и увелечения. Меня интересует увелечение, чтобы на наводе на картинку она немного увеличивалась.

[Sergey_K_2015]

Все эти эффекты описаны не для фонового изображения, а для самого блока, в котором содержится это изображение. И если в этом блоке есть, к примеру, текст, то он тоже увеличится (эффект плавного увеличения).

http://webgyry.info/svet-css- описывается создание эффекта свечения.

http://beloweb.ru/novichkam/plavnoe-uvelichenie-izobrazheniya-pri-navedenii-na-chistom-css3.html- плавное увеличение при наведении.

[bobb]

Спасибо!

[bobb]

У меня сейчас проблема появилась. Картинка вниз съезжает и появляется под футером белая полоса. Я так подозреваю, что это изза блока с картинкой. Посоветуйте пожалуйста. У меня вот так:

<div id="footer"><div class="footer_img"><div class="footerText"><p> Footer text </p></div></div></div>

 

#footer {height: 150px;width:891px;background-color: darkblue  .footer_image {background-image: url(/theme/spring/p1.png);background-repeat: no-repeat;height: 150px;} .footerText {text-align: center;}

 

Подскажите пожалуйста как надо сделать чтобы картинка не съезжала вниз?

[bobb]

подскажите пожалуйста, что можно сделать чтобы блок с картинкой не съезжал вниз!

[Sergey_K_2015]

Из тех кусков кода, которые доступны для обозрения, совсем непонятно, какому из элементов Вы задаете фоновую картинку (.footer_image).

В HTML нет ничего с таким классом. В принципе, картинка вообще не должна появляться.

[bobb]

тут ошбка - .footer_img это и есть footer_image!

[Sergey_K_2015]

Футеру Вы размеры задали, теперь растяните вложенный <div class="footer_img"> на весь размер родительского блока (width:  100%; height: 100;).

А какой размер у p1.png? Насколько он совпадает с размерами блока, в который его помещаете?

Попробуйте задать .footer_img следующие параметры:

background-size:  cover (либо 100% 100%) - это масштабирование изображения

background-position: top (выравнивание по верхнему краю)

[bobb]

размер картинки p1.png - 150px (высота и ширина). высота самого footera - 150px. Картинка съезжает вниз и там где заканчивается футер появляетца белый фон почему то:





Подскажите пожалуйста что ещё сделать можно!

[bobb]

народ ну есть какие нибудь мысли, а то у меня стопор.

[bobb]

проблема решена и я вышел из ступора, всем спасибо.