Adding a background image contact us page with Dawn template

[adminwellezone]

Hi everyone,

I know in order to do some changes I have to change the template liquid,ccs and html coding. I have been using Chat GPT plus watching videos on youtube/ forums. And for something as simple as trying to add an image as a background to my contact page has been impossible.

I have added the image in
1)Shopify Admin - files
2) Template edit coding, adding the image as an "asset"

Name of file of the image: assets/pexels-roberto-nickson-2559941.jpg

What is wrong with the whole page code? how should it look like? :

{{ 'section-contact-form.css' | asset_url | stylesheet_tag }}

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round }}px;
}

@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

<div class="color-{{ section.settings.color_scheme }} gradient">
{% assign image_url = 'assets/pexels-roberto-nickson-2559941.jpg' | asset_url %}
<div class="color-{{ section.settings.color_scheme }} gradient" style="background-image: url('{{ image_url }}');">

<div class="contact page-width page-width--narrow section-{{ section.id }}-padding" style="background-image: url('{{ 'assets/pexels-roberto-nickson-2559941.jpg' | asset_url }}')">
{% if section.settings.heading != blank %}
<h2 class="title title-wrapper--no-top-margin {{ section.settings.heading_size }}">{{ section.settings.heading | escape }}</h2>
{% else %}
<h2 class="visually-hidden">{{ 'templates.contact.form.title' | t }}</h2>
{% endif %}
{% form 'contact', id: 'ContactForm', class: 'isolate' %}
{% if form.posted_successfully? %}
<h2 class="form-status form-status-list form__message" tabindex="-1" autofocus>{% render 'icon-success' %} {{ 'templates.contact.form.post_success' | t }}</h2>
{% elsif form.errors %}
<div class="form__message">
<h2 class="form-status caption-large text-body" role="alert" tabindex="-1" autofocus>{% render 'icon-error' %} {{ 'templates.contact.form.error_heading' | t }}</h2>
</div>
<ul class="form-status-list caption-large" role="list">
<li>
<a href="#ContactForm-email" class="link">
{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}
</a>
</li>
</ul>
{% endif %}
<div class="contact__fields">
<div class="field">
<input class="field__input" autocomplete="name" type="text" id="ContactForm-name" name="contact[{{ 'templates.contact.form.name' | t }}]" value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}" placeholder="{{ 'templates.contact.form.name' | t }}">
<label class="field__label" for="ContactForm-name">{{ 'templates.contact.form.name' | t }}</label>
</div>
<div class="field field--with-error">
<input
autocomplete="email"
type="email"
id="ContactForm-email"
class="field__input"
name="contact[email]"
spellcheck="false"
autocapitalize="off"

value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
aria-required="true"
{% if form.errors contains 'email' %}
aria-invalid="true"
aria-describedby="ContactForm-email-error"
{% endif %}
placeholder="{{ 'templates.contact.form.email' | t }}"
>
<label class="field__label" for="ContactForm-email">{{ 'templates.contact.form.email' | t }} <span aria-hidden="true">*</span></label>
{%- if form.errors contains 'email' -%}
<small class="contact__field-error" id="ContactForm-email-error">
<span class="visually-hidden">{{ 'accessibility.error' | t }}</span>
<span class="form__message">{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</span>
</small>
{%- endif -%}
</div>
</div>
<div class="field">
<input type="tel" id="ContactForm-phone" class="field__input" autocomplete="tel" name="contact[{{ 'templates.contact.form.phone' | t }}]" pattern="[0-9\-]*" value="{% if form.phone %}{{ form.phone }}{% elsif customer %}{{ customer.phone }}{% endif %}" placeholder="{{ 'templates.contact.form.phone' | t }}">
<label class="field__label" for="ContactForm-phone">{{ 'templates.contact.form.phone' | t }}</label>
</div>
<div class="field">
<textarea
rows="10"
id="ContactForm-body"
class="text-area field__input"
name="contact[{{ 'templates.contact.form.comment' | t }}]"
placeholder="{{ 'templates.contact.form.comment' | t }}"
>
{{- form.body -}}
</textarea>
<label class="form__label field__label" for="ContactForm-body">{{ 'templates.contact.form.comment' | t }}</label>
</div>
<div class="contact__button">
<button type="submit" class="button">
{{ 'templates.contact.form.send' | t }}
</button>
</div>
{%- endform -%}
</div>
</div>

{% schema %}
{
"name": "t:sections.contact-form.name",
"tag": "section",
"class": "section",
"settings": [
{
"type": "text",
"id": "heading",
"default": "Contact form",
"label": "Heading"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "background-1",
"label": "t:sections.all.colors.label"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
"presets": [
{
"name": "t:sections.contact-form.presets.name"
}
]
}
{% endschema %}

[EcomGraduates]

Based on the provided code, the following is what you can do to add an image as a background to your contact page:

1. In the template file for your contact page, locate the section that you want to modify. You can identify it using the section ID in the code.

2. Add the following code inside the section code:

   {% assign image_url = 'assets/pexels-roberto-nickson-2559941.jpg' | asset_url %}

   <div class="color-{{ section.settings.color_scheme }} gradient" style="background-image: url('{{ image_url }}');">

   Replace the image file name and path with your own image file.

3. Save the changes to the template file.

The code above assigns the URL of the image to the variable image_url and then uses it as the background image for the section using inline CSS. This should set the background image for the section.

If you want to set the background image for the entire page, you can modify the HTML code of the page and add the following code inside the <body> tag:

<div style="background-image: url('{{ 'assets/pexels-roberto-nickson-2559941.jpg' | asset_url }}');">

Again, replace the image file name and path with your own image file. This code adds an inline CSS style to the <div> tag that sets the background image for the entire page.