"Utilizing a background image within a component to completely cover the entirety

Hey everyone, I need some help with a confusing issue.

I'm currently working on an AngularJs project and I am struggling to set a background image for a specific component without affecting the entire application. My goal is to have the image cover the full width of the browser window. However, I am facing an issue where there is a white space at the bottom of the component, which gets larger on bigger screens.

You can see in this image that the background image (1) cuts off where the container ends

The purple line serves as a border to indicate the container.

Component CSS

.align-text-message{
    text-align: center;
}

.content-data{
    margin-left: 3%; 
    margin-top: 2%;
}

.fondo_seccion{
    background-image: url("../../assets/img/fondo_datos.png");
    height: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 0.75%;
}

.menu-dashboard{
    opacity: 0.9; 
    margin-top: -2%;
}

.infoUser{
    margin-top: 4%;
}

@media only screen and (max-width: 600px) {
    .content-data{
        margin-left: 0%;
        margin-top: 15%;
        z-index: -1;
        position: absolute;
    }

    .menu-dashboard{
        min-height: auto;
    }
}

Component HTML

<div class="infoUser">
  <div class="row">
    <div class="col-md-10 menu-dashboard">
      <app-dashboard></app-dashboard>
    </div>
  </div>
  <div class="row fondo_seccion">
    <div class="col-md-11 content-data">

      <div class="form-group" [hidden]="!basicLevelFormComponent.userNoInfo">
        <div class="alert alert-warning align-text-message" role="alert">
          You haven't entered your information yet!
        </div>
      </div>

      <div class="form-group" [hidden]="!basicLevelFormComponent.fatalError">
        <div class="alert alert-danger align-text-message" role="alert">
          We couldn't load your information!
        </div>
      </div>

      <div class="form-group" [hidden]="!basicLevelFormComponent.infoSuccess">
        <div class="alert alert-success align-text-message" role="alert">
          Information updated successfully!
        </div>
      </div>

      <div class="form-group" [hidden]="!basicLevelFormComponent.userNotify">
        <div class="alert alert-warning align-text-message" role="alert">
          {{basicLevelFormComponent.messageNotify}}
        </div>
      </div>

      <app-basic-level-form [hidden]="!showBasicLevelForm"></app-basic-level-form>
      <br/>
    </div>
  </div>
</div>

I've attempted moving the "fondo_seccion" class from its current position to where "infoUser" is located in the HTML but unfortunately, it did not solve the issue.

htmlcssangular

Answer №1

If you want an element to cover the entire height of the browser screen, it should have a height of 100% instead of auto. However, in order for this to take effect, the HTML, BODY, and any other parent containers of that element must also be set to height: 100%.

Therefore, both "fondo_seccion" and "infoUser" would need to have their height set to 100%, along with any parent divs as well as the html and body elements.

html, body {
    height: 100%;
}

.fondo_seccion{
    background-image: url("../../assets/img/fondo_datos.png");
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 0.75%;
}

.infoUser{
    margin-top: 4%;
    height: 100%;
}

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

Having trouble toggling the navbar on and off in mobile. Error message: Unable to read parentnode of undefined

When I try to make my mobile navbar full screen on a mobile device, the hamburger button works as expected when clicked. Initially, all the links are displayed in full page view, but once I click on a link, it disappears and takes me to the respective sect ...

javascripthtmlcss

How can we centralize an image above text within a UL element?

Is there a way to achieve the effect shown in my mockup using just one unordered list (ul) instead of having separate ul elements for images and text? Essentially, I want to display an image with associated text below it within a single ul element using CS ...

csshtml-lists

What specifications need to be set up for server and client configurations when using a MEAN Stack application?

When preparing to launch a mid-level enterprise application for the MEAN Stack, what specific configurations are required? How should these configurations be implemented with Angular 2/4/5 and NodeJS? ...

node.jsangularmongodbexpressmean-stack

Limit the elements in an array within a specified range of dates

