<span>
<h4>You SHOULD replace pattern placeholder svg file with your content!</h4><br>
</span>
<div class="hidden-xs row">
<div class="col-sm-4 col-xs-12">
<span class="sg-label">
<hr>
Dark gray - pattern-dark-gray.png<br>
</span>
<div class="h-body thin pattern-dark-gray">
<img src="/img/pattern-placeholder.svg" />
</div>
</div>
<div class="col-sm-4 col-xs-12
">
<span class="sg-label">
<hr>
Light gray - pattern-light-gray.png<br>
</span>
<div class="h-body thin pattern-light-gray">
<img src="/img/pattern-placeholder.svg" />
</div>
</div>
<div class="col-sm-4 col-xs-12">
<span>
<hr>
Medium gray - pattern-medium-gray.png<br>
</span>
<div class="h-body thin pattern-medium-gray">
<img src="/img/pattern-placeholder.svg" />
</div>
</div>
</div>
</div>
<div class="hidden-xs row">
<div class="col-sm-4 col-xs-12">
<span class="sg-label">
<hr>
Workstation - pattern-workstation.png<br>
</span>
<div class="h-body thin pattern-workstation">
<img src="/img/pattern-placeholder.svg" />
</div>
</div>
<div class="col-sm-4 col-xs-12">
<span class="sg-label">
<hr>
Server - pattern-server.png<br>
</span>
<div class="h-body thin pattern-server">
<img src="/img/pattern-placeholder.svg" />
</div>
</div>
<div class="col-sm-4 col-xs-12">
<span>
<hr>
Atomic - pattern-atomic.png<br>
</span>
<div class="h-body thin pattern-atomic">
<img src="/img/pattern-placeholder.svg" />
</div>
</div>
</div>
</div>
<hr>
<span>
<h4>{{ Note }}</h4><br>
</span>
<div class="hidden-xs row">
<div class="col-sm-4 col-xs-12">
<span class="sg-label">
<hr>
{{ imgPatternDarkGray }}<br>
</span>
<div class="h-body thin pattern-dark-gray">
<img src="/img/pattern-placeholder.svg" />
</div>
</div>
<div class="col-sm-4 col-xs-12
">
<span class="sg-label">
<hr>
{{ imgPatternLightGray }}<br>
</span>
<div class="h-body thin pattern-light-gray">
<img src="/img/pattern-placeholder.svg" />
</div>
</div>
<div class="col-sm-4 col-xs-12">
<span>
<hr>
{{ imgPatternMediumGray }}<br>
</span>
<div class="h-body thin pattern-medium-gray">
<img src="/img/pattern-placeholder.svg" />
</div>
</div>
</div>
</div>
<div class="hidden-xs row">
<div class="col-sm-4 col-xs-12">
<span class="sg-label">
<hr>
{{ imgPatternWorkstation }}<br>
</span>
<div class="h-body thin pattern-workstation">
<img src="/img/pattern-placeholder.svg" />
</div>
</div>
<div class="col-sm-4 col-xs-12">
<span class="sg-label">
<hr>
{{ imgPatternServer }}<br>
</span>
<div class="h-body thin pattern-server">
<img src="/img/pattern-placeholder.svg" />
</div>
</div>
<div class="col-sm-4 col-xs-12">
<span>
<hr>
{{ imgPatternAtomic }}<br>
</span>
<div class="h-body thin pattern-atomic">
<img src="/img/pattern-placeholder.svg" />
</div>
</div>
</div>
</div>
<hr>
Note: You SHOULD replace pattern placeholder svg file with your content!
imgPatternBlue: Blue - pattern-blue.png
imgPatternLightGray: Light gray - pattern-light-gray.png
imgPatternMediumGray: Medium gray - pattern-medium-gray.png
imgPatternDarkGray: Dark gray - pattern-dark-gray.png
imgPatternWorkstation: Workstation - pattern-workstation.png
imgPatternServer: Server - pattern-server.png
imgPatternAtomic: Atomic - pattern-atomic.png
.pattern-blue {
background: url(/img/pattern-blue.png) no-repeat right 0px center;
height: 70px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.pattern-dark-gray {
background: url(/img/pattern-dark-gray.png) no-repeat right 0px center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.pattern-light-gray {
background: url(/img/pattern-light-gray.png) no-repeat right 0px center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.pattern-medium-gray {
background: url(/img/pattern-medium-gray.png) no-repeat right 0px center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.pattern-workstation {
background: url(/img/pattern-workstation.png) no-repeat right 0px center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.pattern-server {
background: url(/img/pattern-server.png) no-repeat right 0px center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.pattern-atomic {
background: url(/img/pattern-atomic.png) no-repeat right 0px center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Fedora background patterns
The example are based from getfedora.org website. Note that the names for the classes presented here differ from the ones that are used on getFedora.
If you want to have the pattern fit your context please specify the height in the scss file get suitable CSS.
Don’t forget to replace pattern placeholder svg file with your content!