CODEWITHSUNDEEP
twitter-bootstrap
Behseini
Behseini

Reputation: 6330

How to Use Background Image in BootStrap .carousel-control

Can you please let me know how I can update the .carousel-control CSS to use a background image like This Arrows image?
I tried to update this CSS code by adding the 

position:absolute;
display:none;
top:50%;
margin-top:-28px;
z-index:60;
height: 50px;
width: 51px;
background-image: url(http://www.promap.ca/img/arrows.png);
/*max-height:20%;
max-width:12%;
background-size:200% 200%;*/

To following code but it didn't go through!

.carousel-control {
    position: absolute;
    top: 40%;
    left: 15px;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    font-size: 60px;
    font-weight: 100;
    line-height: 30px;
    color: #ffffff;
    text-align: center;
    background: #222222;
    border: 3px solid #ffffff;
    -webkit-border-radius: 23px;
    -moz-border-radius: 23px;
     border-radius: 23px;
     opacity: 0.5;
     filter: alpha(opacity=50);
 }

.carousel-control.right {
    right: 15px;
    left: auto;
}

.carousel-control:hover,
.carousel-control:focus {
    color: #ffffff;
    text-decoration: none;
    opacity: 0.9;
    filter: alpha(opacity=90);
}

Upvotes: 4

Views: 15865

Answers (4)

Luke Richter
Luke Richter

Reputation: 1

.carousel-control {

width: 54px;
height: 54px;
background: url(images/arrow_slide_sprite.png) -10px 0 no-repeat;
display: block;
position: absolute;
top: 50%;
margin-top: -27px;
z-index: 10;
cursor: pointer;

}

Upvotes: 0

alexd
alexd

Reputation: 11

If you want to use background image and hide default icons

.carousel-control .icon-prev:before { content: ''; }
.carousel-control .icon-next:before { content: ''; }

Upvotes: 1

KyleMit
KyleMit

Reputation: 29977

Bootstrap Carousel Orientation

I'm also not sure where you want this image to go. Where it gets put is very important

Look at this Bootply to see where each of the css background colors gets applied - that's where your image will go:

.carousel .container {
  background-color: red;
}

.carousel-control {
  background-color: green;
}

.carousel .item {
  background-color: black;
}

.carousel-caption h1,
.carousel-caption .lead {
    background-color: yellow;
}

screenshot

Customize Carousel Arrows

I'm guessing that you're trying to customize the arrows specifically since that's the name of your image file.

By Default the arrow image is just a < or > character by using glyphs to specify the content of the anchor tag with the before selector as seen in the bootstrap.css file here:

.carousel-control .icon-prev:before { content: '\2039'; }
.carousel-control .icon-next:before { content: '\203a'; }

You can add whatever content you'd like for left and right arrows by specifying it in the innerHtml of the arrow anchor tags

<div id="myCarousel" class="carousel slide">
  <div class="carousel-inner">...</div>
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <img src="http://i.imgur.com/QPWSDdP.png"/>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <img class="flipped" src="http://i.imgur.com/QPWSDdP.png" />
  </a>
</div>

If you have a different image for the next arrow, you can use that, or you can apply a css class to it and flip it horizontally with the following css:

.flipped {
    -webkit-transform: scale(-1, 1);
     -khtml-transform: scale(-1, 1);
       -moz-transform: scale(-1, 1);
        -ms-transform: scale(-1, 1);
         -o-transform: scale(-1, 1);
            transform: scale(-1, 1);
}

Also, add some css so the carousel image defaults don't apply to your arrows:

#myCarousel a img {
    width:  20px !important;
    height: 40px !important;
}

Demo in jsFiddle

Upvotes: 7

Max Zhukov
Max Zhukov

Reputation: 897

In your code there is broken link and there is no quotes in address.

background-image: url('http://www.promap.ca/img/arrows.png');

Upvotes: 0

Related Questions