Responsive div not displaying background image

Here is a straightforward and easy-to-understand code snippet:

HTML markup:

<div class="jumbotron text-center top-jumbotron">
</div>

CSS:

.top-jumbotron {
    background: #ffcc00;
    background-image: url('../../bootstrap/img/home-page-banner.jpg');
    background-size: 100% auto;
    padding: 0px;
    margin: 0px;
    border: none;
}

I have an image that is 2880px wide, and it displays perfectly when I specify the width in pixels using CSS. However, I am hesitant to set hard-coded measurements because I want the div to adapt to all screen sizes from mobile to Retina. Is there a way to make the image appear while using a percentage value for background-size? I prefer not to use the <img> tag in HTML as I plan to overlay text and other elements on the div, hence the background approach.

htmlcssresponsive-designbackground-image

Answer №1

Replace background-size: 100% auto; with background-size: cover;. This adjustment will ensure that the div is filled with the background image.

To center the image, include background-position: center;

If you prefer the entire image to fit within the div, consider using background-size: contain;, although this may result in empty spaces depending on the div size. To prevent tiling, add background-repeat: no-repeat; when using contain.

Make sure to set the height in the CSS if it's not specified elsewhere.

Check out a live example here.

Answer №2

Did you consider utilizing the background-position property in your CSS code?

Here is a suggestion:

.hero-section {
    background: #ffcc00;
    background-image: url('../../images/hero-banner.jpg');
    background-size: cover;
    background-position: center top; /*Include this line*/
    padding: 0;
    margin: 0;
    border: none;
}

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

Need to convert an HTML table to JSON format? Visit convertjson.com/html-table-to-json.htm to easily convert your HTML table

Can anyone help me with converting HTML table data to JSON? I found a website that does something similar: I have tried some solutions but encountered issues at the end. I just need a JSON output to convert it into an array and continue with my project. ...

phphtmljsonruby

How come the buttons in the navbar are not aligning to the right with justify-content-end?

Having trouble aligning the two buttons in my bootstrap navbar to the right. Despite using justify-content-end, it doesn't seem to work. I thought applying d-flex to the container and then justify-content-end to the items would solve the issue, but e ...

csstwitter-bootstrapbootstrap-5

Creating a unique design by displaying text in a modern, diagonally split rectangle using HTML and CSS

To creatively display the diagonal of a fictional rectangle using HTML/CSS, along with text written both above and below it. The main objective is to create a heading for a unique table design in the top left corner. This will help describe the row header ...

htmlcssbootstrap-4

Which Angular Lifecycle event should I utilize to trigger a specific action when either two buttons are pressed or when one of the buttons undergoes a change?

