Adjust the image size in the jumbotron to fit perfectly without the need for scrolling

I'm in the process of creating a website with a prominent jumbotron section on the landing page. I am looking to adjust the height of the image within the jumbotron without cutting off any parts of the picture, and I do not want it to scroll to display the full image.

{% extends "base.html" %}

{% block style %}
.img{
    height: 750px;
}

{% endblock %}

{% block body %}

<div class="jumbotron jumbotron-fluid img" style="margin-left: 0%; margin-right: 0%; background-image: url('static/Background.jpg'); background-repeat: no-repeat; background-size: cover;">
  <div class="container">
    <h1 class="display-3" style="font-weight: 500">S</h1>
    <p class="lead">Here is where you can learn more about me</p>
  </div>
</div>
{% endblock %}
htmlcssbootstrap-4

Answer №1

I have successfully cracked the solution to this problem. Here is the necessary CSS code:

.jumbotron{
  background-image: url('static/Background.jpg');
  background-repeat: no-repeat;
  background-size:100% 100%;
  padding-bottom:540px;
  margin-bottom: 0px;

}

This section is referred to as the jumbotron

<div class="jumbotron jumbotron-fluid" style="margin-left: 0%; margin-right: 0%;">
    <h1 class="display-3" style="font-weight: 500;">S</h1>
    <p class="lead">This area provides information about me</p>
  </div>
</div>

Answer №2

One way to prevent scrolling is by setting a vertical height of approximately 90 (you can adjust this value as needed; in this example, I used 85) so that the content fills most of the screen while remaining responsive. See the code snippet below for reference.

I hope this aligns with what you were looking for.

.jumbotron {
  background-color: blue;
  background-image: url("https://image.shutterstock.com/image-photo/earth-water-drop-reflection-under-260nw-621430085.jpg");
  background-repeat: no-repeat;
  height: 85vh;
  background-size: 100% 100%;
}

.container {
  height: 100%;
  width: 100%;
}
<div class="jumbotron jumbotron-fluid img">
  <div class="container">
    <h1 class="display-3" style="font-weight: 500">John Doe</h1>
    <p class="lead">This is the about me area </p>
  </div>
</div>

EDIT: Use background-size: 100% 100%; to stretch the image as shown below, ensuring the image has an appropriate ratio

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 an issue with a cropped CSS box?

I have created a CSS box with a red background color, but for some reason the bottom left corner is being cut off. Can you provide an explanation for this issue? (Refer to the image below) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

jquerycss

Leveraging JavaScript to access the margin-top property of the HTML and body tags

I'm having trouble retrieving the "marginTop" style property from the <html> and <body> tags. While Chrome developer tools shows that margin-top is being set via in-HTML CSS: <style type="text/css" media="screen"> html { margin-top: ...

javascripthtmlcss

Setting the value of an <h1> element using data from an API response - A simple guide

