Preview: Resources

#patterns #horizontal #positionbottom #city #skyline

This is a horizontal pattern. Unlike seamless patterns that repeat in all directions, this pattern only repeats horizontally. You can use it in your project either by applying it directly to the body {} CSS rule or by using a seperate .background-pattern div.

CSS:

body {
    background-image: url('https://designfreaks.net/uploads/resources/patterns/patterns_49e99d0f53_1.png');
    background-repeat: repeat-x;
    background-size: auto;
    background-position: bottom;
}

HTML:

<div class="background-pattern"></div>

CSS:

.background-pattern {
    background-image: url('https://designfreaks.net/uploads/resources/patterns/patterns_49e99d0f53_1.png');
    background-repeat: repeat-x;
    background-size: auto;
    width: 100%;
    height: 110px;
    position: fixed;
    left: 0;
    bottom: 0;
}

For testing purposes, you can use the pattern with the URL provided. However, please upload it to your own server or an image host like Imgur or DirectUpload to avoid hotlinking.