I'm looking to embed a button inside an image using CSS. The image is fixed in width and height, centered on the page. The challenge is keeping the button stationary within the image while adapting to different screen resolutions.
I'm looking to embed a button inside an image using CSS. The image is fixed in width and height, centered on the page. The challenge is keeping the button stationary within the image while adapting to different screen resolutions.
If you find that CSS doesn't allow for other elements inside an <img> tag, a common solution is to place both the image and button within separate wrapper <div> elements that act like a table, allowing for both vertical and horizontal centering. Here's how:
HTML
<div class="wrapper">
<div>
<img src="[your image src]">
<a class="button" href="[go to page]">Button</a>
</div>
</div>
CSS
.wrapper{
display: table;
width: 100%; /* Adjust as needed */
}
.wrapper > div{
display: table-cell;
vertical-align: middle;
text-align: center;
}
If there are no size constraints on the image, it should be centered perfectly :). Enjoy!
EDIT ---
Another option is to remove the <img> tag and set the image as a background-image of the .wrapper class while using background-size: cover; for centering. This method provides more control over the image's dimensions.
Don't forget to include vendor prefixes when necessary. A helpful list of them can be found here, although they are written in Sass.
To style your image using CSS:
.image {
background-image:url('picture.jpg');
background-size:cover;
}
Ensure that you assign an ID to your button
In your HTML:
<button id='imageButton' type='submit'> </button>
If you want to position the button where you desire, consider adding some margins:
.wrapper button {
margin-left:81%;
margin-top:3%;
}
However, if your goal is to ensure that the background image in the div does not exceed the window size, further CSS adjustments are needed. You should set a max-width and max-height on the div, as well as specifying fixed width and height for both html and body to provide a frame of reference for the maximum dimensions.
Here's how you can achieve this:
html, body {
width:100%;
height:100%;
margin:0; padding:0;
}
.wrapper {
(..)
margin:0 auto;
max-width:100%;
max-height:100%;
}
For a demonstration, check out the revised fiddle.
I am having some issues with my bubble chart code. The data file I am working with contains instances where the GDPperCapita and/or LifeExpectancy values are either 0 or NaN, causing problems when appending circles to the chart. I would like to know if th ...
I am having an issue with my form submission page. I need to call a function at the time of form submission using AJAX. The form submission should occur or not based on certain conditions in the AJAX response. Below is the code I have, but it seems to be n ...
Thanks to the assistance of (Jan) in my previous inquiry, I successfully tackled the issue of automatic background modification. You can view my previous question here: Automatic background change with JavaScript and CSS However, after changing the backg ...
Is it possible to adjust the width of the input field using the provided starter template? https://getbootstrap.com/docs/4.1/examples/starter-template/ I am specifically looking to reduce the size of this section: <form class="form-inline my-2 my-lg- ...
https://i.sstatic.net/FfAhT.jpg Currently utilizing a jQuery kendogrid Attempting to modify the filter popup to display vertically instead of horizontally. In need of assistance with the styling necessary to achieve a vertical orientation instead. ...
I'm currently working on a quiz application using PHP and Javascript. The quiz begins once the user clicks a submit button, but I want it to end after a specific duration that I define. I'm hesitant to rely solely on the client-side clock as it c ...
Here is the HTML markup that I am working with: <div id="main"> <div id="slider"> <img src=""/> </div> <div class="clear slider"></div> <div class="slider ndslider"> <a href="# ...
I'm attempting to create a reusable "component" using both HTML5 and accompanying JavaScript code that can be utilized multiple times. First, let's examine the HTML5 component code: <div class="listEditor" id="myStringList"> <div id="li ...
Struggling to figure out how to save only the visible area of a canvas after resizing or adding effects? It seems to always save the full image. Is there a way to save just the visible part of the canvas using PHP, JavaScript, or something else? I'm ...
Using a unique animation script (check out ) to enhance the modal dialogs on my website. Below is the CSS code I've implemented: .modal.fade .modal-dialog { -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(0.1); to ...
In my index.html file, I have a script linked using <script src="..."></script> to be executed after the page loads. However, there are times when this script may not be available. In such situations, the client should load and execut ...
Check out my CSS file here for the navigation styling. See the screenshot of my HTML file showcasing the navigation panel here. I'm seeking assistance in making my navigation responsive on all mobile devices, as it is currently not functioning prope ...
(Source: https://i.sstatic.net/nZFuU.jpg.) Hi there, I have two files - one called "header" and the other called "footer". They are both the same size but mirror images of each other. The issue I'm facing is that the width of these files doesn' ...
I've been experimenting with creating a drop-down table row below another one within a semi auto-generated table. After some research, I discovered that directly animating table elements is not possible. However, when I wrapped my table in a div, the ...
I'm facing an issue with the alignment of columns on my website. Each item is represented by an <a> tag within an <li> element, which is part of a larger <ul>. The topmost <li> in each list has a unique class compared to the lo ...
When attempting to modify a h1 tag without changing the CSS, I encountered an issue. Below is the string with and without the JavaScript: String without JavaScript: https://i.sstatic.net/JWOmq.png String with JavaScript: https://i.sstatic.net/RNMur.png ...
Looking to create a layout with an intro section on the left side and a sidebar on the right within a container. Below the intro section, I want four divs evenly spaced like a grid. But I'm struggling with setting up this grid, possibly due to flexbo ...
Currently on my Magento website, I have encountered an unusual issue with the onepagecheckout functionality that needs to be resolved. When progressing to Step 2 and clicking on the continue button after entering all required data, the page automatically s ...
I'm looking for a solution to easily inherit one HTML template(file) from another. Here's how I envision it: parent.html: <h1><!-- header --></h1> <div class="container"> <!-- container --> </div> child.ht ...
After following the guidelines provided on the Facebook Developers page, I attempted to incorporate a like box into my Rails 4 application. Surprisingly, it has always functioned seamlessly in my previous applications. However, in my current project, I am ...