I have been attempting to update the title of a page using data from an API. Here is my HTML: <h1 id='league_name'></h1> This is my JavaScript code: <script> fetch('https://api.example.com') .then(response ...

javascripthtmlapi

What is the best way to preserve the updated sequence of a list that can be re-ordered?

I've been tasked with making a re-orderable list for my apprenticeship project. After incorporating drag and drop functionality using Jquery UI, I managed to display the index of each item. However, saving the new order back to the database has prov ...

jqueryhtmlasp.netjquery-ui

Adjusting Nested Divs based on the Content

One issue I'm facing is that the nested div ('content') isn't adjusting its height based on the actual content, specifically my form. The parent div adjusts its height but the child div doesn't. Any ideas on how to fix this? HTML: ...

csshtml

The source of the image gets disrupted when it is not on the homepage

My images are stored in the directory images/icons/artist_default.png On the homepage, the image is displayed with this path: http://localhost:7777/images/icons/artist_default.png However, on a user's page like http://localhost:7777/user/giorgio-m ...

htmlcss

What is preventing my divs from aligning properly?

After trying various methods and conducting thorough research, I am still unable to resolve the issue with my code. Could someone please review it and provide some guidance? Any help would be greatly appreciated. I have experimented with different div wid ...

csshtmlfloating

Leveraging JavaScript for pricing calculations within asp.net framework

I am currently working with a textbox in a gridview and trying to calculate values using JavaScript. My code seems to be error-free. The goal is to multiply the quantity by the rate to get the total price. function totalise(price, rate, qt) { var qt ...

javascripthtmlasp.netgridviewonblur

Clicking on the input triggers the appearance of a border using the OnClick function

I am currently developing my own website with a login feature that requires input tags of text-type. I would like to implement a functionality where clicking on these input tags will display a border, even when the mouse is not directly hovering over them. ...

javascripthtmlcssonclick

What is the best way to change the orientation of a scanner loop animation to

Currently, I have a CSS style featuring an animation that scans across a line in a loop. My goal is to apply this animation to a horizontal line, but I am struggling to figure out how to rotate the scanner for a horizontal loop. Below is my current code. A ...

htmlcss

The margin and width of a div element with the position set to fixed and display set to table-cell are not rendering correctly

Is there a way to keep my .nav-container position: fixed; without creating a gap between it and the .page-content at certain window widths? When I set the position to fixed, a small white line appears between the red background of the .nav-container and th ...

javascripthtmlcss

Retrieve information from the database upon clicking the submit button

My table is not getting data from the database when I click a button. I tried using this code but it returned an error. <div class="wrapper wrapper-content animated fadeInRight"> <div class="row"> <div class="col ...

phphtmlmysql

Menu within a menu, accessed by hovering

<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a href="index.html" class="navbar-brand display-4">NintendoWorlds</a> <button class="navbar-toggler" dat ...

htmlcssbootstrap-4

Dealing with errors in AJAX divs

Utilizing an AJAX-based script known as AJAXTwits, I've been able to seamlessly load multiple Twitter timelines for a sports team into a designated div. The standout features of this script include its ability to combine various timelines into a singl ...

ajaxhtmlerror-handlingtimeout

"Revolutionary AJAX-enabled PHP social commenting system with multi-form support

Why is it that when I submit forms using these ajax functions in PHP, they only send to the first form on the page? I have multiple forms under each article and I want them to be submitted separately. What am I doing wrong? ...

javascriptphpjqueryhtmlajax

Using jQuery for validation using a checkbox

I'm currently working on a registration system that allows users to choose between paying immediately with a credit card or later with a check. Depending on their choice, the fields for credit card information should either be validated or hidden to d ...

jqueryhtmljquery-validate

Placing two texts alongside a logo in a Bootstrap Navbar: Step-by-step guide

As I venture into the world of Bootstrap, I am on a quest to create a Navbar Component similar to this design: https://i.stack.imgur.com/NidKQ.png I attempted to use the Navbar Image and Text code, but encountered an issue where the text would only displ ...

htmlcssbootstrap-4bootstrap-5nav

"Can we have selection options or drop-down menus that are in line with today

Currently working on a website project for a client where I, as a designer learning to code, have integrated three select options. This is how it appears: The client's new requirement is that the arrival date should automatically display as the curr ...

phphtml

Detecting the click area within a window using JavaScript to automatically close an element

Hello everyone, I am currently working on implementing a JavaScript code that is commonly used to detect click areas for closing an element such as a side navigation or a floating division when the user clicks outside of the element. The functionality wo ...

javascripthtml

"Customizing the Material-ui TextField DOM Element: A Step-by-Step

After trying the code below, I was expecting to see a yellowish "Hi," but instead received [object Object]. Is there a way to correct this issue? Possibly utilizing InputProps would help, but I haven't been able to locate a comprehensive tutorial on ...

javascripthtmlcssreactjsmaterial-ui