Ensure the div fetches the size of its background image

I have a div that must have an auto width determined by the length of the text inside it. My goal is to display a blue halo as a background image when hovering over the button with my mouse.

Here's the challenge I'm facing: I want the blue halo png image to stretch to match the exact width of the div, creating a distorted effect without maintaining any proportions.

Is there a way to achieve this without specifying an absolute value for the width of the div? And using only HTML and CSS3?

HTML side:

<div class="button">
  <p>Hover here!</p>
</div>

CSS side:

.button {
  width: auto;
  height: 80px;
  line-height: 81px;
  font-family: sans-serif;
  display: inline-block;
}

.button:hover {
  background: url("http://img15.hostingpics.net/pics/300291bluehalo.png") center bottom no-repeat;
}

JSFiddle: https://jsfiddle.net/ynwsmkrz/5/

htmlcssbackgroundsizefetch

Answer №1

To achieve the desired effect, simply include background-size: cover; in the .button:hover code block like so:

CSS:

.button {
  width: auto;
  height: 80px;
  line-height: 81px;
  font-family: sans-serif;
  display: inline-block;
}

.button:hover {
  background: url("http://img15.hostingpics.net/pics/300291bluehalo.png") center bottom no-repeat;
  background-size: cover;
}

This will ensure that the background image covers the entire div without any cropping. I hope this solution proves to be helpful!

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

Using JQuery to switch out images that do not have an ID or class assigned

Currently, I am using a Google Chrome Extension to apply an external theme to a website. Unfortunately, the logo on the site does not have an ID or class that can be used to call it. I am searching for a solution to replace it with a different image. My ...

javascriptjquerycssgoogle-chrome-extension

The CSS property overflow-x:hidden; is not functioning properly on mobile devices despite trying multiple solutions recommended online

Seeking help on a persistent issue, but previous solutions haven't worked for me. Looking to implement a hamburger menu that transitions in from offscreen. The design appears correctly on desktop and simulating mobile, but actual mobile view require ...

javascripthtmlcss

Tips for creating dynamic animations in an opencart dropdown menu

Currently, I am in the process of enhancing my ecommerce website using OpenCart and I have been trying to incorporate a simple animation for the dropdown menu. However, despite applying the transition properties in the code snippet below, it seems that the ...

cssdrop-down-menuopencartdropdownopencart2.x

Hiding Various Sections Based on Checkbox and Date Selections

I'm currently working on an HTML project that involves creating a list of restaurants. I want to provide users with the option to view only the restaurants that are open on a specific day. For example, each restaurant will be contained within its own ...

htmlcheckboxhideshow

Using HTML and CSS to create nested divs floating to the left while also incorporating a

I'm trying to create a simple effect where a fixed height and width div contains a series of child divs that can be scrolled horizontally. However, the children are not floating as expected in the following code: .a {width:200px; height:200px; ...

htmlcsscss-float

jinja2.exceptions.TemplateSyntaxError: instead of 'static', a ',' was expected

My current project involves using Flask for Python, and I encountered an error when running the project from PyCharm. The error message points to line 192 in my home.html file: jinja2.exceptions.TemplateSyntaxError: expected token ',', got &ap ...

javascriptpythonhtmlflask

Discovering JSON data embedded within a script tag in an HTML response using Jsoup

Looking for help with extracting JSON content from script tags embedded in an HTML file. I attempted to use Jsoup without success. Can anyone provide guidance on utilizing JSOUP or another library for this task? Thank you in advance. ...

javaandroidhtmljsonjsoup

Obtain the content from a dynamically generated dropdown menu and incorporate it into a separate file

My website features two dropdown menus - one for selecting countries and another for cities. The country menu is populated with data from a database, and once a country is selected, the city dropdown is dynamically filled with corresponding cities using a ...

phpjqueryhtmlajax

JavaScript Drag Events in Microsoft Edge (Including IE)

My drag event is functioning properly in Chrome, Safari, Firefox, and Opera. However, I encountered an error when running it on Microsoft Edge and IE: SCRIPT438: Object doesn't support property or method 'setDragImage' Below is the code sn ...

javascripthtmldrag-and-dropmicrosoft-edge

Is it possible to dynamically assign a CSS class to a DOM element during a drag operation while the mouse button is held down?

I am currently working on developing a unique pathfinder visualizer. My progress so far includes creating a grid of size 16x45 using the function below: export const drawBoard = () => { const boardContainer: HTMLDivElement | null = document.querySelec ...

javascriptcsstypescriptdom-events

Reveal and Conceal, the ever-changing show

As I work on my blog, I want to make the layout more compact by having a link that reveals comments and entry forms when clicked. I've seen this feature on other sites as "Comments (5)", but I'm unsure how to implement it myself. Below is a snip ...

phpjavascripthtmlcommentsshow-hide

What is the best way to extend a column across multiple rows with bootstrap?

https://i.sstatic.net/uPsLe.jpg Looking to convert the design above into HTML and CSS, specifically trying to achieve a layout where the image spans across 2 rows. However, I've been having trouble making it responsive even after trying some code sni ...

htmlcsstwitter-bootstrap

Tips for centering elements in an image caption

I need some help with separating an image and text within an image caption from each other. Currently, they are overlapping and I want them to be distinct. I attempted using inner div elements for the text and image separately, but it caused issues by brea ...

htmlimagecss

Make changes to the HTML file by directly using Jquery or JavaScript

Allow me to elaborate on my current objective. I have an HTML file that requires direct content updates. Specifically, I am working with elements sharing the 'id=test'. My goal is to dynamically update all elements with unique IDs such as ' ...

javascriptjqueryhtml

Is there a way to assign innerHTML values to table cells using PHP?

I'm currently building a website that relies on a database to store information. I have created an array to hold the values retrieved from the database, and now I need to populate a table with these values. Each cell in the table has a numerical ID ra ...

javascriptphphtml

Creating a visually engaging parallax effect in two columns with differing lengths that align perfectly at the conclusion

Recently, I came across an interesting layout technique on Apple's website that involves two columns with different lengths. As you scroll down the page, one column slows down to align with the other so that they both meet at the bottom. You can chec ...

jquerycsshtmltwitter-bootstrapparallax

Centering navigation using HTML5

I've been struggling a bit trying to build a website, particularly with centering my <nav> tag. Despite reading numerous suggestions like using CSS properties such as margin: 0 auto; or text-align: center, nothing seems to be working for me. Si ...

javascriptcsshtmltwitter-bootstrap

Master the art of displaying complete text when zooming in and elegantly truncating it when zooming out

I am currently working on a data visualization project using d3.js. The tree chart that I have created is functioning well, but I would like the text to react dynamically when zooming in and out. You can find the code for my project on this JSFiddle page. ...

javascriptcssd3.js

Choosing more than one item to submit may pose an issue - the POST request will be empty

One of the challenges I'm facing is with a multiple select feature like the one below: This allows for selecting various options, such as 3 sports in this case. Successful form submission occurs when items are selected correctly. However, if no spor ...

jqueryhtmlformspostselect

Leveraging the power of HTML5's details element for optimized printing

The <details> HTML5 element is used to provide a simple show/hide functionality. While this feature works well on-screen, it poses an issue when printing as any closed <details> elements disappear in the printed version. I attempted to fix th ...

cssprinting