Adding image over another image on the form

Lastly, I am trying to add a jpeg OVER the the star plate, but keep the red banner. Can I do that and how? I was able to add it at one point, but I lost the red banner :(

I am answering this one first, since I think that the space that you want to remove is the one that is used by the smaller image, which is the one that you want to have above the one with the banner - having the smaller image in the middle of this one.

To do this, you can use the following code:

#id_1 {
    margin-top: -100px !important;
}
#id_83 {
    min-width: 100%;
    text-align: center;
}
.headerimg.pngfix {
    height: auto;
    margin-left: -13%;
    max-width: 100%;
}
#id_83 .form-image {
    display: block;
    height: 150px;
    margin: 0 auto;
    position: relative;
    top: 80px;
    width: auto;
    z-index: 9;
}
@media screen and (max-width:768px) {
    .headerimg.pngfix {
        height: auto;
        margin-left: 0;
        max-width: 100%;
    }
    #id_83 .form-image {
        height: 160px;
        top: 110px;
    }
}
@media screen and (max-width:360px) {
    #header > table > tbody > tr td {
        max-width: 240px !important;
    }
    #header > table > tbody > tr:nth-child(2) td div:first-child {
        margin-top: 70px;
    }
    #header > table > tbody > tr:nth-child(2) td div {
        margin-left: -30px;
        text-align: left !important;
    }
    #header > table > tbody > tr:nth-child(2) td div span {
        font-size: 17px !important;
    }
    #id_83 .form-image {
        top: 80px;
    }
}
@media screen and (max-width:320px) {
    #id_1 {
        margin-top: -100px !important;
    }
    #header > table > tbody > tr td {
        max-width: 210px !important;
    }
    #id_83 .form-image {
        height: 100px;
        top: 20px;
    }
    #header > table > tbody > tr:nth-child(2) td div:first-child {
        margin-top: 30px;
    }
    #header > table > tbody > tr:nth-child(2) td div span {
        font-size: 16px !important;
    }
}

There is a lot of code this time, but as mentioned above, it also removes the space at the top and aligns the image above the larger one.

In the same time this holds the code to position the image properly on the desktop devices as well as on the mobile devices.

You can see how it looks by taking a look at this clone of your form: http://form.jotformpro.com/form/52577199331968

If you like it, you can copy paste the code above to your form, or simply clone the form above to your account following these steps: How to Clone an Existing Form from a URL

I will update the other thread about the spacing and will separate the exact part that is lowering the space so that you can adjust it further if needed.

Ben, I don't show the changes on my end? I see them on the link you sent, but when I either go to add the code or clone the form, it does not show up? Any idea why?

I have cloned our colleague's form instead to your account so that all the customization will be on the form already.

Please check your form http://www.jotform.us/form/52578680494166 . You should see it like this

You can start using this form instead of the previous one. If you check your My Forms page http://www.jotform.com/myforms/ you will see the form that have the word (cloned version) on its title/name.

Let us know if you need further assistance.

 

 

I am still here, are you by chance?!

Ok, are you still getting back to me on the other stuff now?

Hi,

Based form your last responses, it seems like you are referring to the fillable PDF version of the form, is that correct? To avoid confusion and for us to better assist you, I went ahead and opened a separate thread for it, please refer to this link instead: http://www.jotform.com/answers/663110. We will address it accordingly.

Thank you for understanding.