Подскажите, пожалуйста, как поднять картинку вверх в CSS, если код такой >>>
#mySlideshow .jdSlideshow img
padding-left:9px;
padding-right:10px;
padding-top:2px;
padding-bottom:9px;
background-repeat:no-repeat;
border: 1px white solid;
>
#mySlideshow
z-index:0;
margin-bottom: -10px;
background-repeat:no-repeat;
background-position: 16px 14px;
height: 200px;
>
Лучший ответ
Не очень понял в какой именно момент картинку надо поднять и как именно, но, как вариант, модно сделать так:
#someimg
position:relative;
top:-20px;
>
Остальные ответы
Девочка! Глупенькая! Не тут это нужно спрашивать. Тут сидят одни профаны (и я вместе с ними) .
Есть куча форумов по веб-мастерингу.
background — position
Фоновая картинка подчиняется этому свойству и занимает нужную позицию.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
- Кратко
- Пример
- Как пишется
- Ключевые слова
- Пиксели или другие единицы измерения длины
- Проценты
- Алёна Батицкая советует
Контрибьюторы:
Обновлено 20 декабря 2021
Кратко
Скопировать ссылку «Кратко» Скопировано
При помощи свойства background — position можно управлять положением фоновой картинки внутри элемента.
Если фоновая картинка ( background — image ) меньше, чем элемент, и автоматическое повторение фона ( background — repeat ) отключено, то по умолчанию она расположится в левом верхнем углу.
Пример
Скопировать ссылку «Пример» Скопировано
div class="element">div>.element background-color: #49a16c; background-image: url("doggo.png"); background-repeat: no-repeat;>.element background-color: #49a16c; background-image: url("doggo.png"); background-repeat: no-repeat; >Как видно в примере, маленькая картинка с персонажем располагается в левом верхнем углу. Но по логике это изображение нам нужно расположить в правом нижнем углу.
Для этого мы изменим значение свойства background — position на нужное нам: 100 % 100 % или bottom right . Они равнозначны.
Позиция в процентах:
.element background-position: 100% 100%;>.element background-position: 100% 100%; >Или при помощи ключевых слов:
.element background-position: bottom right;>.element background-position: bottom right; >Как пишется
Скопировать ссылку «Как пишется» Скопировано
Ключевые слова
Скопировать ссылку «Ключевые слова» Скопировано
Доступны слова center , bottom , left , right . Их можно комбинировать, например: left center — по центру левой стороны; right bottom — правый нижний угол. Если хотим расположить картинку по центру по горизонтали и вертикали, второе слово center можно опустить.
Левый верхний угол:
.element background-position: left top;>.element background-position: left top; >.element background-position: center;>.element background-position: center; >По центру по горизонтали и у нижнего края:
.element background-position: center bottom;>.element background-position: center bottom; >Пиксели или другие единицы измерения длины
Скопировать ссылку «Пиксели или другие единицы измерения длины» Скопировано
Можно указать конкретное положение картинки в блоке.
10 px от левого края и 150 px от верхнего края:
.element background-position: 10px 150px;>.element background-position: 10px 150px; >1 rem от левого края и по центру между верхом и низом:
.element background-position: 1rem;>.element background-position: 1rem; >15 единиц ширины от левого края и 25 единиц высоты от верха:
.element background-position: 15vw 25vh;>.element background-position: 15vw 25vh; >Проценты
Скопировать ссылку «Проценты» Скопировано
Для этого свойства проценты рассчитываются необычным для CSS образом: от разницы между размером элемента и размером самой фоновой картинки. Сдвиг картинки на 50 % , то есть на половину этой разницы, центрирует её по соответствующей оси. Значение 0 % 0 % ставит картинку в левый верхний угол, а 100 % 100 % — в правый нижний.
Правый нижний угол:
.element background-position: 100% 100%;>.element background-position: 100% 100%; >.element background-position: 50% 50%;>.element background-position: 50% 50%; >Слева 15%, сверху 5%:
.element background-position: 15% 5%;>.element background-position: 15% 5%; >Если развернуть запись 15 % 5 % подробнее, то станет понятнее, как работают проценты в этом случае:
- Слева от картинки 15% свободного места, а справа — оставшиеся 85%.
- Над картинкой 5% свободного места, а под ней — оставшиеся 95%.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Свойство положения фона не наследуется.
�� Ключевые слова можно указывать в любом порядке. В остальных случаях первая величина — это позиция по горизонтали, а вторая, если есть — по вертикали.
�� Значение по умолчанию — 0% 0% (левый верхний угол).
�� Если указано только одно значение, то второе подставляется автоматически и равняется 50 % . То есть значение 100 % расположит картинку по центру правого края.
�� Если картинка больше блока, то разница их размеров, от которой отсчитываются проценты, оказывается отрицательной, поэтому они сдвигают картинку не вправо и вниз, а влево и вверх. Но 50 % 50 % и в этом случае совмещает центр картинки с центром элемента, а 100 % 100 % — правый нижний угол картинки с правым нижним углом элемента.
�� Если картинка занимает всё пространство блока, то background — position с ключевыми словами или в процентах не возымеет никакого действия (проценты будут отсчитываться от нуля). Но его принято указывать, чтобы в случае замены картинки новое изображение располагалось по центру блока.
�� Изменение положения фона можно анимировать при помощи свойства transition ��
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� В работе редко требуется располагать маленькие фоновые картинки в больших блоках. Сейчас принято делать красивые фоны на всю ширину. Но для любых фонов стоит указывать background — position : center или background — position : 50 % 50 % — в качестве подстраховки от фатальной поломки вёрстки.
�� Можно встретить такую запись: background — position : right 20px bottom 10px; . В этом случае отступ будет отсчитываться не от верхнего левого угла, а от указанной при помощи ключевого слова стороны. В данном случае картинка будет расположена в двадцати пикселях от правого края и в десяти пикселях от нижнего края.
�� Помимо перечисленных вариантов можно использовать функцию calc ( ) для указания более гибкого значения.
Как сделать кнопку наверх для сайта
На сайтах с большим количеством контента (например, блоги) просто необходимо использовать кнопку «Наверх». Ведь пользователю, прочитавшему большую статью, может понадобиться вернуться в верхнюю часть страницы для продолжения навигации по сайту. Или посетитель, перед тем как прочитать статью полностью, пролистывает ее от начала до конца и пробегает глазами по заголовкам, картинкам, схемам, чтобы заранее оценить, стоит читать статью или нет. Обычно, в таких случаях, при отсутствии кнопки «Вверх», посетитель просто скролит страницу вверх колёсиком мыши или при помощи скрола (в боковой части браузера).
Поэтому, для удобства навигации сайта, применяется кнопка прокрутки страницы вверх. Создать такую кнопку можно как без использования JavaScript (только с помощью CSS), так и с ним. Рассмотрим самые простые реализации этих способов.
Кнопка наверх: HTML+CSS
Преимущество данного способа — простота в использовании (не нужно использовать дополнительные библиотеки или скрипты).
Сначала нужно создать ссылку ‘#’, а затем оформить её так, как нам нужно:
Кнопка наверх с помощью CSS - "Нубекс" .topNubex ВверхК недостаткам данного способа относится то, что в таком случае прокрутка не может быть плавной и посетитель мгновенно перенаправляется в верхнюю часть страницы.
Кнопка наверх: JavaScript
Приведенный ниже способ использует библиотеку JQuery. Он прост в использовании и позволяет сделать прокрутку страницы плавной.
Кнопка "Вверх" при помощи JavaScript - "Нубекс" #topNubex
В этом примере в качестве фона кнопки используется картинка. Можно настроить отображение кнопки при помощи CSS-стилей (размер, цвет, обводка, прозрачность и т.д.). Таким образом, этот способ является более гибким и предоставляет больше возможностей при добавлении кнопки «Наверх» на сайт.
Смотрите также:
- Как поставить горячую клавишу на ссылку
- Как сделать кликабельный телефон на сайте
- Как сделать кнопку «Добавить в избранное»
- Кнопка HTML
Позиционирование в CSS
От автора: одним из наиболее полезных инструментов в CSS, на мой взгляд, является позиционирование элементов документа. Под термином «позиционирование» понимается возможность расположить элемент (блок, картинку и др.) в абсолютно любом месте документа.
Полезность этого свойства увеличивается прямо пропорционально сложности макета сайта. В уроке мы детальнее рассмотрим это полезное свойство. Сама же тема урока взята из вопросов, поступивших в нашу службу поддержки в один и тот же день.
Для начала давайте рассмотрим классический пример, где нам потребуется использование позиционирования… к слову, пример этот как раз и взят из одного из упомянутых выше вопросов. Итак, на указанной части шаблона:
мы имеем 2 логические части — шапка и блок меню. При этом оба блока содержат в себе части единой картинки — автомобиля «заезжающего» с шапки на меню. Теоретически здесь мы могли бы обойтись и без позиционирования. Для этого достаточно было бы вырезать картинку шапки и фон меню, при этом на каждой из картинок присутствовала бы своя часть автомобиля:
Но этот вариант далеко не оптимален. Гораздо лучше было бы, если бы у нас имелась отдельно картинка автомобиля, которая совсем не зависела бы от остального потока элементов. В этом случае мы смогли бы «таскать» автомобиль, выбирая для него нужное расположение. Как раз такую возможность нам предоставляет свойство CSS под названием position.
Указанное свойство имеет следующие возможные атрибуты: position: absolute | fixed | relative | static
Относительно атрибута static следует заметить, что его можно не использовать вообще, поскольку изначально это атрибут любого элемента на странице, поэтому если указать для элемента свойство position:static, то абсолютно никаких изменений мы не увидим.
А вот 3 других атрибута — весьма полезны. Для начала давайте укажем описание каждого из них.
— absolute (абсолютный). Указывает, что элемент абсолютно позиционирован. В этом случае он не существует в обычном потоке документа подобно другим элементам, которые отображаются на веб-странице словно абсолютно позиционированного объекта и нет. Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера.
— fixed (фиксированный). По своим свойствам это значение аналогично аргументу absolute, но в отличие от него привязывается к указанной параметрами left, top, right и bottom точке на экране и не меняет своего положения даже при пролистывании веб-страницы.
— relative (относительный). Положение элемента устанавливается относительно его исходного места. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения, в зависимости от применяемого параметра.
Итак, как же мы можем осуществить задуманное. Все просто. Нам известна ширина макета сайта (она фиксирована). Соответственно, все что потребуется — это разместить картинку, к примеру, в шапке и спозиционировать ее относительно шапки. «Сдвигать» картинку мы можем посредством упомянутых атрибутов left (сдвиг от левой границы), top (сдвиг от верхней границы), right (сдвиг от правой границы) и bottom (сдвиг от нижней границы). Во всех четырех случаях границами будут границы элемента, относительно которого осуществляется позиционирование. И вот здесь есть небольшой нюанс, который мы сейчас увидим.
Итак, картинку автомобиля мы вырезали из макета и размещаем ее в шапке: