Issue with background image responsiveness in Bootstrap jumbotron class when resizing the screen

Currently, I am delving into the world of bootstrap as I work on a tribute page for the first time. The issue at hand revolves around the responsiveness of the background image within the jumbotron class. Upon resizing the screen, only half of the image is displayed and requires horizontal scrolling to view it in its entirety. Is there a way to automatically adjust the image so that it fits perfectly within the window?

Although I attempted solutions from this thread (which involved tiling and repeating the image): Responsive Bootstrap Jumbotron Background Image, they did not address my specific concern.

The HTML code in question:

<div id="jumbotron1" class="jumbotron">
   <!-- title text -->
   <div id="title-container" class="container rounded">
       <h1 id="title-text" class="text-center">Hattie McDaniel</h1>
   </div>
</div>

CSS code snippet:

#jumbotron1{
    background-image: 
url('//cdn3.thr.com/sites/default/files/2015/02/hattie.png'); 
   background-size: cover; 
   height: 580px;
   padding: 0px;
   margin-bottom: 0px;
   background-repeat: no-repeat;
}

If the jumbotron class is not utilized, adding an image element with the "img-fluid" class would resolve this matter easily. But how can I achieve that in this particular scenario?

Thank you in advance for your assistance!

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

If you want to center the background position, give this a try:

#jumbotron1{
background-position:center center;
}

Answer №2

Follow these steps to fix the issue:

#header {
background-image: 
  url('//cdn2.example.com/sites/default/files/2018/09/header-bg.png'); 
background-size: cover;
height: 100%;}

For more information, visit https://example.com/a/82917482/4492877

Answer №3

Hey there, could you please incorporate the following styles into your CSS stylesheet?

#jumbotron1{
    background-image: url('//cdn3.thr.com/sites/default/files/2015/02/hattie.png'); 
    background-size: cover; 
    height: 580px;
    padding: 0px;
    margin-bottom: 0px;
    background-repeat: no-repeat;
}

@media (max-width:980px) { 
    #jumbotron1{
        background-image: url('//cdn3.thr.com/sites/default/files/2015/02/hattie.png'); 
        background-size: 100%;
        height: 360px;
    }
}

@media (max-width:768px) { 
    #jumbotron1{
        background-image: url('//cdn3.thr.com/sites/default/files/2015/02/hattie.png'); 
        background-size: 100%;
    }
}

@media (max-width:550px) { 
    #jumbotron1{
        background-image: url('//cdn3.thr.com/sites/default/files/2015/02/hattie.png'); 
        height: 180px;
    }
}

This code utilizes media queries for responsive design purposes.

Answer №4

To ensure the entire background image fits perfectly, consider using background-size: 100% 100%;. This ensures that the dimensions of the background image always match the screen size. Keep in mind that as the screen size decreases, it may appear a bit odd.

Simply add the following code snippet:

#jumbotron1{
  background-image: 
  url('//cdn3.thr.com/sites/default/files/2015/02/hattie.png'); 
  background-size: cover; 
  height: 580px;
  padding: 0px;
  margin-bottom: 0px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

Alternatively, you can use media queries to change the background image at specific breakpoints. This is recommended as the current background image may not look good on smaller screens.

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

What is the best way to combine a navbar with a video background?

Recently, I delved into Bootstrap and attempted to execute a code for a navbar with a video background. This is what my attempt looked like: HTML Code: <html> <head> <title>Medical</title> <meta charset="UTF-8&qu ...

htmlcssbootstrap-4backgroundnav

"Refresh the visuals on canvas by updating images using the file input type in j

Check out jCanvas, a jQuery plugin that I'm using to create a flyer editor: $(function () { initCanvas(); // code for datepicker in French goes here... $('form').on('keyup change paste', 'input, select, textarea&a ...

javascripthtmljquerycanvasjcanvas

Creating files for two HTML pages with Vue: A step-by-step guide

Currently, I am working on creating two HTML files as part of my project structure. This is how it looks: |- node_modules |- public | |- blog | | |- some-page.html | |- index.html |- src (contains all the Vue components) |- Blog.Vue |- Index.Vue ...

htmlvue.jsvuejs2vue-cli-4

Using PHP, JavaScript is unable to hide <div> elements

I'm encountering an issue where the div I want to show when an error occurs is not hiding and showing properly using JavaScript. Here is a snippet of my code: <script> function hideerror() { var catdiv = document.getElementById(error); ...

javascriptphpjqueryhtmlcss

