Steps to Embed a Link in a Jumbotron's Background Image

I'm facing a challenge with my jumbotron that has a background image. I want to make the image clickable so that it redirects to another page when clicked.

I attempted to add an image tag with a src attribute, but it ended up overlaying another image on top of the background image I already had.

.jumbotron-fall{
    margin-top: 20px;
    background-image: url("/Users/admin/Documents/Nas/EAN x Twin Cousin tm.jpg");
    background-size: 700px 400px;
    background-position: center;
}

<div class="jumbotron jumbotron-fluid jumbotron-fall text-center row no-gutters">
    <div class="container">
        <a href="fall2018.html">
        </a>
    </div>
</div>
htmlcssbootstrap-4

Answer №1

To create a jumbotron effect, you can enclose the jumbotron div in a link tag.

.jumbotron-fall{
    margin-top: 20px;
    background-image: url("/Users/admin/Documents/Nas/EAN x Twin Cousin tm.jpg");
    background-size: 700px 400px;
    background-position: center;
}

<a href="fall2018.html">
    <div class="jumbotron jumbotron-fluid jumbotron-fall text-center row no-gutters">
        <div class="container">
            ...
        </div>
    </div>
</a>

Answer №2

If you want to wrap the container in an <a> tag, you can do that. Alternatively, you can use absolute positioning for the <a> tag like shown below:

.jumbotron-fall{
  ...
  background-size: 700px 400px;
  background-position: center;
  min-height: 100vh;
  background-repeat: no-repeat;
  position: relative; // <-- CRUCIAL LINE
}

