Html Question posted in
Some basic documentation can be found here.

Html – Black bars appearingwhen moving image in CSS

I started using HTML/CSS, JS about a week ago and have ran into a slight problem. Im using the bootstrap carousel and its working great however when i try to move the image more to the top, i end up getting black bars on the bottom, its like something is automatically cropping my images.

When I adjust "bottom" to 50px, i get those black bars, but my intention is to just shift the image up. its a full image so i am 100% sure there is stuff below there. Anyone know whats going on?

  #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">

Before adjusting bottom position

After adjusting bottom position

Tags:

3

Answers


  1. 0

    The problem you are encountering is because you are moving the element that displays the image up.

    You have your image set as a background image, so you could use background attributes to position the image.

    Doing something like this may help:

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

    This will position the image centre both horizontally and vertically

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

    This will position the image horizontally centre and vertically top

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

    You can also add pixel values, say you want the top 50pixels always trimmed off,

    #img1 {
    background-size:cover;
    background-position:center -50px;
}
    Login or Signup to reply.
  2. 0 
    #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;
}
    Login or Signup to reply.
  3. 0 
      #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">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search