customization - Looking for a way to align log in form fields with background image and scale responsively

admin管理员组

文章数量:1122846

I only know basic CSS and I am not a developer. I am trying to find a way to make a custom log in form on my wordpress site where there is a specific background image (such as of a lined notebook) and the input fields of the log in form aligns exactly with the image (say with the lines in the image). I tested a few Wordpress plugins and the closest I got was to set the image as the page background, enter it vertically and horizontaly, and make the form also centered vertically and horizontaly. This is still not perfect because when the screen size changes, the relative postion of the input fields also change because the form input fields do not scale with the screen size.

I have thought of two ways to fix this but I don't know how to actually implement either:

1. It is easier to design the background image to fit the exact positions and size of the form input fields only if I knew the exact size and positions of the log in form and input fields in pixels, which I don't. The bigger issue is, I need to find a way to center the image as well as the form on a normal desktop sized screen so they are perfectly aligned, but have the image size and position be fixed so that when the screen is narrowed, nothing on the screen changes position or scales, instead, the left and right sides of the background image simply gets cropped off so that the form still remains center aligned with the background image. What is happening instead is the background image scales in size with the resizing of the browser window, but the input fields do not, so when the screen narrows, the input fields look gigantic relative to the background image, which has shunk along with the browser size.

2. Set the image as the background of the form container itself: I tried this. When the screen resizes, the relative position of the input fields and the image do not change, which is great, but the relative position is not correct. The image is small and contained in the form container which is roughly 320px wide by 350px high and does not contain the entire image full size so the form fields are large compared to the background. I tried to increase the actual form size in a plugin but it just moves the form fields to the let and right most side of the form field, like in this screenshot:

So now I am thinking perhaps there is a way to do this with CSS, or if there is a plugin that would allow me to do what I am trying to achieve. Just to clarify: I said CSS because I can add CSS to wordpress but I don't know if it is possible to add anything else, such as bootstrap, but if there are other options, I'd be glad to try it.

Any help/advice would be appreciated.
Thanks

本文标签： customizationLooking for a way to align log in form fields with background image and scale responsively