Hello,
I am trying to make a form on top of a picture and have used the CSS from other examples on the internet but have had no luck being able to do this on my own pages. Its for a subscription form on a picture i already have made. I am curious what CSS i need to use on this theme to make it happen since something seems to be blocking the form from going on top of the picture.
The following is just one of the attempts ive tried to make this work.
.big-img {
/* The image used */
background-image: url(“https://unfancyfood.com/wp-content/uploads/2018/09/2.png”);
min-height: 380px;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
/* Add styles to the form container */
.formcontainer {
position: absolute;
right: 0;
margin: 20px;
max-width: 250px;
padding: 16px;
background-color: blue;
}
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* Set a style for the submit button */
.btn {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.btn:hover {
opacity: 1;
}