Currently, I am working on implementing a filter functionality for a data array used in a LineChart within my Angular application using TypeScript. The structure of the data array is as follows: var multi = [ { "name": "test1", "series": [ ...

javascriptangulartypescript

Refresh the data in a table upon clicking the menu

I am looking to develop an accordion MENU, but unsure if I should use divs or <ul>. When a submenu is clicked, I want to execute a mysql query to update the data in the table next to the menu. I'm not sure of the best approach and whether to uti ...

phphtmlcssajax

Changing the color of a div's text based on its content with CSS

I am facing a challenge in styling the text inside a “div” element using a Javascript function. Initially, when the page loads, these “divs” contain no value. The values of the "divs" will change between "Open" and "Closed" twice a day when the Jav ...

javascripthtmlcss

Turn off images using Selenium Python

In order to speed up the process, I believe that disabling images, CSS, and JavaScript can help since Webdriver waits for the entire page to load before moving on. from selenium import webdriver from selenium.webdriver.firefox.firefox_profile import Firef ...

javascriptpythoncssseleniumselenium-webdriver

The text that follows the cursor seems to stand out taller than the rest

When I type words in a textarea input field, the cursor seems to be taller than it should be (as shown below). What is causing this issue and is there a way to make it as tall as the words with a font size of 38px? Here is the code snippet: <textarea n ...

htmlcss

Switching from a click event to a hover event in JavaScript

I've been experimenting with animating a burger bar on hover and came across an example online that I managed to adapt for mouseenter functionality. However, I'm struggling to make it revert back to the burger bar shape once the mouse leaves on m ...

javascriptjqueryhtmlcss

What is the solution for resolving the "cannot resolve" issue in CSS for an Angular project?

During a small project I was working on, I decided to add a background image to another image using CSS. Here is the code snippet: .child2 img { width: 200px; height: 200px; border-radius: 50%; background-image: url('./assets/images/imageb ...

cssangular

Sleek carousel design with optimal spacing between images

Solving the Issue Utilizing Ken Wheeler's Slick plugin has allowed me to create a carousel on my website. However, I've encountered an issue where the images inside the <a> tag aren't evenly spaced and are even overlapping in some ins ...

javascriptjquerycss

Auto-collapse sidebar upon clicking anywhere on the page

I have a dynamic sidebar that appears when the user clicks on a hamburger button. Here is the layout: $('#nav-toggle').click(function() { if($('#nav-toggle').hasClass('active')){ $('.menu').animate({ r ...

javascriptjqueryhtmlcss

PHP is struggling to retrieve the value of "img src"

CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form action="./test2.php" method="POST"> ...

phphtml

Transforming JQuery Output into an HTML Table Layout

Hello there! I am currently working on parsing an XML file within my web page using jQuery. Here is a snippet of the code: function loadCards(lang) { $.ajax({ type: "GET", url: 'data.xml', dataType: "xml", suc ...

javascriptjqueryhtmlxml

Utilizing Isotope JS on your Wordpress website

I'm in the process of integrating the .js plugin, Isotope, into my Wordpress installation. It should be positioned at the bottom of this page: To achieve this, I am referring to an example on codepen: https://codepen.io/desandro/pen/mEinp The script ...

javascriptjquerycsswordpress

How can I showcase the Junit HTML report in Karate DSL, as outlined in the official Karate documentation?

After following the Karate Doc and pasting the Junit HTML Report into my browser, I was surprised to see that the output was in plain text and did not look anything like what was described in the tutorial video. I attempted to view it on both Firefox 57.0. ...

htmljunitkarate

What is the method for selecting the desired month on a primeng calendar with multiple selection enabled?

I am looking for a solution to make my inline primeNg Calendar display the month of a specific date in the model, and when I remove dates from the model, I want it to show the current month. I have tried using defaultDate={{value}} and minDate={{value}}, a ...

javascriptangularprimengprimeng-calendar

Exploring the Benefits of jQuery History Plugin, Optimizing with Google Sitemap and

Despite searching online, I have yet to find a precise solution to my query. On my index.php page, there are two specific DIV's: #post-title and #post-content, whose content is dynamically loaded through a jQuery function triggered by clicking a link ...

javascriptjqueryhtmlajaxseo

Getting the Class name in Typescript

How can you retrieve the class name from within a Class in typescript? For instance, consider this code snippet: export class SomeRandomName extends AbstractSomething<SomeType> implements OnDestroy { className = 'SomeRandomName'; Is th ...

angulartypescriptclassclassname

Unable to configure AngularJS inputs to have a blank default value

I am facing a peculiar issue where I am unable to initialize my input fields as blank/empty. Even after clearing the cache and performing a hard reload, Google Chrome seems to be auto-populating them with older cached values. Here is the current view: ht ...

javascripthtmlangularjs