CSS causing black bars to appear when image is moved

I recently started working with HTML/CSS and JS, but I've encountered a small issue. I'm using the bootstrap carousel and it's functioning well, but when I try to move the image higher up, black bars appear at the bottom as if my images are being automatically cropped.

Adjusting the "bottom" to 50px causes these black bars, even though my goal is simply to shift the image upwards. Since it's a full image, I know there's content below. Does anyone have any insight into what might be happening?

  #img1 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0.5;
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
  <ol class="carousel-indicators">
    <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
    <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="overlay-image" id="img1" style="background-image:url(./images/madeira3.JPEG);"></div>
      <div class="container">

https://i.sstatic.net/TTd9KrJj.png

https://i.sstatic.net/7oVVlFpe.png

htmlcssbootstrap-5carousel

Answer №1

The issue you're facing is a result of moving the element containing the image upwards.

Since your image is configured as a background image, you can utilize background attributes to adjust the image position.

To resolve this problem, consider implementing the following:

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

This code will center the image both horizontally and vertically

#img1 {
    background-size:cover;
    background-position:center center;
}

This code will align the image horizontally at the center and vertically at the top

#img1 {
    background-size:cover;
    background-position:center top;
}

If you wish to trim off the top 50 pixels of the image, you can specify pixel values like so:

#img1 {
    background-size:cover;
    background-position:center -50px;
}

Answer №2

#img1 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    opacity: 0.5;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding-bottom: 50px;
}

Answer №3

  #img1 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0.5;
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
  <ol class="carousel-indicators">
    <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
    <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="overlay-image" id="img1" style="background-image:url(./images/madeira3.JPEG);"></div>
      <div class="container">

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

Left-aligned arrow for Material UI select dropdown

Just starting out with material ui and I'm trying to grasp a few concepts. I have a basic select component but encountering two issues. Firstly, I'd like to move the arrow icon of the select to the left side instead of the right. Additionally, ...

cssreactjsmaterial-uiposition

Stop an animation while it is in the hover state

Currently experimenting with CSS3 Animations to create a Panoramic view using only CSS and no JavaScript. I have managed to create a somewhat working demo: http://www.example.com/images/panoramic/ The concept is simple: when the user hovers over the blac ...

animationcss

Steps for adding a navbar that slides horizontally and overlaps other links on a webpage

I am attempting to design a sliding navigation menu using JQuery. The concept involves having multiple main sections, each with several subsections. When a user hovers over a section, the subsections will expand horizontally. If another section is current ...

jqueryhtmlcssnavbar

Switch between different classes with JavaScript

Here is the code that I am working with: This is the HTML code: <div class="normal"> <p>This is Paragraph 1</p> <p>This is Paragraph 2</p> <p>This is Paragraph 3</p> <p>This is Paragraph 4&l ...

javascripthtmlcss

How can you ensure that it selects a random number to retrieve items from an array?

I am experiencing an issue with some code I wrote. Instead of displaying a random object from the array as intended, it is showing the random number used to try and display an object. <html> <body> <h1>HTML random objects< ...

javascripthtml

The Angular Material autocomplete panel does not disappear when autocomplete is hidden within a scrollable region

https://i.sstatic.net/0eS4M.gif Having encountered a bug, I have raised an issue for it (https://github.com/angular/components/issues/20209). I am reaching out to inquire if there exists any workaround or solution known to anyone. You can observe the pro ...

htmlcssangularangular-material

What is the best way to expand and collapse a mat-expansion-panel using a button click

Is it possible to expand a specific mat-expansion-panel by clicking an external button? I've attempted linking to the ID of the panel, but haven't had any luck... <mat-expansion-panel id="panel1"> ... </> ... <button (click)="doc ...

htmlangularangular-material

Uploading videos with Node.js

What is the best package for uploading videos in Node.js and saving them to a database? ...

htmlsqlangularjsnode.js

jQuery Load - Oops! There seems to be a syntax error: Unexpected token <

Error: Uncaught SyntaxError: Unexpected token < I encountered the error message mentioned above while trying to execute a jQuery load function: $('#footer').load(UrlOfFooterContent); The variable UrlOfFooterContent holds the URL of an MVC c ...

javascriptjqueryhtml

What is the best way to retrieve the previously chosen item from an array?

I have successfully implemented dynamic pill tabs with one minor issue remaining. The most crucial aspect is that when I remove a pill, I want it to return to the previously opened tab. I have provided a StackBlitz example without routes on this page: -> ...

javascripthtmlcssangularangular-material

I'm having trouble getting Jquery's insertAfter() function to function properly

After creating a parent div and using jQuery's insertAfter() method to insert additional divs, an unexpected issue arises. The first record goes to the bottom, while subsequent records are inserted above it. Below is the function in question: functi ...

jqueryhtmlinsertafter

Using Jquery to switch between different CSS styles

I'm currently working with a jQuery code that is functioning properly. $(window).load(function() { $('.menuBtn').click(function(e) { e.preventDefault(); (this.classList.contains('is-active') === true) ? this.c ...

jquerycss

Looking to incorporate Slick Carousel as the main slider on my website for a dynamic hero section using JavaScript

Currently in the process of expanding my knowledge in javascript, I am now delving into setting up Slick Carousel. It is essential that it functions as a hero slider on my website. If you are interested in checking out Slick Carousel on github, feel free ...

javascripthtmljquerycssslick.js

Is it better to store CSS and JavaScript in separate files or within the main HTML document

While the best practice is to place JavaScript and CSS code in separate files (such as .js and .css), many popular websites like Amazon, Facebook, etc. often include a large portion of their JavaScript and CSS code directly within the main HTML page. Whic ...

javascripthtmlcssweb

Boxes not occupying entire vertical space

My structure is unique, like a 9-box with div elements: <div class="NBWrapper"> <div class="NBTopRow"> <div class="NBLeft" /> <div class="NBRight" /> <div class="NBMiddle" /> </div> & ...

css

Delete any classes that start with a specific prefix

Within my code, there is a div that holds an id="a". Attached to this div are multiple classes from different groups, each with a unique prefix. I am uncertain about which specific class from the group is applied to the div in JavaScript. My goal is to r ...

javascriptjquerycss

What's the best way to ensure my website's footer spans the entire width of the webpage?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Elena Brown | Graphic Designer</title> <link rel="stylesheet" href="CSS/normalize.css"> <link href=' ...

htmlcss

Resolve the issue pertaining to the x-axis in D3 JS and enhance the y-axis and x-axis by implementing dashed lines

Can anyone assist with implementing the following features in D3 JS? I need to fix the x-axis position so that it doesn't scroll. The values on the x-axis are currently displayed as numbers (-2.5, -2.0, etc.), but I want them to be shown as percentag ...

javascriptcsstypescriptd3.jsbar-chart

Is it true that document.execCommand only works with buttons and not links?

Below is the code snippet I am working with: <div contenteditable="true" style="height:100px;width:100px;border:1px solid; " class="editor"></div> <a class='bold' style="height:10px;width:10px;">B</a> $(function(){ ...

javascriptjquerycssrich-text-editor

The start screen fails to display when clicking the restart button

I am struggling to get the restart button to display the start screen again. Even though I have called the restart function within the clearColors function, which should show the start screen, it hasn't been effective so far. Initially, in the fadeOut ...

javascripthtmlcssfunctionhtml-table