figure
и figcaption
. width:100vw;
height: 100vh;
background-size: 100% 100%
даст Вам заполнение картинкой всей площади блока. Разумеется, с нарушением пропорций, если у картинки и у окна браузера они не совпадают. но столкнулся с непредвиденной проблемкой...
не могли бы подсказать ресурсы про создание спрайтов
наложение фона поверх другого
Как лучше всего отверстать эту секцию? Я пробовал задать пустой див с border. и к подгонять картинки с div:before(background-image).
<body scroll="no" style="margin:0px;overflow:hidden" dir="ltr" marginheight="0" marginwidth="0" leftmargin="0" topmargin="0" border="0">
<meta name="viewport" content="width=device-width, height=device-height">
var $menu = $(".menu");
var scrollbegin = $menu.height() + 45; // появление блока при прокрутке страницы на высоту самого блока плюс 45 точек
$(window).scroll(function(){
if ( $(this).scrollTop() > scrollbegin && $menu.hasClass("default") ){
$menu.removeClass("default").addClass("fixed");
} else if($(this).scrollTop() <= scrollbegin && $menu.hasClass("fixed")) {
$menu.removeClass("fixed").addClass("default");
}
});
<div>кнопка</div>
body {
background: #C79B4B;
}
div {
width: 200px;
height: 60px;
line-height: 60px;
text-align: center;
color: #FFF;
background:
linear-gradient(-135deg, #C79B4B 0, #C79B4B 5px, #fff 6px, #fff 8px, transparent 9px, transparent 100%),
linear-gradient(135deg, #C79B4B 0, #C79B4B 5px, #fff 6px, #fff 8px, transparent 9px, transparent 100%),
linear-gradient(-45deg, #C79B4B 0, #C79B4B 5px, #fff 6px, #fff 8px, transparent 9px, transparent 100%),
linear-gradient(45deg, #C79B4B 0, #C79B4B 5px, #fff 6px, #fff 8px, transparent 9px, transparent 100%),
linear-gradient(to right,#fff 0, #fff 2px, transparent 3px, transparent calc(100% - 3px), #fff calc(100% - 2px), #fff 100%),
linear-gradient(to bottom, #fff 0, #fff 2px, #f00 3px, #900 calc(100% - 3px), #fff calc(100% - 2px), #fff 100%);
margin: 30px;
}