<div class="block">
<div class="block__header"></div>
1 <br />
1 <br />
</div>
.block{
margin: 50px; // just for better view
position: relative;
background-size: 100% 1px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAqQAAAABCAMAAAA/1kzvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEU3ODgyNjA1QUY2MTFFQUFGQjdERUJEMzBCRTZEODkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEU3ODgyNjE1QUY2MTFFQUFGQjdERUJEMzBCRTZEODkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowRTc4ODI1RTVBRjYxMUVBQUZCN0RFQkQzMEJFNkQ4OSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowRTc4ODI1RjVBRjYxMUVBQUZCN0RFQkQzMEJFNkQ4OSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtzOmSAAAAAzUExURf/eSf/eRwAAAP/fSv/eRvzeQv/eSP3fRv7fRf7eSP7eR//eRfzdSCMhCrOeM+neRfzeRJOlL8wAAAA2SURBVHjaYmACAT4eNjY2hlEwCugCWLi5OIGAiwUIuFlBQIAdCJhBgI0RDjiAgJ8XmDwBAgwArEABP2tx3A4AAAAASUVORK5CYII=);
}
.block__header {
background-size: 100% 100%;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAqUAAAAYCAMAAAD0zXSCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NUUwRkQxRjg1QUY2MTFFQTlBMzc4RTc4Mjg4MUYxOUYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NUUwRkQxRjk1QUY2MTFFQTlBMzc4RTc4Mjg4MUYxOUYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1RTBGRDFGNjVBRjYxMUVBOUEzNzhFNzgyODgxRjE5RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1RTBGRDFGNzVBRjYxMUVBOUEzNzhFNzgyODgxRjE5RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pqoyxi0AAAHyUExURf/fRgAAAP/////iV//75+bm5uXl5f/87+fn5yEhIRkZGf/jYAQEBP39/f/jX////oaGhv/wpykpKeHh4RIQBf/99dnDWd7NehoaGm5ubhsbG3lqIf/mcP/fSBgVB//fSf/53P/86yMeCtvb2xUVFQICAPv6+Onhuf/jW0tLS0xFI//75fv7+YWFhbS0tA0MBOnp6ZKDPv/ofBcUBh4eHtbAVv/98uTk5PLy8vHw6v7+/ubl3unhuhYWFv/xr9bW1gEBAP/off/52zo6OkVAK8WvRv/98CsqI/z57UxKQO3kvSYkF66uriAeFs63S+Df3XluN7CfTurq6sC+sfDhmHl5ee/ksNjCWdXV1f/99BwcGIN2Of7iW//gS1dQMfbhfjYxHG9ubcGsRhwbF//mb9fLk9bAVwICAeLi4P/mbLa2tNfRtoZ3L+XPZvHZZ0hISO/oxv/ndkI/MF9XMhQRBvT09OPgzy8uJ+/u6hgYFvz459nIdvf17K2bRO7u7p2ORt7NefDov93MefHt3P/wpiIeDLOzswUEAf/voR0dG8y8cP/hU0pKSv/unLKjW//hT9/Wr+De1ufgvf/76t/Ne//fR//87iMfCv3vrSwnDMi6e//++fb29vjx0f/3zyYkGdbSvP/unt/ZufrlgC8qESAgIOSbPnoAAAJASURBVHja7JppU9NQFIZDISlQ2qaopBKbQleFIgLKIqCoiPu+gCuIKO6ggOCCuO/7hogbgv+Tm5C26eXS6RfTMvM+bTOZM/OeOTnzzM2XcpaFKC/LAsA8Vi2oooWDpQCWAvAfLW3bgcUBE3mdsqVDfe78Ody/Lws8r3/JT7/ViRZZBWOMSgp0UmAl52KGJGsQZkGgIoaOSSZLPUlPZijwjD7xItU/ocAz+swbS+CpmD4W1Ye1M57qQ60iMSkkS/LMQvKkQZF5hcRn3Z1P3NP0c99Lbmn9lpjazy5ZADCP1fFjdU3KlmY9xeJApln646Mk3X94oDVPZ9vfHADM45Bq3T/10npH+ixJDyYZlh4crlGUJy8bcnVGprMBMI/OqHm5DbsURakZa2NYWreWHLWVW+PH7CYOAPOojqvXrL72q0phKVh0lvaHm8LvB84GAnv2WqN8uojFARO5HlPPevpWIHB89Gi4aeddg6U3fD5f181Gv//DNYfNYSM4bNmnsDhgIu9i6jke7fP7G79PjPtmrhosLSQHbPEScrNsBbYF0o5VlXI5kXJpESwFsBQAWApgKQCZY6ndvt5uL+xtCb644HQ6j/VgRSDtfCUqOs8Egy2D7ZqfnChWiOKR/bJ85bDL5Xq+EisCaWfqMXHxrSzLJ86JFcRPrkClIxKK3D7p9Xo8X7AikHY8XvL5FoqEtp/X/OS0f0ptJO/+UhyjIJPYQKSsXaf5CUvBYrH0z+aSkl+vsBiQQbwhUv7s1vycFWAAaUyABxHrTDIAAAAASUVORK5CYII=);
&::before {
display: block;
content: '';
padding-top: 24 / 667 * 100%; // height / width of background image
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.