Hidden background image not shown

While working on a component in vue.js, I encountered an issue where the image is not being displayed within the specified tag:

<b-icon v-if="displayShowHistory && checkRole('showHistory')" class="backlight show-modal-icon" id="historyDoc" @click="showHistory"></b-icon>

.b-icon#historyDoc {
  background: url("../assets/history.png") center;
  background-size: contain;
  width: 32px;
}

Currently, the image is being shown in the console with the attached styles: https://i.sstatic.net/vQdSC.png

What steps should be taken to ensure that the image is displayed correctly on the page? It is currently not visible.

htmlcssvue.js

Answer №1

The size of your background image is too big. Make sure to include the background-size: cover; property in your CSS

Answer №2

It appears that the issue you're encountering is due to the absence of the height CSS attribute. Without specifying the height, your block element will have a height of 0, causing the background not to be visible.

.b-icon#historyDoc {
  background: url("../assets/history.png") center;
  background-size: contain;
  height: 32px;
  width: 32px;
}

If this is an inline element, you might also consider adding display: block;.

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

Steps for setting up Bootstrap Table in Nuxt 3

Currently attempting to incorporate Bootstrap Table into my Nuxt 3 project by following the guidelines outlined in their vue documentation. Unfortunately, I have not been successful in installing it due to the absence of a Nuxt 3 installation guide in th ...

vue.jsnuxtjs3bootstrap-tablenuxt3

Change the size of a custom cursor on click using React

I have customized the cursor on my react app, but I want to make it animate when the user clicks. Perhaps by decreasing its size or some other effect. The cursor is within a component that I've included in my Index.js file. I am unsure how to create a ...

cssreactjscss-selectorsmouse-cursorcustom-cursor

Utilize ng-bootstrap in an Angular CLI project by integrating it with npm commands

I've been attempting to set up a project using Angular CLI with ng-bootstrap, but I'm having trouble getting the style to work properly. Here are the exact steps I followed (as outlined in the get-started page): Create a new project using `ng n ...

javascriptcsstwitter-bootstrapangulartypescript

Is the conditional module require within an "If" statement always executed in nuxt.config.js?

Despite the missing file mod.json, the "require" statement is still executed leading to an error. The condition should have prevented it from entering the "if" block: const a = 1; if(a === 2){ const mod = require('./scripts/mod ...

javascriptnode.jsvue.jsnuxt.jsstatic-site

Setting the default date format in dayjs: A quick guide

Is there a way for me to set the default date and time format to "YYYY-MM-DD HH:mm:ss" in order to avoid unnecessary repetitive code like the following: this.dayjs().startOf("year").format("YYYY-MM-DD HH:mm:ss") this.dayjs().format("YYYY-MM-DD HH:mm:ss") t ...

javascriptvue.jsdayjs

"Enhancing User Experience with Multiple Conditional Checkboxes in jQuery

Having difficulty making a checkbox change some HTML content using JQuery. There is a standard html checkbox with the following attributes <input type="checkbox" name="AQN1" class="checkbox Q1" value="AQN10" id="3mcq"> <input type="checkbox" nam ...

javascriptjqueryhtml

What is the best way to use CSS to center two blocks with space in between them?

My goal is to achieve a specific design: I want two text blocks with some space in between them aligned around the midline of the page (refer to the image). I have experimented with the float property, as well as used margin and padding to create the gap ...

htmlcssalignment

Connecting mysql workbench data using html: A step-by-step guide

I'm currently creating a user interface for a database system using HTML. I'm a bit stuck on how to access and manipulate the database in MySQL Workbench. Does anyone have any suggestions or sample code that could help me connect them? Thanks! ...

htmldatabasewebmysql-workbenchconnector

Shrink video size directly in the browser using JavaScript and HTML5 before storing or sharing it

Is there an optimal method for resizing and potentially trimming a video using Javascript, HTML5 or Webassembly in modern browsers before saving it to the Filesystem? What is the most effective way to edit a video within the browser? Here are some differe ...

javascripthtmlhtml5-videowebassemblyvideo-conversion

What steps should I take to include a Follow - Unfollow Button on my Website?

I need to add a button on my website that allows users to either follow or unfollow a specific game. Here is the table for the follow buttons: Follow Button Table When a user clicks on the button related to the game ID, it should update the game_follow d ...

javascriptphpjqueryhtmlmysql

HTML5 input type Color displays individual RGB values

This code snippet opens up a variety of options for the user to manipulate different color values such as R, G, B, HEX VALUE, HUE, etc. However, the specific requirement is to only extract the Red value. <input id="color_pick"type="color" value="#ff0 ...

javascripthtml

Property-based Angular Material row grouping in a mat-table is a powerful feature that enhances

Is there a way to organize the data in one row with the same ID? Currently, my data looks like this: Data Set: { "id": "700", "desc": "Tempo", "richiesta": "20220087", "dataElab": &quo ...

javascripthtmlangularangular-material-table

Vue Component (Nuxt.js) encountering issue with processing Bootstrap image asset in props style attribute

Attempting to import an image asset using a relative path for a banner component has presented some challenges. The standard method seems to work without any issues. <b-img src="~/static/images/carousel1.jpg" alt="Samyojya Consultants ban ...

vue.jsvue-componentasset-pipelinenuxt.jsbootstrap-vue

Ways to embed an HTML file into another HTML document

I have been attempting to include a footer.htm file in my index.htm document without success. Below is the code I am using. index.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d ...

html

Determination of an arc trajectory using JavaScript

I have been trying to figure out how to replicate this effect. The Red arrowhead remains stationary while the background features a curved path. Currently, I am adjusting the background position to give the illusion of the arrowhead moving along the curved ...

javascriptjqueryhtmlcss

Adjust the height of a div based on the font size and number of lines

I'm trying to create a function that automatically sets the height of a div by counting lines. I managed to get it partially working, but then it stopped. Can someone please help me with this? function set_height() { var div_obj=document.getEleme ...

javascripthtmlheight

The <Button> element is incompatible with popups. (HTML, CSS, JS)

I've been struggling with this issue. I used CSS color values to create a smiley face, but when I added a button it messed up the design (adding an unwanted circle around the center of the smiley). I attempted to synchronize the button tag with the po ...

javascripthtmlcss

Is it possible to generate a unique name from an array without any repeats?

Update: I am not looking to create a single list, but rather a button that generates a random name when clicked. Objective: Generate a random name from an array by clicking a button. The goal is to display one name at a time randomly without repetition. W ...

javascriptjqueryhtmlarraysrandom

Create a variety of tables populated with numerous hyperlinks within each table on a webpage

I have a website where I need to display multiple tables with different data, along with appropriate links within the table cells. Plan: Each table on the webpage represents a different school subject, showcasing performance metrics such as SAT scores, fi ...

javascriptphphtmlmysql

What is the best way to incorporate these elements into my Bootstrap 5 navbar design?

This is the current layout of my navbar, with the logo in the center. I now want to enhance it by adding a search bar and some icons similar to this example: ideal navbar Here is my current navbar for reference: My current navbar <header> <n ...

htmlcssnavbarbootstrap-5