--- layout: default permalink: /background category: utilities title: Background image description: "The background images are specially chosen illustrations to convey a feeling in the introductions to our websites, They are beautiful and high quality images to give the best experience.

The images are full and fixed background to give a sensation of Parallax without Javascript." ---

{{ page.title }} Utilities

{{ page.description }}


Use

Add bg-x to the container that you applied the background. example:

{% highlight html %}
...
...
...
...
{% endhighlight %}

You only need a simple class to create these beautiful backgrounds, even if you need to add window sizes you can use the following:

{% highlight html %}
...
...
...
{% endhighlight %} know more in sizing

Our favorite background.

Random background, It is a background that changes every time the page or window is updated. Perfect for safe sites and daring styles. Its beautiful!

Use : bg-random


{{site.title}} {{site.subtitle}}
Live view
{% highlight html %}
...
{% endhighlight %}
Explosion of red roses.

Use : bg-a


{{site.title}} {{site.subtitle}}
Live view
{% highlight html %}
...
{% endhighlight %}
The stories of the ocean.

Use : bg-b


{{site.title}} {{site.subtitle}}
Live view
{% highlight html %}
...
{% endhighlight %}
FREEZING STORIES FOR LIFE

Use : bg-c


{{site.title}} {{site.subtitle}}
Live view
{% highlight html %}
...
{% endhighlight %}
I love Web Programing

Use : bg-d


{{site.title}} {{site.subtitle}}
Live view
{% highlight html %}
...
{% endhighlight %}
Create your personal background

Use this piece of CSS code to create your own background with the image you want for your project. Create a class in your stylesheet and apply to the container element you want.


{% highlight css %} .my-background { background: linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.3)), url("Your-URL-IMAGE"); background-size : cover; background-repeat : no-repeat; background-attachment: fixed; height : 100%; } {% endhighlight %}