Перейти к содержимому


× Быстрый вопрос
Пользователь месяца
ShowPrint ShowPrint 1-й за Март
Очков активности: 1 152 1 тема, 61 сообщение, 12 баллов репутации
Сайт: ShowPrint.ru
ТОП самых активных за этот месяц
  • Фотография Андрей WPMasterKZ
    #1

    Андрей WPMasterKZ (wpmaster.kz)
    Очков активности: 1008 Вне конкурса за определение пользователя месяца

  • Фотография OlgaGetman
    #2

    OlgaGetman
    Очков активности: 564 Вне конкурса за определение пользователя месяца

  • Фотография Vmir
    #3

    Vmir
    Очков активности: 528 4 темы, 32 сообщения, 8 баллов репутации

  • Фотография Mandarin
    #4

    Mandarin
    Очков активности: 306 10 тем, 21 сообщение, 4 балла репутации

  • Фотография ShowPrint
    #5

    ShowPrint (ShowPrint.ru)
    Очков активности: 204 Вне конкурса за определение пользователя месяца

  • Фотография maxnik
    #6

    maxnik (konovalovpavel.ru)
    Очков активности: 72 1 тема, 21 сообщение, 2 балла репутации

  • Фотография pozitron123
    #7

    pozitron123
    Очков активности: 67.5 3 темы, 6 сообщений, 3 балла репутации

  • Фотография Megoydagi
    #8

    Megoydagi (24ho.ru)
    Очков активности: 66 1 тема, 19 сообщений, 2 балла репутации

  • Фотография re-search
    #9

    re-search
    Очков активности: 49.5 7 тем, 12 сообщений, 1 балл репутации

  • Фотография Constantine
    #10

    Constantine
    Очков активности: 39 4 темы, 14 сообщений, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 20.04.2019
  • Яндекс выдача: 24.04.2019
Топ 5 участников по репутации


Зафиксировать изображение (резиновый фон)

#1 myrka

myrka
  • Неактивные
  • 22 сообщений
  • Репутация: 10
0

Отправлено 14 Апрель 2012 - 19:20

Здравствуйте.
Имеется резиновый фон (красивая картика внизу с волной). Нужно прекрипить на эту волну логотип, только вот проблема как. На моём мониторе нормально, как только на другом или нажимаешь 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 Апрель 2012 - 17:32

  • 0

#2 yury

yury
  • Пользователь
  • 647 сообщений
  • Репутация: 192

Отправлено 14 Апрель 2012 - 19:36

Телепаты в отпуске.
Отсюда никак не видно ни ваших резиновых волн, ни логотипов, ни как они скачут, ни что и как вы прикрепляете, ни как вам хочется, чтобы оно было прикреплено. Без этого помочь вам затруднительно.
  • 0

#3 ShadowCoder

ShadowCoder
  • Неактивные
  • 4 сообщений
  • Репутация: 0

Отправлено 15 Апрель 2012 - 01:07

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

А "position:relative"? По идее, если сделать позиционирование логотипа ОТНОСИТЕЛЬНО фона, тогда и при изменении размеров окна (F11 - Full Screen, правильно?) эти два элемента должны изменяться вместе.
  • 0

#4 myrka

myrka
    Topic Starter
  • Неактивные
  • 22 сообщений
  • Репутация: 10

Отправлено 15 Апрель 2012 - 17:34

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

ShadowCoder, Нет. Пробовала разные варианты, ничего не выходит, посомтрите пожалуйста, отредактировала попдробнее тему


  • 0

#5 yury

yury
  • Пользователь
  • 647 сообщений
  • Репутация: 192

Отправлено 15 Апрель 2012 - 18:50

Проблема в том, что вы выбрали масштабирование фона по размеру окна браузера, см свойство
background-size: 100% 100%;
соответственно, когда вы меняете размер окна, то меняются и размеры фона и положение картинки на нем.
Обратите внимание, что изменение размера окна окна браузера может происходить не только по диагонали, когда пропорционально меняются высота и ширина, но и независимо, когда меняется только ширина или высота. В вашем случае это приведет к соответствующим непропорциональным искажениям фона. Вы уверены, что вам такое надо?

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

Нормальный резиновый фон обычно делается тайлингом фона (покрытием фона повторяющейся бесшовной текстурой). В этом случае ничего никуда не скачет и не искажается.
  • 1

#6 myrka

myrka
    Topic Starter
  • Неактивные
  • 22 сообщений
  • Репутация: 10

Отправлено 15 Апрель 2012 - 20:40

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


Оформление форума – IPBSkins.ru