I'm having trouble figuring out how to remove an unexpected blank space that appears after the <li> element in a basic drop-down menu code. Can

Why is the browser (Mac Chrome + Firefox) adding extra space after my simple CSS drop-down menu where I have a hidden sub-menu? Check out the code below: <ul> <li>Option Zero</li> <li>Option One Is Longer</li> &l ...

cssdrop-down-menu

Steps for aligning an image to the right using Bootstrap Vue

I'm currently learning Bootstrap Vue and I'm trying to align an image on the right using a b-card header. The challenge I'm facing is that when I add the image, it disrupts the perfect size of the template header, causing the image to show a ...

cssvue.jsbootstrap-4bootstrap-vue

AJAX - Implementing a delay in displaying AJAX results

My search function uses AJAX to retrieve data from the web-server, and I am trying to implement a fade-in animation for each search result. I want the results to load and fade in one by one with a slight delay between them. Currently, it seems like all th ...

javascriptjqueryhtmlcssajax

Conceal and Reveal Navigation Bar

On a mobile screen, here is how my navigation bar looks: Just to clarify, I am currently only focusing on making the nav bar responsive and not other content. The stylus code for the navigation bar is as follows: -> code in stylus!!! .nav display ...

htmlmobile-websitestylus

Sharing Variables with $(document).ready

I need help understanding why this code is not functioning and how I can fix it. Despite my efforts to use namespaces and IIFEs, I am still unable to make it work. $(document).ready(function() { alert (hi); }); $(document).ready(function() { var hi = ...

javascriptjqueryhtml

Utilizing CSS to style the disabled selection in the absence of an optgroup

I am encountering an issue with a select component that has grouped options and a default option. The CSS styling is not being applied to the option without a group. I would like to change the color of the hidden disabled option to match the placeholder. ...

htmlcss

"Enhance your website with the ability to dynamically load and display

I am facing a little issue and need suggestions because I am struggling with inserting data into an HTML page using the append jQuery function and AJAX request. Within my HTML block, under ul elements, there are some images that I directly insert into the ...

jqueryhtmlajaxappendinstagram

Is there a way to choose the preceding element in Selenium depending on a specific condition?

In my HTML code below: <div class="row"> <div><span class="checkbox"></span></div> <a title="something"></div> </div> <div class="row"> <div><span ...

pythonhtmlselenium

Is there a way to retrieve data from two tables by linking the foreign key in one table to the primary key in another table?

I'm currently working on a menu item and have run into an issue with the information being displayed for the second level submenu (letters). Despite trying various join methods, I am unable to get the correct data - it either pulls only one of my subm ...

phpmysqlhtml

Is it better to return JSON before streaming a file through an iframe or sending HTTP headers?

I have created a form that utilizes a hidden iframe to submit a file to a script which then modifies the file and returns the altered version. I have realized that I can avoid saving the file anywhere by simply using echo file_get_contents(tmp);, where tmp ...

phpjavascripthtmlhttp

I'm curious if there is a method in c3 js that allows for displaying additional x-axis values when zooming in

Is it possible to dynamically increase the x-axis culling values with the c3.js data visualization tool when zooming in? This functionality is provided by d3.js. How can we implement this feature using c3.js? ...

javascripthtmld3.jsdata-visualizationc3.js

Parent container fails to center align when window is resized

When I resize my window to a smaller size, like that of a smartphone screen, the three inner divs (colored red, green, and blue - .left, .center, and .right) do not align in the center. Please refer to the screenshot attached for clarity. My goal is to ens ...

htmlcss

When a condition fails, the default style in the CSS media query does not apply

Whenever the user resizes the browser, my media query for max-width kicks in to make the design responsive. But I'm facing an issue where when the user returns back to the original browser size, the design is still a little messed up and doesn't ...

css

It is not possible to modify the font color in the navbar menu using Bootstrap 4

Despite trying numerous solutions, I am unable to change the font color in the navbar menu. It stubbornly remains black regardless of my efforts. <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a href="index.h ...

bootstrap-4

Background color applied to row elements in div containers

I've been experimenting with integrating table content into CSS floats, but I'm facing some challenges. My current strategy involves using divs at the "table," "row," and "cell" levels. However, I'm not convinced that this is the most effec ...

css

Footer content spilling out of the wrapper div

My web page has a footer content that is overlapping the wrapper div due to some issues with my css and html. Even when I tried changing the height to auto, it didn't resolve the problem. Below is an example of the current state of the page I am worki ...

csshtmloverlapping