CSS3 Background Images

Сделать изображение фоном без javascript на весь фон? Легко!

Есть методы с js... я ранее писал про скейлинг картинок, но есть и css метод, хоть и не везде работает!

.back {
  background-image: url(back.jpg);
  background-repeat:no-repeat;
  background-position:center center;
  -o-background-size: 100% 100%, auto;
  -moz-background-size: 100% 100%, auto;
  -webkit-background-size: 100% 100%, auto;
  background-size: 100% 100%, auto;
}

Данный метод будет работать в последних Firefox, Safari, Chrome и Opera, все остальные браузеры будут видеть реальное изображение в фоне по центру блока.

Источник: http://www.cssplay.co.uk/boxes/css3-background.html

background, css3

Print article

This entry was posted by pulev on 30.07.2010 at 11:10, and is filed under css, hints. Follow any responses to this post through RSS 2.0. Вы можете оставить комментарий или трэкбэк с вашего сайта.

Связанные записи
Комментарии (0)

Пока нет комментариев.

Нет трэкбэков.

Фиксим «корявый» background

1 неделю назад - Нет комментариев

Ух уж эти метросексуалы дизайна и вэб дизайна! Ранее я уже поднимал тему background'а. Все наверно замечали как бэк налазит на края блоков со скругленными краями... вам тоже на нравится это? Решение есть! .back { -webkit-background-clip: padding-box; -moz-background-clip: padding-box; } Если использовать сокращенную форму для других свойств фона, то это свойство должно быть после него. Больше о доступных значений для свойства здесь. Источник: http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed

Тянем картинки или скейлинг это просто!

2 месяца назад - 1 комментарий

Хотите чтоб картинка или бекграунд занимала все пространство? Легко! Подключаем яваскрипт: <script type="text/javascript" src="/js/jquery.maximage.js"></script> <script> $(function(){ jQuery('img.scale').maxImage({ isBackground: true, overflow: 'auto' }); }); </script> Ну и собственно сама картинка на странице: <img src="/images/scale.png" class="scale" alt="" /> Все ) Источник: http://www.aaronvanderzwan.com/maximage/

Самые ожидаемые CSS3 новшества

1 год назад - Нет комментариев

Около 7000 человек приняло участие в опросе о самых ожидаемых фишках CSS3... Border Radius (22.0%, 1,541 голосов) Multiple Backgrounds (22.0%, 1,523 Votes) @font-face (21.0%, 1,424 Votes) Animations / Transitions (12.0%, 818 Votes) Gradients (8.0%, 535 Votes) Box Shadow (4.0%, 271 Votes) RGBa (3.0%, 234 Votes) Text Shadow (2.0%, 140 Votes) Other (2.0%, 168 Votes) Как по мне, то результаты предсказуемы! Источник: http://css-tricks.com/poll-results-css3-features

3D background

1 год назад - Нет комментариев

Очень красивый эфект звездного неба... это просто! Все гениальное просто... <body> <div id="midground"></div> <div id="foreground"></div> </body> CSS стиль: body { background: url(images/background.png) repeat 5% 5%; } #midground { background: url(images/midground.png) repeat 20% 20%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 997; } #foreground { background: url(images/foreground.png) repeat 90% 110%; position: absolute; top: 0; left: