2

I'm having problem making the Bootstrap Carousel responsive and scaling height and width of dynamic images. One work around I found was to use: background: url(path_to_image.jpg) no-repeat center center; which seems to work okay.

Now, I'm trying to factor the code into a Flask/Jinja application:

#hp {
    height: 250px;
    width: 100%;
    background-color: gray;
  /*  background: url(https://ununsplash.imgix.net/photo-1427348693976-99e4aca06bb9) no-repeat center center; */
    background-size: cover;
}
<div id="hp" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#hp" data-slide-to="0" class="active"></li>
        <li data-target="#hp" data-slide-to="1"></li>
    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <!-- Wrap slides 1 -->
        <div class="item active">
          <div style="background: url(https://ununsplash.imgix.net/photo-1427348693976-99e4aca06bb9) no-repeat center center / cover;">
              </div>
        </div>
        <!-- Wrap slides 2 -->
        <div class="item"></div>
    </div>
    <!-- codes for Controls follows -->
</div>

For the real code, I've tried the following variations:

<img src="{{url_for('.static', filename='img/works2_big.jpg')}}" class="center-block">

and this one:

<div style="background: url(../static/img/works2_big.jpg) no-repeat center center;">
</div>

I even went ballistic on this one:

<div style="background: url({{url_for('.static', filename='img/works2_big.jpg')}}) no-repeat center center"></div>

still no show. I'm using a Flask blueprint with my static file well defined and contained my working css and js files.

main = Blueprint('main', __name__, template_folder='templates', static_folder='static')

Is there another way I can correctly insert this inline css into jinja?

Afloz
  • 3,625
  • 3
  • 25
  • 31

1 Answers1

0

Try this:

<img src="background-image: url({% static 'img/works2_big.jpg' %})" class="center-block">
user11924382
  • 1