Encountering a CSS problem while attempting to design a section featuring a background image

On this page, I have the login bar on the right and the footer at the bottom. I want a div to sit in the area currently occupied by the background image and fill it with the full background image.

Currently, everything is wrapped in a wrapper and the background image is hidden behind the login section.

<section id="wrapper" class="login-register">

    <div class="login-box login-sidebar">
        <div class="white-box">
            <form class="form-horizontal form-material" id="loginform">
                @{ Html.RenderPartial(SharedPartialViews.Logo.GetDescriptionAttribute()); }

                @if (CurrentURL.Contains("Login"))
                {
                    <div>
                        <h4 style="text-align:center;margin-bottom: -1px; margin-top:5px;">Investor Portal Login</h4>
                    </div>
                }

                @{ Html.RenderAction(nameof(SystemMessagesController.GetLoginSystemMessages), nameof(SystemMessagesController).GetControllerName()); }
            </form>

            @{ Html.RenderPartial(SharedPartialViews.CookieAlert.GetDescriptionAttribute()); }
            <div id="mainBody">
                @RenderBody()
            </div>
        </div>
    </div>
    <div id="backgroundImage" class="" style="position:relative;height:95%!important;width: 75%!important;">
          
    </div>
    <div class="login-footer">
        @{ Html.RenderPartial(FooterPartialViews.Index.GetDescriptionAttribute()); }
    </div>
</section>

The background image div is the one I'm trying to place in that area. Essentially, I want this div to fit to the left of the navigation bar and above the footer while being responsive. I was able to force a fixed-size box into that space with the image, but when the page resized, the image did not resize.

https://i.sstatic.net/M7RiY.jpg

Here are some of the CSS rules that create this layout:

https://i.sstatic.net/4auCD.png https://i.sstatic.net/v6bfm.png

I've tried various solutions. Ultimately, I need a new div container that will fill the area between the login menu and the footer, containing the entire background image without hiding it behind the login menu.

Thank you.

javascripthtmlcss

Answer №1

One effective way to achieve this is by utilizing the grid feature.

Imagine your section as a grid layout with 2 columns and 2 rows. The login footer should extend across both columns. If you want the section to fill the entire viewport, set its height to 100vh.

.login-register {
  display: grid;
  /* image col 2x form col */
  grid-template-columns: 2fr 1fr;
  /* footer row is only as tall as content */
  grid-template-rows: auto min-content; 
  /* height of viewport */
  height: 100vh;
}