In this scenario, we have a total of 6 buttons split into two groups of 3: one on the top and the other on the bottom. let valuesum; let value1; let value2; let ButtonGroup1clicked= false; let buttonGroup2Clicked= false; function click1 (value){ va ...

javascripthtmlangularfunctionbutton

Showcasing menu options in a double-column layout - MUI Menu

Just starting out with React. I'm using MUI menu to display items in two columns, but I've noticed a significant gap between the menu items when using grid display with repeat 2 and 1fr. display:'grid' , gridTemplateColumns : 'repe ...

cssreactjsmaterial-ui

Styling Fonts in Safari with CSS

Because FixedSys doesn't appear correctly in Chrome or Safari, I switch it to Lucida Console. While this solution works for Chrome, I encounter a problem with Safari. Unless Lucida Console stands alone, the font will not display as desired. If there a ...

htmlcss

Customize background images for the ::after and ::before pseudo elements that span the full height of the webpage

I've successfully centered a <div class="page"> element on my page, and now I'm attempting to add two background images that run along the left and right edges of this container. So far, I've utilized the .page::before and .page::afte ...

htmlcss

Causes for the display of the text within the alt attribute

Recently, I attempted to view an HTML page in text browsers and noticed that the alt attribute value of the img tag was visible. I decided to omit the alt attribute and instead utilized CSS: .headerImg:after, .headerImg::after { conte ...

htmlcssbrowseralt

"Creating a navigational bar using Bootstrap in a one-page application

I am facing an issue with Bootstrap's navbar in my single-page application. The dropdown navigation menu for mobile is not collapsing properly after clicking. Although I tried to fix it by adding data-toggle="collapse" data-target="#navbar" attributes ...

htmlcsstwitter-bootstrap

Is it possible to swap two classes with each other using jQuery?

I am trying to implement a tree view with the following code snippet. Within the tree view, there are spans that have either the CollOpen or CollClosed class assigned to them. How can I toggle between these two classes on click for each span? .tree ...

jqueryhtmlcss

Discover the steps to dynamically alter the inclusion of the Bootstrap CSS file within an Angular project

I manage a multi-language website in both English (EN) and Arabic (AR). Currently, I am utilizing Bootstrap CSS from a CDN and adjusting the CDN link based on the selected language. index.html <!DOCTYPE html> <html lang="en"> <h ...

htmlcssangularbootstrap-5

Consistent manipulation of the DOM through the Drag/Touchmove event

Seeking to incorporate Mobile Components through native Javascript and AngularJS. During my work on developing a Pull To Refresh directive for AngularJS, I utilized the touchmove event on a UL list. The goal was to pull a concealed div over a list with cu ...

javascriptcsshtmlangularjs

Show the text area content in an alert when using Code Mirror

When I try to alert the content of a textarea that is being used as a Code Mirror on a button click, it appears blank. However, when I remove the script for Code Mirror, the content displays properly. I am puzzled about what could be causing this issue wi ...

javascriptjqueryhtmlcodemirror

Is there a way to access the rear camera on a mobile device using webcam.js?

Currently, I am utilizing webcam.js from the following link: https://github.com/jhuckaby/webcamjs. When accessing the website on mobile devices, the front camera tends to open by default. My objective is to switch this default setting to access the rear ...

javascripthtmlgoogle-chromewebcam.js

How can we use jQuery to change the format of a

I'm working on a project where I want the calendar to display the date that the user picks. Right now, my "{{date}}" is in the format 2016-01-11, but it keeps showing one day before the selected date. I would like it to display as mm/dd/yyyy. I belie ...

jqueryhtml

Highchart mortgage calculator for accurate financial planning

I am looking to create a dynamic high chart similar to the one on bankrate.com, showcasing principal, balance, and interest over various years. Despite my efforts, I have been struggling to organize the data by year as demonstrated in the example above: ...

javascriptjqueryhtmlruby-on-railshighcharts

The second post request is encountering an issue where Request.body is not defined

After researching for similar symptoms, I couldn't find a case that matches mine. I have body-parser properly installed and app.use(bodyParser.json()) app.use(bodyParser.urlencoded({extended: true})) configured accordingly. However, when handl ...

htmlmysqlnode.jsexpress

The browser encountered an issue trying to load a resource from a directory with multiple nested levels

I've stumbled upon an unusual issue. Here is a snapshot from the inspector tools. The browser is unable to load certain resources even though they do exist. When I try to access the URL in another tab, the resource loads successfully. URLs in the i ...

javascripthtmlangularjsbrowserstatic-resource

Identify Pressed Shift Key Direction - Leveraging JQuery

I am currently working on a web application that requires users to enter capital letters. However, I want to restrict them from using the right shift key for certain keys like a, s, d, f and the left shift key for h, j, k, l in order to detect whether they ...

javascriptjqueryhtml

Unable to display image on HTML due to the image src not loading

Hey folks! I'm currently working on a TodoApp using react js, and although I have a basic layout set up, I am encountering an issue while trying to add images to the app. Unfortunately, the images are not loading as expected. Sharing the relevant cod ...

htmlreactjsweb