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 -%}

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

{% if section.settings.heading != blank %}

{{ section.settings.heading | escape }}

{% else %}

{{ 'templates.contact.form.title' | t }}

{% endif %} {% form 'contact', id: 'ContactForm', class: 'isolate' %} {% if form.posted_successfully? %}

{% render 'icon-success' %} {{ 'templates.contact.form.post_success' | t }}

{% elsif form.errors %}

{% render 'icon-error' %} {{ 'templates.contact.form.error_heading' | t }}

• {{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}

{% endif %}

{{ 'templates.contact.form.name' | t }}

<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 }}”

{{ ‘templates.contact.form.email’ | t }} *
{%- if form.errors contains ‘email’ -%}

{{ ‘accessibility.error’ | t }}
{% render ‘icon-error’ %}{{ form.errors.translated_fields[‘email’] | capitalize }} {{ form.errors.messages[‘email’] }}

{%- endif -%}

{{ 'templates.contact.form.phone' | t }}

{{- form.body -}} {{ 'templates.contact.form.comment' | t }}

{{ 'templates.contact.form.send' | t }}

{%- endform -%}

{% 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 %}

   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 tag:

Again, replace the image file name and path with your own image file. This code adds an inline CSS style to the

tag that sets the background image for the entire page.