.background-image {
  background-image: url(https://picsum.photos/id/48/500/200);
  background-size: cover;
  background-position: 75% bottom;
}

.login-box {
  /* align form vertically in col */
  align-self: center; 
  /* align form horizontally in col */
  justify-self: center; 
  max-width: 20rem;
  width: 100%;
}

.login-footer {
  /* footer spans all columns */
  grid-column: 1 / -1; 
  border-top: 1px solid hsl(0 0% 80%);
  color: hsl(0 0% 60%);
  padding: 1rem 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  font-size: .85rem;
}

* {
  /* make sure to set box-sizing */
  box-sizing: border-box;
  margin: 0;
  font-family: sans-serif;
}


/* just for demo purposes */

form {
  display: grid;
  padding: 1rem;
  gap: .5rem;
}

input {
  padding: .25rem;
  border: 1px solid hsl(0 0% 70%);
  width: 100%;
}

::placeholder {
  color: hsl(0 0% 70%);
}

button {
  padding: .5rem .75rem;
  text-transform: uppercase;
  background-color: hsl(204 72% 30%);
  border: 0;
  color: white;
  width: 100%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
<section class="login-register">
  <div class="background-image"></div>
  <div class="login-box login-sidebar">
    <div class="white-box">
      <form class="form-horizontal form-material" id="loginform">
        <div>
          <h4 style="text-align:center;margin-bottom: -1px; margin-top:5px;">Investor Portal Login</h4>
        </div>
        <label for="email" class="sr-only">Email</label>
        <input type="email" id="email" name="email" placeholder="Email" />
        <label for="pw" class="sr-only">Password</label>
        <input type="password" id="pw" name="password" placeholder="Password" />
        <button type="submit">Login</button>
      </form>
      <div id="mainBody"></div>
    </div>
  </div>
  <div class="login-footer">
    <span>privacy policy</span>
    <span>terms of use</span>
    <span>contact us</span>
  </div>
</section>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Patience is key for a fully completed JSON in JavaScript

I recently came across a similar discussion on Stack Overflow, but it involved using JQuery which I'm not using. My issue is that I need to ensure my JSON data is fully loaded before calling my function. I understand the concept of using a callback, ...

javascriptjsoncallbackxmlhttprequest

Vue.js routing and mixin dilemma

Calling all Vue developers! I am currently working on a vuebnb tutorial and running into an issue with routing and mixins. I have attempted to assign data before entering the router using the beforeRouteEnter guard, but it seems like my template is being r ...

javascriptvue.jsvue-routervue-mixin

The variable "vue" is not properly defined within the instance, yet it is being called

I'm currently working on a Vue app and encountering an issue. The onScroll function is working correctly, but when I click the button component to trigger the sayHello function, I receive an error message. The error states: "Property or method &apo ...

javascriptvue.js

Integration of Unlayer EmailEditor into React causes fatal errors in the application

I am attempting to integrate Unlayer into my React Application by using this guide: https://github.com/unlayer/react-email-editor. I have configured Webpack for this purpose. However, when I try to import EmailEditor in one of my modules: import React fr ...

javascriptreactjswebpackecmascript-6

Retrieve the current date and time data from the database and populate it into a datetime input field

I've encountered an issue while trying to fetch a Datetime value from my database and insert it into an html input with a date type. Unfortunately, the input field appears empty. $resQuery = mysql_query("SELECT * FROM reserveringen WHERE id = $ID"); ...

phphtml

Is it the right time to dive into HTML5 & CSS3?

The excitement around HTML5 and CSS3 is hard to ignore. But when is the right time to start incorporating them into our projects? How close are we to fully utilizing their capabilities? Update: I'm not interested in following the principles of: Grac ...

htmlcss

How can I use CSS to clip the United States, specifically Tennessee and Nashville, from the left side?

For my ASP.NET generated hyperlink that says "select location", when the user clicks on it, they are redirected to a new page where they can choose a different location at /change-location/default.aspx. This could be any country, state, or city in the worl ...

htmlcssasp.net

Submitting the form without utilizing Ajax, but instead sending data directly to a PHP script

I've encountered an issue while posting a form to a PHP file using AJAX. Despite my efforts, the form is bypassing AJAX and posting directly to the PHP file. Here is my form: <form id="editform" name="editform" action="ajaxeditform.php" method= ...

javascriptphpjqueryajax

Formatting Outlook HTML Signatures

I'm currently designing an HTML email signature for Outlook, but I'm having trouble with formatting and ensuring it looks consistent across different devices. When I preview the HTML in my browser, it appears exactly as I intended. However, I am ...

htmlcssoutlooksignature

Issue with input-group background display in bootstrap 4

My new computer is running on Windows 11 with Chrome version 97. There seems to be a bug in the original bootstrap code, as evidenced by the attachment. The issue can be seen on the Bootstrap website By adding "border-radius:0!important" to ".input-group ...

cssbootstrap-4windows-11

Steps to retain localStorage data while redirecting to another external webpage

Encountering an issue with saving localStorage data across redirects. See the code snippet below: // Invoke newSitelogin(). Save response(credentials) in localStorage. Redirect to new URL. newSitelogin({ uuid, password }) .then(() => { window.ope ...

javascriptreactjsgoogle-chromelocal-storageredux-saga

Retrieve the hidden value buried within multiple layers of classes

I'm having trouble retrieving the value from the pickup-address class. Here is my current code. Can anyone help me identify where I might be going wrong? JS var pickupAddress = $('.timeline-item.active-item > .timeline-status > .pickup-add ...

javascriptjquerycss

Vue.Js allows developers to easily set a default selected value in a select dropdown menu

Having trouble with getting the default selected value using select in VueJs. I've attempted two different approaches: Using id and v-model fields in the select like this: <select v-model="sort_brand" id="sort-brand" class="form-control"> ...

htmlselectvue.jshtml-select

A guide on determining the return type of an overloaded function in TypeScript

Scenario Here is a ts file where I am attempting to include the type annotation GetTokenResponse to the function getToken. import { ConfigService } from '@nestjs/config'; import { google, GoogleApis } from 'googleapis'; import { AppCon ...

javascriptnode.jstypescriptnestjsoverloading

Troubleshooting Tips for Node.js and MongoDB Socket Closure Issue

I'm running into an issue while working on the login system for my NodeJS application. Everytime I attempt to retrieve a collection, MongoDB throws me this unusual error. The Error Message [MongoError: server localhost:27017 sockets closed] name: &a ...

javascriptnode.jsmongodbexpress

Struggling with error management while using react-redux during the SignUp process

https://i.sstatic.net/OD2fl.pngWithin my component code, I handle user sign up and error checking. Initially, the error value is null. let error = useSelector((state) => state.authReducer.error); const checkErrorLoading = () => { ...

javascriptreactjsreduxreact-redux

I'm puzzled as to why the background isn't fully covering all of the content on the page

As an IT student, I have been diligently working on creating a website for my assignment. However, I am facing an issue with the background not adjusting properly based on the content placed within it. While one page includes all the sub-divs as intended, ...

htmlcssformatting

Unable to trigger jQuery onclick event on nested div elements

I'm experiencing an issue with my web-page where two buttons at the top are not responding to a sorting function on the nested #byFilter. Despite trying to apply the onclick(function()) method, it doesn't seem to work. Javascript $(document).re ...

javascriptjqueryhtmlcss

How to automatically open JQuery Accordion panels when the page loads

My Accordion loads with the 1st panel open upon page load, but I am looking for a way to have the entire Accordion closed by default. Any help or suggestions on how to achieve this would be highly appreciated. Thank you for your assistance. FIDDLE http:// ...

javascriptjqueryhtmlcss

The Angular $http.jsonp() function can only be executed one time

Upon the first response being successful (alert->done), any subsequent hits will result in an 'error' response. I attempted to resolve this issue by adding some config parameters with 'cache: false', but it still only works the firs ...

javascriptajaxangularjsjsonpangular-http