CODEWITHSUNDEEP
htmlcss
lorrainemutheu
lorrainemutheu

Reputation: 115

Border image on ul tag html

I have downloaded an image of an empty frame

enter image description here

I wanted to use this frame to enclose a list of business hours

<div class="col-lg-5 col-lg-offset-2 col-sm-6">
<div class="content4">
<ul class="grid cs-style" >
<li>
<figure>
<figcaption>
<div class="time-table">
<h3><span class="icon icons-ornament-left"></span> <span class="light">OPENING</span> TIME <span class="icon icons-ornament-right"></span></h3>
                <div class="inner-bg  js--timetable">
                <dl class="week-day" data-day="1">
                <dt>Monday</dt>
                <dd>9:00-18:00</dd>
                </dl>
                <dl class="week-day light-bg" data-day="2">
                <dt>Tuesday</dt>
                <dd>9:00-18:00</dd>
                </dl>
                <dl class="week-day" data-day="3">
                <dt>Wednesday</dt>
                <dd>8:00-18:00</dd>
                </dl>
                <dl class="week-day light-bg" data-day="4">
                <dt>Thursday</dt>
                <dd>9:00-18:00</dd>
                </dl>
                <dl class="week-day" data-day="5">
                <dt>Friday</dt>
                <dd>9:00-18:00</dd>
                </dl>
                <dl class="week-day light-bg" data-day="6">
                <dt>Saturday</dt>
                <dd>9:00-18:00</dd>
                </dl>
                <dl class="week-day closed" data-day="0">
                <dt>Sunday</dt>
                <dd>CLOSED</dd>
                </dl>
                </div>
                        </figcaption>
                    </figure>
                </li>
            </ul>
            </div>
                </div>

But i don't know how to put the image frame over or around the tag. And also how to resize the frame using CSS or HTML attributes to fit exactly around the list.Someone please assist.

Upvotes: 0

Views: 321

Answers (1)

Paulie_D
Paulie_D

Reputation: 114990

Use border-image

Border-image @ MDN

Something like this:

.time-table {
  text-align: center;
  display: inline-block;
  padding: 10px;
  border:60px solid transparent;
  border-image:url(http://www.clipartbest.com/cliparts/dc6/e6E/dc6e6E8oi.png) 80 60 60 stretch;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-lg-5 col-lg-offset-2 col-sm-6"><div class="time-table">
  <h3><span class="icon icons-ornament-left"></span> <span class="light">OPENING</span> TIME <span class="icon icons-ornament-right"></span></h3>
  <div class="inner-bg  js--timetable">
    <dl class="week-day" data-day="1">
      <dt>Monday</dt>
      <dd>9:00-18:00</dd>
    </dl>
    <dl class="week-day light-bg" data-day="2">
      <dt>Tuesday</dt>
      <dd>9:00-18:00</dd>
    </dl>
    <dl class="week-day" data-day="3">
      <dt>Wednesday</dt>
      <dd>8:00-18:00</dd>
    </dl>
    <dl class="week-day light-bg" data-day="4">
      <dt>Thursday</dt>
      <dd>9:00-18:00</dd>
    </dl>
    <dl class="week-day" data-day="5">
      <dt>Friday</dt>
      <dd>9:00-18:00</dd>
    </dl>
    <dl class="week-day light-bg" data-day="6">
      <dt>Saturday</dt>
      <dd>9:00-18:00</dd>
    </dl>
    <dl class="week-day closed" data-day="0">
      <dt>Sunday</dt>
      <dd>CLOSED</dd>
    </dl>
  </div>
  </div>

Upvotes: 2

Related Questions