# Insert an image results in background image change

New to Grav but familiar with HTML/CSS/JS.

Tried insert an image into the page:

    ![Photo](avatar.jpg)


The image displays correctly but also displayed as the background image of that particular page, which is not my intention.

Any hints?

@taylorren, That’s quite odd…

• Which theme are your using?
• What template are you using for the page? Eg. default.md, item.md, …
• What’s the frontmatter of that page?
• Have you made any changes to templates/code?

1. Active theme: Quark 2.0.2. Tried to Antimatter 2.2.0, more or less the same issue.
2. The template is blog.md.
3. frontmatter (indention may not represent the actual content due to copy-paste):
title: 任氏有无轩铭名记
content:
items:
- ‘@self.children
limit: 5
order:
by: date
dir: desc
pagination: true
url_taxonomy_filters: true
4. Nope
5. Total 9 plugins, installed bigfoot/mathjax by myself, the other 7 are out of the zipped file.

See a screenshot below.

Source code inspection, 2 occurences of the referenced jpg file:

    <section id="blog-hero" class="section modular-hero hero " style="background-image: url('/user/pages/03.rsywxmmj/avatar.jpg');">
...
<p><img alt="我的照片" src="[/user/pages/03.rsywxmmj/avatar.jpg](http://wiki/user/pages/03.rsywxmmj/avatar.jpg)" /></p>


The <p>...</p> corresponds to my page content but the section part is auto generated, I believe!

I see the problem now. The configuration of that theme says:

If you did not specify a Hero image, it will use the first image found in the page folder… So I guess this question should be addressed to the author on how to disable it.

@taylorren, No need to ask the devs, this can be done by yourself. Overriding templates is a common practice in Grav to adapt the layout to ones own needs.

• First create an inherited theme, else you will loose your changes when Quark gets updated
• Copy file ‘/user/themes/quark/templates/blog.html.twig’ into folder ‘/user/themes/mytheme/templates’.
• Open ‘/user/themes/mytheme/templates/blog.html.twig’ in your favorite editor
• You have 2 options:
1. Show hero only when defined in page header
• To remove the default image, replace line 2 with:
{% set blog_image = page.media.images[page.header.hero_image] %}

• To prevent hero container from being created when no image is defined, replace line 22 with:
{% if blog_image %}
{% include 'partials/hero.html.twig' with {id: 'blog-hero', content: page.content, hero_image: blog_image} %}
{% endif %}

2. Never show hero in blog.md
• Delete line 2 and line 21-23

Hope this helps…

NB. If it works, you might want to close the issue on github.

Thanks. I can do that. Close this one.