How can I ensure that the image fits perfectly within the box using HTML and CSS

I'm having trouble displaying an image perfectly within my div. The image doesn't cover the entire box. Here is my code:

.card-background{
  background-image: url("../../../assets/imgs/back-blank.png");
  border-radius: 10px;
  margin-top: 2%;
  height: 180px;
  background-size: contain;
  background-repeat: no-repeat;

}

<div class="card-background">
</div>

My image is 1200 px wide, which should be enough to cover the div. I want it to fit perfectly inside the div.

If I use background-size: cover;, the image gets cropped in the div. Here is the image:

htmlcss

Answer №1

implement background-position: center;

Answer №2

Give this a shot 

.new-background{
  background-image: url("../../../images/background.jpg");
      border-radius: 15px;
      margin-top: 3%;
      height: 200px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: bottom;
    }

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

Preventing overlapping of a "position-fixed" element with variable size: Effective strategies

I am trying to keep a fixed element visible at the top of the page while also having content with varying heights. Here is the CSS code for the fixed element: div.topfloat { position: fixed; top: 0; width: 100%; } The issue I'm facing is ...

htmlcss

What is the best way to showcase an image using CSS on my personal computer?

It's a bit embarrassing to admit, but I'm learning some new concepts and struggling with this one. On my computer, there's a folder named Test that contains an index.html file, a CSS subfolder with an index.css file, and an images subfolder ...

htmlcsslocal

How can I connect an HTML page to an MS-Access database?

Hello everyone, I am looking to connect an HTML page to an Access database. If anyone has the HTML code for searching that database, I would greatly appreciate it. Thank you! I am using Access 2010. ...

htmldatabasems-access

CSS: concealing certain portions of an element's content

I don't have control over the following markup: <p class="filename"> <img src="http://domain.com/uploads/image_gallery/_thumbs/Chrysanthemum.jpg" alt="Chrysanthemum.jpg"> <br> Chrysanthemum.jpg </p> Is it possible ...

css

What are the steps to connecting incoming data to an Angular view utilizing a reactive form?

Hello, I am currently fetching data from an API and have successfully displayed the teacher values. However, I am unsure of how to utilize the incoming array values for "COURSES" in my Angular view. This is the response from the REST API: { "courses ...

htmlarraysangulartypescript

Adding text on top of images for optimal mobile viewing

I'm struggling to ensure that the text stays contained next to the image. It's working fine on desktop and tablet, but I'm facing challenges with mobile. While I have managed to improve it slightly, I can't figure out what exactly I am ...

csswordpress

What is the best way to display a particular section of a website (<td>...</td>) within a UIWebView?

I have searched high and low for a solution to my issue, but have come up empty-handed. What I am attempting to accomplish is to only load a specific td from a webpage into a UIWebview. Currently, my code looks like this: - (void)viewDidLoad { [supe ...

htmliosuiwebview

What are the consequences of including incorrect attributes in HTML tags?

It has come to my attention that the browser remains silent when I use non-existent attribute names for HTML tags. For example: <!DOCTYPE html> <html> <head test1="abc"> <title test2="cba">My Sample Project</title> ...

htmlbrowser

Can $refs cause issues with interpolation?

I'm currently learning Vue.js and the course instructor mentioned that modifying the DOM element using $refs should not affect interpolation. In fact, any changes made directly to the DOM will be overridden by interpolation if it exists. However, in m ...

javascripthtmlvue.js

Navigate divs with varying z-index values

I want to change the z-index of 3 divs by toggling them using jQuery, but I'm not sure how to do it. What I want is to click a button that relates to a specific div and increase the z-index of that div so the content inside it is shown. Currently, all ...

javascriptjqueryhtmlcss

Breaking the loop with a simple statement

I'm unsure if anyone will notice if I make changes to my preceding post, so I am here now to create a new one. Below is the code snippet: $(document).ready(function(){ var a; var b; var c; var d; var pmmain = ["Citrix", "Coach", ...

javascriptjqueryhtmlarraysbreak

Using Javascript to save a numeric value and accessing it on a different webpage

I'm encountering an issue with a specific feature on my website. I want users to click on a hyperlink that will redirect them to an application form page. The challenge is ensuring that the reference number (a 5-digit code displayed as a header) is st ...

javascripthtml

Struggling to make fadeIn() function properly in conjunction with addClass

I've been struggling with this issue for quite some time now and I just can't seem to make it work. The JavaScript I'm working on involves using addClass and removeClass to display and hide a submenu element. While the addclass and removeCla ...

javascriptjqueryhtmlcss

Change the position on the second click

I am trying to implement a manual sorting feature for a table of persons. The idea is to allow users to select a person by clicking on the row, then select another person by clicking on them, and have the two selected rows switch positions without using dr ...

jquerycsshtml-table

Implementing grid items in CSS Grid that do not stretch the grid row and have a container that is scrollable

Here is my dilemma: I am looking to create a grid with a fixed number of columns (that can be adjusted via javascript) and a variable number of rows, all with equal heights. The rows will be determined by the number of grid items, which are represented a ...

cssangularscrollflexboxcss-grid

What is the best way to set a parent element's width to be the same as one of

Is it possible to make the width of div.main match that of table.tbl2? In this scenario, I want inline4 to be on the second line and for the width of div.main to be identical to the width of table.tbl2. .container { text-align: center; } .main { di ...

htmlcss

Using jQuery and Ajax to populate a dropdown menu with options

I'm currently working on an ajax call function that successfully fills a drop-down list with data from a specific URL. However, I am looking to modify the function so that it can receive variables in order to populate the drop-down list dynamically. ...

jqueryhtmlajax

Guide on adding a personalized table or Div section in a datatable

I am looking to add a custom table above a datatable, specifically I want the custom table to be displayed above the header columns. Here is the code I have tried: columns: [ { "data": "WorkFlowType" }, { "data": "WorkflowInstanceId" } ...

javascriptjqueryhtmldatatable

Can Google Charts columns be customized with different colors?

Is it possible to modify the colors of both columns in Google's material column chart? Here is the code I am using for options: var options = { chart: { title: 'Event Posting', subtitle: 'Kairos event p ...

javascripthtmlcsschartsgoogle-visualization

Guide on creating HTML content within a ToolTip function for a table row

I'm working on implementing a tooltip feature that will appear when hovering over a row with extensive HTML content. This feature is intended to be used alongside Foundation framework. However, I am encountering issues getting the tooltip to work prop ...

htmlcsstooltipzurb-foundation