Bootstrap: An interactive button embedded within a jumbotron featuring a dynamic image size adjustment

My design includes a jumbotron with a responsive image, where the image scales according to the screen size.

<div class = 'jumbotron'>
   <button type= 'button' id="read" class='btn btn-primary'>Button</button> 
</div>

.jumbotron {
    background: url('img/Banner-logo5.jpg') no-repeat center center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 52.18%;
    /* (img-height / img-width * width) */
    /* (1067 / 2045 * 100) */
}

However, I'm facing an issue where the content inside the jumbotron gets pushed outside of it. Is there a way to keep the content inside the jumbotron while maintaining the responsiveness of the image?

htmlcssimagetwitter-bootstrapresponsive-design

Answer №1

Link to code snippet

*{
    padding: 0;
    margin: 0;
}


div{
    width: 100%;
}
div figure{
    padding-top: 36.56%;  
    display: block;
    background: url("https://st.fl.ru/images/landing/bg2.jpg") no-repeat center top;
    background-size: cover;  
    text-align: center;
    position: relative;
}


button{
    padding: 15px 50px;
    border: 0;
    background: #f00;
    color: #fff;
    cursor: pointer;
    position: absolute; top: 50%; left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
}
button:hover{
    background: #c00;
}
<div>    
    <figure>
        <button type='button'>Click Here</button> 
    </figure>
</div>

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

Adding a background image in Angular is a simple process that can enhance the

Trying to add a background image to my angular application. home-component.html <body> <div style="text-align:center;" class="backgroundimage"> </div> </body> <style> * { margin: 0; ...

htmlcssangularangularjsbackground-image

Creating a Rails application that dynamically fills a table with data from a

Encountering an issue with Ruby on Rails. I have a "Host Model" that contains a method which has a longer runtime. class Host < ActiveRecord::Base def take-a-while # implement logic here end Attempting to access a page where this method ru ...

javascripthtmlruby-on-railsrubyajax

Tips for aligning an image of varying dimensions in the center

Although I've done some research and attempted to splice together code from various sources, including here, here, and other places, I'm still struggling with centering an image on a webpage. The page in question features three layered .png imag ...

javascripthtmlcss

Using PHP to extract information from an HTML checkbox and select the relevant query

I am facing an issue with my HTML file that contains a checkbox element. The code snippet is as follows: <body> <div id="wb_Web_Reports" style="position:absolute;left:329px;top:143px;width:510px;height:244px;z-index:4;"> <form name="Web_Re ...

phphtmlmysqlsql

Unable to add a border to the thumbnail containing text

Is there a way to achieve a nice border on my thumbnail section below? I attempted using a container but it resulted in the text overflowing on md or sm screen widths. <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset ...

htmlcsstwitter-bootstrap

Issues with navigating sliders

I've encountered a problem with my slider arrows while following a YouTube tutorial. They are supposed to appear next to the picture and testimonial, but instead, they are showing up at the top. This issue wasn't present initially, but after enco ...

javascripthtmlcsssliderfrontend

Retrieve information from a webpage with webharvest

I'm attempting to scrape all the HTML pages from the website "http://www.tecomdirectory.com/" using webharvest. However, the script isn't successfully fetching all the HTML pages and is only able to scrape a few of them. Below is the script that ...

htmlwebharvest

Is there a way to address this scrollbar issue without relying on HTML?

Currently, I am working on a website where the only customization allowed is related to CSS. While I've been able to make progress, I've encountered an issue with the scrollbar placement. The scrollbar is extending beyond the boundaries of the di ...

cssscrollbar

What is the best way to transform an HTML table into the Bootstrap grid system without losing any spacing?

To ensure compliance with the Americans with Disabilities Act, I needed to use an unordered list in my cart instead of a table. Unfortunately, this change has caused some issues with the CSS styles that were previously applied. Currently, I am attempting ...

htmlcssbootstrap-4vertical-alignment

Failure to load a picture does not trigger onError in the onLoad function

Is there a way to ensure that an image always loads, even if the initial load fails? I have tried using the following code snippet: <img class="small" src="VTVFile4.jpg" onload="this.onload=null; this.src='VTVFile4.jpg?' + new Date();" alt=" ...

javascriptjqueryhtml

Steps for accessing the `<img>` tag within an `<a>` tag to focus on the `<img>` element in Internet Explorer

How can I target the img tag inside an href tag to set focus on the <img> element? For example: <a href="#"><img class="img1" src="abc.png"/></a> The CSS selector a .img1:focus {} does not seem to work. I am unable to access the ...

cssimagehref

Guide on triggering a bootstrap popup modal using a TypeScript file

I am currently working on an Angular project where I need to launch a popup modal when my function is called. I came across an example on w3schools, but it only contains the HTML logic to open the popup. What I want to achieve is to open the popup from th ...

javascripthtmlangulartypescripttwitter-bootstrap

I am experiencing some issues with my AngularJS JavaScript code. The root scope is updating correctly, but the other two scopes are not working as expected. Can

My attempt at writing AngularJS JavaScript code seems to be malfunctioning. While the root scope updates properly, the other two scopes FirstCtrl and SecondCtrl do not update as expected when the root scope is updated. I would like all three scopes to upd ...

javascripthtmlcssangularjs

What is the functionality of intro.js?

Currently, I am utilizing an onboarding tour at my.bonify.de that provides a similar experience to introjs. The way we have implemented this feature is quite unattractive, using a cutout div with a very large box-shadow. We are looking to enhance it by in ...

javascripthtmlcssintro.js

Attempting to implement CSS onto jQuery slideToggle upon the clicking of links

Need to implement a show/hide functionality for a series of lists using jQuery slideToggle. After clicking on the hyperlinks that trigger the show/hide action, I want to change the CSS style of those hyperlinks and then revert back to the original style up ...

c#jquery.netcssslidetoggle

Using jQuery to update a table, however, the browser is failing to automatically refresh the

I have developed a node.js and sockets app to create a Single Page Application (SPA). The user can fill out a form to create a new lobby. Upon submission, a socket event is sent to the server, where the new lobby is added. The server then emits an event to ...

javascripthtmlnode.jssocket.io

Potential consequences of consistently employing the word-wrap property with the value of break-word

It appears that utilizing word-wrap: break-word (along with its various browser-specific versions) is a common practice for user-generated comments that may be lengthy. I am considering implementing word-wrap: break-word globally across the entire webpag ...

htmlcss

Is it possible to have an input field that is read-only without altering the mouse icon

echo '<input type="text" class="form-control" value="' . $server->address . ":" . $server->connection_port . '">'; Can readonly mode be activated for this input without altering its CSS or the mouse icon when hovering over ...

html

Determine the exact moment at which the value shifts within the table

Looking for assistance in automating the grade calculation process whenever there is a change in table values. Any suggestions on how to achieve this? I am new to events and AJAX, so any help would be appreciated as I am still learning. Please see the ima ...

javascriptphphtmlajax

I noticed a significant space below the footer on my webpage. As a first-time website creator, are there any solutions to this

I'm currently in the process of working on my very first website for a study project using HTML and CSS. There's an issue where there is a large gap below the footer that I can't seem to eliminate. I've only completed 3 pages so far, bu ...

htmlcss