background_image.css.twig in Background Image 2.0.x
/* Background Image Styles (https://www.drupal.org/project/background_image). */
{# Wrapper #}
.{{ base_class }}-wrapper {
position: relative;
overflow: hidden;
}
.{{ base_class }}-full-viewport .{{ base_class }}-wrapper::after {
content: '';
display: block;
position: relative;
height: 100vh;
width: 100vw;
z-index: -1;
}
{# Image #}
.{{ base_class }}-inner {
bottom: 0;
left: 0;
overflow: hidden;
position: fixed;
right: 0;
top: 0;
transform: translate3d(0, 0, 0);
z-index: -1;
}
.{{ base_class }},
.{{ base_class }}::before,
.{{ base_class }}::after {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
bottom: -40px;
display: block;
left: -40px;
position: absolute;
right: -40px;
top: -40px;
transform: translate3d(0,0,0) translateZ(0);
}
{# Scroll Full Viewport Blur #}
{% if settings.blur.type == 2 %}
body:not(.{{ base_class }}-full-viewport) .{{ base_class }} {
filter: blur({{ settings.blur.radius }}px);
}
{% endif %}
{# Persistent Blur #}
{% if settings.blur.type == 3 %}
.{{ base_class }} {
filter: blur({{ settings.blur.radius }}px);
}
{% endif %}
.{{ base_class }}::before,
.{{ base_class }}::after {
content: '';
}
.{{ base_class }}-overlay {
bottom: 0;
height: 100vh;
left: 0;
position: absolute;
right: 0;
transform: translate3d(0,0,0) translateZ(0);
}
body:not(.{{ base_class }}-full-viewport) .{{ base_class }}-overlay {
display: none;
}
{# Text #}
.{{ base_class }}-full-viewport .{{ base_class }}-text {
bottom: 0;
left: 0;
position: absolute;
right: 0;
}
.{{ base_class }}-text {
width: 100%;
}
{# Preload Image #}
.{{ background_image_class }}::before {
background-color: {{ settings.preload.background_color|default('transparent') }};
background-image: url("{{ preload_url }}");
{# Blur the preload image so it doesn't appear pixelated. Don't use
settings.blur.radius though as it might not be set. -#}
-webkit-filter: blur(40px);
filter: blur(40px);
}
{# Fallback Image #}
.{{ background_image_class }}::after {
background-image: url("{{ fallback_url }}");
}
{# Media Queries #}
{% for media in media_queries %}
@media {{ media.query }} {
.{{ background_image_class }}::after {
background-image: url("{{ media.url }}");
}
}
{% endfor %}
File
templates/background_image.css.twig
View source
- /* Background Image Styles (https://www.drupal.org/project/background_image). */
-
- {# Wrapper #}
- .{{ base_class }}-wrapper {
- position: relative;
- overflow: hidden;
- }
-
- .{{ base_class }}-full-viewport .{{ base_class }}-wrapper::after {
- content: '';
- display: block;
- position: relative;
- height: 100vh;
- width: 100vw;
- z-index: -1;
- }
-
- {# Image #}
- .{{ base_class }}-inner {
- bottom: 0;
- left: 0;
- overflow: hidden;
- position: fixed;
- right: 0;
- top: 0;
- transform: translate3d(0, 0, 0);
- z-index: -1;
- }
-
- .{{ base_class }},
- .{{ base_class }}::before,
- .{{ base_class }}::after {
- background-repeat: no-repeat;
- background-position: center center;
- background-size: cover;
- bottom: -40px;
- display: block;
- left: -40px;
- position: absolute;
- right: -40px;
- top: -40px;
- transform: translate3d(0,0,0) translateZ(0);
- }
-
- {# Scroll Full Viewport Blur #}
- {% if settings.blur.type == 2 %}
- body:not(.{{ base_class }}-full-viewport) .{{ base_class }} {
- filter: blur({{ settings.blur.radius }}px);
- }
- {% endif %}
-
- {# Persistent Blur #}
- {% if settings.blur.type == 3 %}
- .{{ base_class }} {
- filter: blur({{ settings.blur.radius }}px);
- }
- {% endif %}
-
- .{{ base_class }}::before,
- .{{ base_class }}::after {
- content: '';
- }
-
- .{{ base_class }}-overlay {
- bottom: 0;
- height: 100vh;
- left: 0;
- position: absolute;
- right: 0;
- transform: translate3d(0,0,0) translateZ(0);
- }
-
- body:not(.{{ base_class }}-full-viewport) .{{ base_class }}-overlay {
- display: none;
- }
-
- {# Text #}
- .{{ base_class }}-full-viewport .{{ base_class }}-text {
- bottom: 0;
- left: 0;
- position: absolute;
- right: 0;
- }
-
- .{{ base_class }}-text {
- width: 100%;
- }
-
- {# Preload Image #}
- .{{ background_image_class }}::before {
- background-color: {{ settings.preload.background_color|default('transparent') }};
- background-image: url("{{ preload_url }}");
- {# Blur the preload image so it doesn't appear pixelated. Don't use
- settings.blur.radius though as it might not be set. -#}
- -webkit-filter: blur(40px);
- filter: blur(40px);
- }
-
- {# Fallback Image #}
- .{{ background_image_class }}::after {
- background-image: url("{{ fallback_url }}");
- }
-
- {# Media Queries #}
- {% for media in media_queries %}
- @media {{ media.query }} {
- .{{ background_image_class }}::after {
- background-image: url("{{ media.url }}");
- }
- }
- {% endfor %}