I am facing a challenge where I need to position a form on top of a Responsive Image. My goal is to ensure that the form is responsive as well and adjusts its size according to the image.
As of now, the image is responsive but I am struggling to make the form stay in one place on the image while resizing along with it.
Is there a way to achieve this desired outcome?
Here's the Current Code:
The content below is specific to the form section of the provided page.
In order to enhance the design, I have replaced the image element with a background-image using the resource link for the form. The form fields are enclosed in bootstrap classes for organization.
A minimum height has been applied to the form to maintain the integrity of the background image without distortion.
HTML:
<!--- incorporating bootstrap style sheet -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<!-- form section -->
<section id="contact class" class="container content-section text-center">
<h1 class="brand-heading">Contact</h1>
<div class="container-fluid">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<form id="responsiveForm" action="">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" name="name"/>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="text" class="form-control" id="email" name="email"/>
</div>
<div class="form-group">
<label for="occasion">Occasion:</label>
<input type="text" class="form-control" id="occasion" name="occasion"/>
</div>
<div class="form-group">
<input type="submit" name="submit" class="form-control btn btn-primary" value="go"/>
</div>
</div>
</form>
</div>
<div class="col-md-3"></div>
</div>
</div>
</section>
CSS:
#responsiveForm{
background-image: url("http://s02.justpaste.it/files/justpaste/d233/a9446587/playingcardtemplate_small.png");
background-size: cover;
background-size: 100% 100%;
min-height: 650px;
padding: 80px;
padding-top: 120px;
}
Check it out on Codepen
Edit: When utilizing a background image for your form, ensure to finalize the form's layout first and adjust the image size accordingly for optimal visual appeal.
Consider implementing it this way:
.outerFormBox {
position: relative;
}
.innerFormBox {
position: absolute;
left: 100px;
right: 100px;
top: 120px;
bottom: 140px;
display: flex;
align-items: center;
justify-content: center;
}
In my template, I have 3 tables with the same JSON data as their parent elements. <tbody> <ng-container *ngFor="let row of reportingData.RecommendationData; let i=index"> <tr *ngIf="row.swRecommendations"> <td& ...
I'm currently working on a personal project and encountering an issue with the bootstrap modal. My project involves a list of projects, each one contained within a card element. The problem arises when I attempt to display details for each project by ...
I've been working with a table where I can dynamically add rows using the clone function, as shown below: new_row = $(table_id+' tbody > tr:last').clone(true).removeAttr('id').insertAfter(table_id+' tbody > tr:last&apos ...
I'm currently working on styling the layout of my MySQL database results using a combination of HTML and CSS. My goal is to have all the "hi's" displayed under the column labeled "Good Comment," while the "asasd" and 4 occurrences of "BAD" shoul ...
I'm aware that by default it doesn't behave this way, but I'm attempting to make it do so. I'm in the process of constructing a button-shaped anchor with a solid box-shadow (no blur) to give the appearance of depth, and upon hovering, ...
I’m having trouble figuring out what I’m doing wrong. I’ve added custom files and tried to override the existing ones. application.css.scss @import 'bootstrap-sprockets'; @import 'bootstrap'; /* * This manifest file will be co ...
Issue with embed height=100% not working <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> <head> & ...
Data consists of [one][two][three]. I want to exclude the last set of brackets and have a result like [one][two]. How can this be achieved using jQuery? ...
When it comes to developing a responsive website, which method is superior: utilizing grid systems, employing media queries, or relying on HTML tables? ...
I arranged my social media buttons in a row - Twitter, Facebook & Google+. The issue is that the Google+ button is not aligning properly. It appears to be spaced out about 3 times further than the Twitter and Facebook buttons. I attempted adjusting the p ...
Currently, I am attempting to animate spans, and while the animation is functional, it appears to be somewhat choppy and lacks smoothness. https://codepen.io/pokepim/pen/JBRoay My assumption is that this is due to my use of left/right for animation purpos ...
How can I create a button that generates a random number between 0 and a specified value x when clicked? Currently, my implementation is returning NaN instead of the desired random number. function generateRandomNumber() { document.getElementById("num ...
Using jQuery, I am manipulating the display of an <a> element. Depending on certain keypress events, it adds or removes a class from an <input> element (which controls the display) that is related as a sibling to the mentioned <a>. The i ...
I am currently developing code to determine if a user is logged in. Depending on the user's login status, the content of the "my user" section should vary. When a logged-in user navigates to the "my user" page, an if statement is executed to confirm ...
Is there a way to download a text file using an API in Next.js? The console.log(ninjas) function is already displaying the correct information. I have tested the API with Postman and it works perfectly. When I use GET in Postman, the same information is ...
I am currently experimenting with CSS grid to create a layout that changes based on different screen sizes. Here is what I want to achieve: On a mobile screen, there should be one column that takes up the entire width. This column consists of two sections ...
I am trying to customize my dropdown menu so that when I hover over the main menu item (Sample Page), only the About submenu is displayed, not all of the dropdown menus. li.menu-item.dropdown .dropdown-menu { position: absolute; top: 70px; visibil ...
Currently, I am attempting to utilize jQuery to modify some HTML text by adjusting a slider. I have managed to accomplish this; however, I also need it to happen only if a checkbox is checked. How can I integrate both conditions and ensure that the text ch ...
Recently, I implemented a bootstrap directive that monitors all the input elements on a form and updates the CSS of its parent div to display validation errors in a Bootstrap-friendly manner. The directive checks for the presence of the ng-invalid class in ...
Can anyone provide guidance on how to design a layout similar to the one shown in this image: https://i.sstatic.net/RYAuA.png? I want the image on the left and text on the right, with responsiveness. Any help would be greatly appreciated. Thank you! < ...