Make the background image within a button stretch to completely cover the button

I need assistance with creating a button that has a large image as its background. The challenge I'm facing is that the image fits vertically within the button, but horizontally it repeats unless I use 'no-repeat', which leaves empty space instead of filling horizontally.

<button class="tiles" style="padding: 0px; background: url(../static/bilder/tür.jpg); background-size: contain; background-repeat: no-repeat" v-if="selectedCategory==''" >

How can I adjust the styling to make the image stretch across the whole width of the button? I don't mind if the proportions get distorted in the process.

htmlcss

Answer №1

To resize an image in CSS, you can either use background-size: 100% 100%; to stretch the image or background-size: cover; to scale the image while preserving proportions.

For more information on CSS background size properties, visit: https://www.w3schools.com/cssref/css3_pr_background-size.asp

Answer №2

To start, you should first eliminate the background-size: contain; from the inline style. Then, you can add this snippet:

button {
   background-size: cover;
}


button {
  background-size: cover;
}
<button class="tiles" style="padding: 0px; background: url(http://www.incendia.net/hexquilts/image112.png);  background-repeat: no-repeat; color: #FFF" v-if="selectedCategory==''">This is test</button>

Answer №3

Experiment with 

background-size: contain;
background-position: center;

You can also test setting a specific size for the background image.

Answer №4

Achieve this look by adjusting the height and width or applying background-size properties according to the parent div, as simply resizing can distort the image.

Opt for a larger image size and position it based on your needs for better results.

I suggest incorporating an image tag with a responsive class to ensure compatibility across various screen resolutions.

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

Combining various postponed JavaScript file imports in the HTML header into a single group

I've been facing an issue with my code structure, particularly with the duplication of header script imports in multiple places. Every time I need to add a new script, I find myself manually inserting <script type="text/javascript" src=&q ...

javascripthtmljquery

Mastering the nav-item class in Bootstrap 4 for optimal navigation functionality

When I look at the examples in the documentation, I have noticed that the .nav-item class is not doing anything when I inspect my nav bar (the class doesn't show up in the console)... Although this isn't a major issue as I can apply my own style ...

cssbootstrap-4

Is there a way to keep my fixed button at a consistent size while zooming on mobile devices?

There are no definitive answers to the questions regarding this issue. Some suggest stopping zoom altogether, while others recommend setting the width, which may not always solve the problem. I am working on a web application designed for mobile use with ...

javascriptcssmobile

What methods can be used to control the URL and back button in a web application designed similar to an inbox in Gmail?

Similar Question: Exploring AJAX Techniques in Github's Source Browser In my application, there are essentially 2 main pages: The main page displays a list of applications (similar to an inbox) The single application page is packed with various ...

javascriptjqueryhtmlajax

ReactJS does not trigger a re-render when changes are made to CSS

I'm curious about the reason why ReactJS does not automatically reapply CSS to child components even when componentDidUpdate() is called. I conducted a small demo where adding a new box doesn't change the color of existing boxes, even though the ...

javascriptcssreactjs

Getting the value of dynamically generated buttons when they are clicked in PHP - a simple guide

In my PHP code, I have successfully created dynamic buttons. However, I am facing an issue where I need to retrieve the value of a specific button when it is clicked, and populate all the information in a form. Below is the code snippet for handling the b ...

javascriptphphtmlcss

Issues with inconsistent behavior of the select option in a form

Having some trouble with my form code. When I checked the web page, there seems to be an extra element that shouldn't be there. You can view the webpage https://i.sstatic.net/pu4ef.jpg. Inspecting it in browser developer mode, I found this extra eleme ...

htmlcss

Assign individual heights to multiple iFrames according to their content's height

Dealing with multiple iframes on a single page. Each iframe is sourced from my domain. The goal is to automatically calculate and set the height of each iframe on the page. The current code sets all iframe heights to match that of a specific iframe: fun ...

javascriptjqueryhtmliframeheight

Make a line break occur automatically after every 7 divs are displayed

Looking to create a grid of equal height and width divs using AngularJS to form a 7x5 square: ---------------------- | | | | | | | | ---------------------- | | | | | | | | ---------------------- | | | | | | | | ---------------------- ...

htmlcssangularjs

Centralizing the Accordion header and expansion icon in React with Material-UI

I'm currently incorporating the Accordion feature from Material-UI library into my React project: My goal is to ensure that the accordion summary (header with "Accordion 1", "Accordion 2") is centered, and the expand icon (arrow) is also centered rig ...

cssreactjsmaterial-ui

Styling a custom Qt class using a CSS selector

I have developed a custom "Slider" widget as a subclass of QWidget and am looking to customize its appearance using Qt's stylesheets. Is there a way to define this widget to the Qt application so that any styling set in the application stylesheet will ...

cssqtqt4css-selectors

Ensuring Proper Alignment of Headers in CSS

I'm struggling to align my header correctly. Despite getting close in Internet Explorer, it looks terrible in Firefox with the code below. I've scoured forums for solutions but the more I try to fix it, the worse it looks. All I want is for heade ...

htmlcsshtml-table

Will my JavaScript function be triggered when the page is resized while printing?

I have a simple HTML layout where I am using the TextFill jQuery library to automatically adjust the text size based on available space. Everything looks good on screen, but when printed, it seems like the page is resized and the JavaScript needs to be re ...

javascriptjquerycss

Having trouble aligning two divs on the same line and adjusting the controls to expand their width when there is extra space

I am currently creating an application using React and Material UI, incorporating the autocomplete control feature. Take a look at the code sandbox I have set up. Here are some concerns: I am aiming to have two autocomplete controls displayed on the same ...

cssreactjsmaterial-ui

Enable divs to be interactively chosen

I have created two selectable divs that function like buttons. By using the left and right arrow keys, I am able to select one of the divs with this code: document.addEventListener("keydown", keyDownDocument, false); function keyDownDocument(e) { var k ...

javascripthtmlcss

What is the best way to transfer the value of a <span> element to a different <div> using jQuery or JavaScript

Is there a way to move or copy the price and insert it into the <div class="info"> using jQuery? The code I'm currently using is returning an unexpected result of "102030". jQuery(document).ready(function($) { $(document).ready ...

javascripthtmljquery

The picture does not occupy the entire page

Here is a simplified version of my HTML and CSS: @keyframes animatedBackground { from { background-position: 0 0; } to { background-position: 100% 0; } } *{margin:0;padding:0;}/*added as requested*/ .background-image { background-im ...

htmlcss

Is there a way to fix the issue of ContextMenu not appearing at the right position within a scrollable

I have a div within an iframe that needs to display a context menu when right-clicked. The div's length may exceed the visible area, making it scrollable. However, the issue I am facing is that the context menu appears in a different position than whe ...

javascripthtmljquerycssjsp

Dynamic VueJS HTML element selection depending on a condition

While working with Vue JS, I have the capability to do <h1 v-if="someCondition">MY TITLE</h1> Is it possible to determine the element type based on a certain condition? For instance, depending on someCondition, I would like my title to be ei ...

javascripthtmlvue.jsvuejs2

How to use jQuery to maintain an image at the top of a div

Within my HTML, there is a primary root div element containing an image. <div id="root"> <img id="msg"/> </div> Using jQuery, I am able to prepend multiple div elements inside the main root div. However, the problem arises when these ...

javascriptjqueryhtml