intro alignment

[walkloud]

Hello - this is a personal issue, not an issue with the theme. I am new to grav (and also new to html/css/twig etc.). I have installed grav and the saturn theme (very nice - thank you for making it), and am attempting to understand how to control some of the page layout.

I figured out by replacing

saturn/img/head-bg.jpg

with another image, it replaces the image used on the site (not too difficult). I also figured out how to add to the user/config/site.yaml file

title: myTitle
intro: myWelcome
intro_avatar: myImage.jpg

to get these to render on top of the background image. What I can not figure out how to do: 1 - see where the background image is actually called in the templates, or in my user/config yaml files, so I could simply handle this with yaml rather than replacing the provided background image

2 - I would like to align the welcome image and message at the top of my background image, rather than in the middle. However, all attempts at modifying the <div class="intro"> in saturn/templates/partials/base.html.twig and it's sub-divs with something like

style="vertical-align: top;"
style="align: top;"

and similar have failed to have any effect on the location of the welcome message.

Any help would be appreciated.

Regards, Andre

[walkloud]

ok, some progress made, but still no luck. found css/custom.min.css where I can make changes that are picked up by the image, such as modifying the text-alignment or capitalization. however, attempting to add vertical-alignment: top; to any/all of the .container, .intro, p.p-intro, img.img-intro has no effect on the layout of the text box within the background image. I've also attempted to add a source="vertical-alignment: top;" in all the <div>s in the `saturn/templates/partials/base.html.twig file, still to no avail...

    <div class="intro">
        <div class="container">
            <div class="units-row">
                <div class="unit-10">
                    <img class="img-intro" src="{{ url('theme://img/' ~ site.intro_avatar ) }}" alt="">
                </div>
                <div class="unit-90">
                    <p class="p-intro">{{ site.intro }}</p>
                </div>
            </div>
        </div>
    </div>

[walkloud]

ok - there was a padding in the .intro that was causing me trouble

.intro {
    width: 100%;
    height: 272px;
    padding-top: 117px;
    background: url(../img/head-bg.jpg) #F7F7F7 center 35%;
}

If I change the padding to 10px or something, then the text box goes to the top!