I have an image (picture of a lawn) styled with the following:

```
img{
    width: 100%;
    height: 40%;
    position: fixed; <!-- top of page-->
}

```

I have an `<h1> Putnam Lawn Care</h1>` that I would like to have overlap and be centered in the image, but am unsure how to do this with css (I have tried `position:fixed; top: 20%; left: 50%;` but this puts the 'P' of 'Putnam Lawn Care' at 50% so this is also not centered) ? Also I am unsure if fixed positioning is correct here, should I be using absolute? Thanks in advance for any help!