cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div id="container">
    <div class="spacing"></div>
    <div class="spacing"></div>
    <div class="spacing"></div>
    <div class="spacing"></div>
    <div class="spacing"></div>
    <div class="spacing"></div>
    <div class="spacing"></div>
    <div class="spacing"></div>
    <div class="spacing"></div>
    <div class="spacing"></div>
    <div class="spacing"></div>
    <div class="spacing"></div>
    <div class="spacing"></div>
    <div class="spacing"></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc nunc, consequat id finibus et, tincidunt non diam. Quisque sed turpis non sem commodo mollis sodales in quam. In cursus finibus aliquet. Nunc a nibh augue. Proin nec ante justo. Nulla suscipit, ipsum a elementum vestibulum, ante nibh vestibulum ipsum, a venenatis nisl nunc in massa. Suspendisse vel augue id ex blandit ultricies. Praesent hendrerit feugiat pretium. Donec lacinia neque risus, mollis condimentum velit semper fringilla. Morbi aliquet dui ut pellentesque consequat. Quisque efficitur efficitur nisl, finibus tempus odio. Integer id leo lorem. Cras suscipit pharetra leo vitae aliquam. Nullam rutrum, sem in viverra commodo, erat eros pretium nulla, et finibus purus turpis et ipsum. Pellentesque fringilla libero sit amet neque tristique, sit amet maximus nunc suscipit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <p>Donec molestie turpis ut urna hendrerit, sit amet rutrum nisl aliquam. Suspendisse ullamcorper orci vel mi molestie, quis molestie neque vulputate. Fusce congue nunc eget felis facilisis, nec tempor ante mollis. Mauris eget ex ex. Morbi ornare euismod egestas. Morbi tristique ultricies libero, eu suscipit libero tincidunt at. Maecenas eu tincidunt ex. Pellentesque id tellus augue. Proin vestibulum, nunc a tempor suscipit, neque mi pharetra leo, quis consectetur massa tellus a elit. </p>
    <p>Vestibulum sit amet odio et ante ultricies auctor. Pellentesque non gravida nibh. Etiam fringilla neque ipsum, eu commodo turpis pulvinar nec. Phasellus aliquet turpis lacinia ullamcorper venenatis. In eget cursus libero. Aliquam sagittis dolor fringilla nunc euismod elementum. Nunc laoreet placerat ex, vitae iaculis nisl facilisis interdum. Fusce porta neque lacus, id sollicitudin elit laoreet sit amet. Vestibulum mollis pretium urna. Phasellus felis risus, tempor sit amet nunc vitae, eleifend sodales tortor. Phasellus sollicitudin efficitur quam at cursus. Fusce auctor nisl ut lectus euismod venenatis. Nulla et accumsan enim. Nunc id magna fermentum, elementum ligula non, cursus turpis.</p>
    <p>Nullam mattis, metus vitae viverra sodales, arcu augue accumsan dui, sit amet tempus mi lacus eu risus. Phasellus egestas, odio in dignissim porta, velit nibh aliquam diam, a facilisis enim ipsum a libero. Ut dictum turpis at nisi gravida, aliquet maximus erat rhoncus. Integer aliquam cursus euismod. Nulla in efficitur augue. Aliquam gravida ultricies orci, eget posuere felis feugiat porttitor. Nulla eget hendrerit risus. Nulla ut laoreet urna. Vestibulum posuere sapien sem, eget cursus mi pretium ac. Integer purus ligula, mattis id purus sed, varius maximus erat. Donec auctor lorem at est consequat auctor. Vivamus sed ligula sagittis, ornare erat ultricies, condimentum enim. Nullam bibendum ligula vel molestie ullamcorper. </p>
</div>
            
          
!
            
              @textHeight: 22px;
@backgroundWidth: 300px;
@extraSpacing: 5px;
@initialWidth: @backgroundWidth + @extraSpacing;
@textLines: @backgroundWidth / @textHeight;

#container {
	background-image: url(https://www.ostraining.com/cdn/images/webdesign/fluid-image-text/demo/bg.png);
	background-repeat: no-repeat;
	background-position: right top;
	background-size: @backgroundWidth auto;
	min-height: @backgroundWidth;
}

#container p {
	line-height: @textHeight;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: @textHeight - 8;
}

.spacing {
	float: right;
	clear: right;
	height: @textHeight;
}

.generate-spacing(@i, @end) when (@i <= @end) {
	.spacing:nth-child(@{i}) {
		width: @initialWidth - ((@i - 1) * @textHeight);
	}
	.generate-spacing((@i + 1), @end);
}

.generate-spacing(1, @textLines);
            
          
!
999px
Loading ..................

Console