X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Зафиксировать изображение (резиновый фон)
Алерт
Алерт
Topic Starter сообщение 14.4.2012, 20:20; Ответить: Алерт
Сообщение #1


Здравствуйте.
Имеется резиновый фон (красивая картика внизу с волной). Нужно прекрипить на эту волну логотип, только вот проблема как. На моём мониторе нормально, как только на другом или нажимаешь F11 картинка начинает скакать и оказываеться не на волне. Пробовала сдлеать разные позиции position:absolute и fixed ..вообщем ничего не выходит(( помогите пожалуйста..
http://www.imagepost...2_12.JPG
логотип(картинка)должен оставаться как на второй картинки не имея значения на каком мониторе смотреть.

Код фона CSS:
.other_sheet {
background-image:  url(../images/bg_other.jpg);
background-repeat:no-repeat;
background-size: 100% 100%;
padding:0;
margin:0;
min-height:100%;
}


Код картинки (меняла позиционирование не к какому результату это не привело, всегда одно и то же выходит)

img.logo_link {
position:relative;
top: 420px;
}


ПРобовала поставить position:absolute; у background, и менять по разному позиции у картинки, в итоге выходит что при нажатии на F11 она смещаеться вверх, а при отжатии остаётся там же вверху.
Пробовала в картинке не только top: 420px; но и margin-top и т.п
Гуглила, ничего вообщем не нашла((

Сообщение отредактировал myrka - 15.4.2012, 18:32
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 14.4.2012, 20:36; Ответить: yury_mw
Сообщение #2


Телепаты в отпуске.
Отсюда никак не видно ни ваших резиновых волн, ни логотипов, ни как они скачут, ни что и как вы прикрепляете, ни как вам хочется, чтобы оно было прикреплено. Без этого помочь вам затруднительно.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ShadowCoder
ShadowCoder
сообщение 15.4.2012, 2:07; Ответить: ShadowCoder
Сообщение #3


Было бы интересно увидеть сам пример.

А "position:relative"? По идее, если сделать позиционирование логотипа ОТНОСИТЕЛЬНО фона, тогда и при изменении размеров окна (F11 - Full Screen, правильно?) эти два элемента должны изменяться вместе.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Алерт
Алерт
Topic Starter сообщение 15.4.2012, 18:34; Ответить: Алерт
Сообщение #4


yury, отредактировала более попдробнее свою проблему, посмотрите пожалуйста,может что нибудь подскажите

ShadowCoder, Нет. Пробовала разные варианты, ничего не выходит, посомтрите пожалуйста, отредактировала попдробнее тему
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 15.4.2012, 19:50; Ответить: yury_mw
Сообщение #5


Проблема в том, что вы выбрали масштабирование фона по размеру окна браузера, см свойство
background-size: 100% 100%;

соответственно, когда вы меняете размер окна, то меняются и размеры фона и положение картинки на нем.
Обратите внимание, что изменение размера окна окна браузера может происходить не только по диагонали, когда пропорционально меняются высота и ширина, но и независимо, когда меняется только ширина или высота. В вашем случае это приведет к соответствующим непропорциональным искажениям фона. Вы уверены, что вам такое надо?

Для синхроного изменения положения логотипа можно ему задать абсолютное позиционирование с отступами в процентах от размера блока-родителя (и не забыть блоку-родителю дать свойство
position: relative;
т.к. абсолютное позиционирование по стандарту работает только внутри таких блоков).
Как альтернативный вариант, можно вклеить логотип в изображение фона для их пропорционального изменения.
Но с учетом вышеупомянутых искажений все это будет смотреться весьма криво.

Нормальный резиновый фон обычно делается тайлингом фона (покрытием фона повторяющейся бесшовной текстурой). В этом случае ничего никуда не скачет и не искажается.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Алерт
Алерт
Topic Starter сообщение 15.4.2012, 21:40; Ответить: Алерт
Сообщение #6


Огромное вам человеческое спасибо yury!

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыВ РФ приступили к производству антишпионского защищенного смартфона «Р-фон»
17 Room 3106 17.1.2024, 10:19
автор: Antarez
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПреобразую в вектор растровое изображение
Для первых двух готова делать бесплатно, за отзыв
1 ropique 3092 18.5.2018, 22:26
автор: Gerga
Открытая тема (нет новых ответов) Как вывести текст при наведении на изображение?
2 meduza_hb 7020 18.10.2016, 21:22
автор: -x-line-
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыНужен фон для сайта
0 SlavePit 1648 16.6.2016, 19:12
автор: SlavePit
Открытая тема (нет новых ответов) Изображение поверх сайта
4 tmait 2098 9.8.2015, 18:27
автор: tmait


 



RSS Текстовая версия Сейчас: 19.4.2024, 22:07
Дизайн