CODEWITHSUNDEEP
htmlcss
BAST23
BAST23

Reputation: 75

How to embed a hyperlink to CSS background-image: url()

I am modifying a bootstrap template. How can I add element in background-image url()? After I click the image, it will redirect to another website.

<div class="col-lg-6 order-lg-2 text-white showcase-img" style="background-image: url('img/myphoto.jpg');"></div>

Thanks

Upvotes: 0

Views: 965

Answers (1)

Despina Kastani
Despina Kastani

Reputation: 852

This cannot happen as you want. You need do add a anchor link with the redirection link as a wrapper on this element.

But if you want to follow proper HTML formating rules: No inline element can contain a block element, so the proper way is to remove the style attribute from the div and add it to the a

.showcase-img a,
.showcase-img {
 height: 200px;
 width: 300px;
 background-size: cover;
 display: inline-block;
}
<!-- WRONG FORMATTING -->

<a href='https://picsum.photos/' alt="Go to Lorem Picsim">
  <div class="col-lg-6 order-lg-2 text-white showcase-img" style="background-image: url('https://picsum.photos/200/300');"></div>
</a>

<!-- PROPER FORMATTING -->

<div class="col-lg-6 order-lg-2 text-white showcase-img">
  <a href='https://picsum.photos/' alt="Go to Lorem Picsim" style="background-image: url('https://picsum.photos/200/300');">
  </a>
</div>

Upvotes: 1

Related Questions