Create image background on text box

[Norstar]

Hi does anyone know how i can change this code to allow the image here to become a background image on the text box instead of above the text

{% if widget.service_link %}
    <a href="{{ widget.service_link }}" class="content-box4 sameheight">
{% else if %}  
    <div class="content-box4 sameheight">
{% endif %}

 
        <div class="content-b4">
            <div class="content-b4icon">
                {% if widget.services_icon.src %}
                    <img src="{{ widget.services_icon.src }}" width="{{ widget.services_icon.width }}" height="{{ widget.services_icon.height }}" alt="{{ widget.services_icon.alt }}">
                 {% endif %}
            </div>
            <h5>{{ widget.service_title }}</h5>
            <div class="content-b4text">        
                {{ widget.service_text }}
            </div>
        </div>
    
{% if widget.service_link %}
    </a>
{% else if %}  
    </div>
{% endif %}

[Jsum · Accepted solution]

@Norstar,

Easy stuff. Take the src from your image and apply it to the background with some inline css:

{% if widget.service_link %}
    <a href="{{ widget.service_link }}" class="content-box4 sameheight">
{% else if %}  
    <div class="content-box4 sameheight">
{% endif %}

 
        <div class="content-b4">
            <div class="content-b4icon">
                {% if widget.services_icon.src %}
                    <img src="{{ widget.services_icon.src }}" width="{{ widget.services_icon.width }}" height="{{ widget.services_icon.height }}" alt="{{ widget.services_icon.alt }}">
                 {% endif %}
            </div>
            <h5>{{ widget.service_title }}</h5>
            <div class="content-b4text" style="background: url({{ widget.services_icon.src }};">        
                {{ widget.service_text }}
            </div>
        </div>
    
{% if widget.service_link %}
    </a>
{% else if %}  
    </div>
{% endif %}

 You will want to add this css to either your stylesheet or the head of your template:

.content-b4text {
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background position: center !important;
}

This css sets the background image to not repeat, the size of the image to cover the space (100% width or 100% height with the other being proportionate) and it sets the position to be the horizontal and vertical center of the area. You can adjust any of these if you do not want it to cover the full space or you do not want it to be positioned in the center.