a {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Customizing the font style on a CSS changing table

Below is the CSS code snippet I am using: table.Table12 { border:1px solid blue; } table.Table12 td { border:1px solid blue; width:200px;} table.Table12 a:link { font-weight: bold;} Additionally, here is the HTML code: <table class="Table12" align="r ...

htmlcssfonts

An issue encountered while employing the mix function in LESS within a Rails environment

Applying the less-rails gem. Implementing this code snippet to blend two colors: @base: #ffdc52; @add: #195742; .colour{ color: mix(@base, @add); } Encountering the subsequent error message: Less::ParseError: error evaluating function `mix`: Cannot ...

ruby-on-railscsslessparse-errorless-rails

Invoking partial view via Ajax

I am using Ajax to call a partial view, but it is returning as undefined. This is my controller code: [HttpGet] public ActionResult CallPartial() { if (Request.IsAjaxRequest()) { return PartialView("~/Views/Partial1"); ...

jqueryhtmlajaxmodel-view-controllerpartial-views

Why should <template> be used in Vuetify?

Exploring the possibilities of Vuetify 2.0 in my current project has led me to dive into the v-stepper component, designed for displaying progress through numbered steps. In the example provided in the playground, I noticed the use of the <template> ...

javascripthtmlvue.jsvuetify.js

Push the accordion tab upwards towards the top of the browser

I am working on an accordion menu that contains lengthy content. To improve user experience, I want to implement a slide effect when the accordion content is opened. Currently, when the first two menu items are opened, the content of the last item is disp ...

javascriptjquerycssaccordion

How to configure dropdown options in Angular 2

I have been struggling to set the display of a select tag to the value obtained from another call. Despite my attempts with [selected], [ngValue], [value], and more, I have not been successful. <select class="form-control" [(ngModel)]="selectedRegion" ...

htmlangularselectdefault-valuedisplay

Issues encountered with the functionality of face-api and tensorflow.js within the browser

I've been trying to execute this example in the browser Check out the example here Specifically looking at this code snippet <!DOCTYPE html> <html> ... (Contents of the code snippet) ... </body> </html> Unfortunately, I&apos ...

javascripthtmltensorflow.jsface-api

How can a new <li> element be created without being influenced by certain CSS styles?

I am attempting to enhance my menubar by adding a signup/login item aligned on the right without affecting the other center-aligned items. Essentially, I have an entry named "Login/Sign Up" that should maintain its own unique style while seamlessly blendin ...

javascripthtmlcss

Make sure link opens in the same window/tab

Currently, I am utilizing the Open Link in Same Tab extension on Google Chrome. This extension can be found here. The purpose of this extension is to ensure that all links open in the same window/tab, which is necessary for touch screen kiosk left/right s ...

javascriptjqueryhtmlgoogle-chromekiosk

Troubles with Flex wrap in CSS3 on iOS 10.3.2 browsers (Chrome and Safari)

Before sending me to other similar questions, keep in mind that I have already gone through them, attempted the solutions, and they are not resolving my issue. The problem I am encountering involves the flexbox layout. I am using the flexbox layout for ce ...

htmlioscssflexbox

Generating a list of items to buy using a JSON document

So here's the json file I'm working with: [ {"task":"buy bread","who":"Sarah","dueDate":"2023-10-18","done":false}, {"task":"clean car","who":"David","dueDate":"2023-08-30","done":true}, {"task":"write report","who":"Jenny","dueDate":"2023-09 ...

javascriptjqueryhtmlajaxjson

Tips for creating a dynamic sticky footer

Seeking out a solution for a sticky footer that adjusts its height based on the width of the browser. Creating sticky footers in flexible designs can be tricky. I've come across various suggestions, discussions, and fixes for implementing sticky foot ...

cssfluid-layoutsticky-footer

What is the best way to limit the top margin for a fixed element?

Recently, I came across this code snippet: jQuery(document).ready(function($){ $( window ).scroll(function() { var current_top = $(document).scrollTop(); var heights = window.innerHeight; document.getElementById("sHome").styl ...

jquerycssscrollfixed

Is there a way to ensure that HTML5 audio is responsive when using Bootstrap?

I need help with making my HTML5 audio player responsive in Bootstrap. Here is the code I currently have: <div class="col-sm-4 col-sm-offset-4"> <audio controls style="width: 600px;"> <source src="sample.mp3"> < ...

csshtmltwitter-bootstrapaudioresponsive-design

Ensure that the image's aspect ratio is preserved while adjusting the height of the window on both Safari and Chrome browsers

Trying to style some cards on my website using HTML and CSS, I noticed that the aspect ratio of the cards gets distorted when resizing the window. This issue only seems to happen in Safari, as Chrome handles it fine. I'm not sure which specific comma ...

reactjscssgoogle-chromesafari

Issue with Rendering Rapheal Pie Chart in Internet Explorer 9

I encountered an issue in IE9 where I received the error message "SVG4601: SVG Path data has incorrect format and could not be completely parsed" while trying to draw a pie chart on an HTML5 page using Raphael JS and SVG. The problem arose when the "d" att ...

htmlsvginternet-explorer-9raphaelpie-chart

javascript - Retrieving a JSON string

I am currently working on a stock website where I need to retrieve JSON information from either Google's API or Yahoo's API. To test this functionality, I have used a replacement function to log the data onto a text box for testing purposes. Howe ...

javascriptjqueryhtmljson

Code snippet that will emphasize the active page if there are multiple pages, such as highlighting page 2

My current project involves implementing a script to highlight the current page on a Tumblr blog. I found the script I am using here: $(function(){ $('a').each(function() { if ($(this).prop('href') == window.location.href) { ...

javascriptjqueryhtml

Why isn't my API's JSON Response showing up in PHP?

Having trouble displaying the JSON response from an API call in PHP. Despite confirming that the server, IP settings, and API status are all fine on the provider's end, I am unable to identify the problem. This is how I'm handling the PHP part: ...

phphtmlarraysjsonapi

Anchor links are functioning properly in browsers, yet they do not seem to work in HTML emails sent through Outlook

I am currently dealing with an HTML email that was generated from a Windows application. The template used for this email is designed in a .aspx page. One issue I have encountered is that the links at the top of the email, meant to take the user to a detai ...

htmloutlook