The background image will expand to fill any available space

I'm currently working on rendering divs with a background image CSS property. The images have fixed sizes, and I want to display them in a grid layout. However, the divs with background images stretch when there is extra space available, which is not the desired outcome. Since I am not an expert in CSS, any assistance would be greatly appreciated. Below is the HTML and CSS code:

.inner-tile {
      display: grid;
      grid-gap: 1em;
      justify-items: center;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      grid-template-rows: 1fr;
      width: 98%;
      height: 100%;
      padding-top: 1%;
      padding-right: 1%;
      padding-left: 1%;
      /*border: 1px solid red;*/
      font-size: 18px;
    }
    
    .event {
      display: grid;
      grid-gap: 5px;
      grid-template-rows: 1fr;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      justify-items: center;
      border: 1px solid grey;
      border-radius: 4px;
      min-width: 240px;
      min-height: 200px;
      height: 100%;
      width: 100%;
    }
    
    .event-image {
      background: url('https://placekitten.com/200/200');
      background-repeat: vertical;
      background-size: 100%;
      width: 100%;
      height: 100%;
    }
<div class = "inner-tile">
        <div class = "event">
          <div class="event-image"></div>
          <h3 class = "learn-more">Corporate Event</h3>
        </div>          
        <div class = "event">
          <div class="event-image"></div>
          <h3 class = "learn-more">Weddings</h3>
        </div>          
        <div class = "event">
          <div class="event-image"></div>
          <h3 class = "learn-more">Party</h3>
        </div>                 
      </div>

htmlcss

Answer №1

Give this a shot

.event-picture {
   background-size: cover;
}

Answer №2

Utilizing percentages in the width: and height: properties will allocate that specific percentage of the window space. For instance, setting width: 100%; ensures it occupies the entire available width within the window (100% of the total width).

If you prefer it to occupy a specified number of pixels, simply use width: 100px;, guaranteeing it consumes 100 pixels regardless of other factors.

Answer №3

If you want a fixed width and height for your image, consider using pixels instead of percentage. Here's an example:

.event-image {
  background: url('https://placekitten.com/200/200');
  background-repeat: vertical;
  width: 120px;
  height: 120px;
}

Answer №4

I've encountered a similar problem in the past, but found a simple solution in CSS:

.class img 
{
background-repeat:no-repeat;
background-size:cover;
}

Give this a try - it should resolve the issue!

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

Ways to display the modal once the user initiates the action

Is there a way to delay loading my modal HTML codes until after the user clicks a button, rather than having them load automatically with the template? HTML <!-- Template Codes--> <button data-toggle="modal" data-target="#modal-content" type="bu ...

javascriptjqueryhtmlangularjs

Issue with jQuery click event not firing on multiple buttons with identical names

These are the two buttons that appear multiple times but do not function: <button name='btnEditar' class='btn btn-outline-success me-4' data-bs-toggle='modal' data-bs-target='#staticBackdrop'><i class=&a ...

javascripthtmljquery

The progress indicator fails to activate during the first step

As a beginner in coding, I wanted to incorporate a progress bar on my website. However, I encountered an issue where when I try to make step 1 "active", it's actually step 2 that becomes active, and the same pattern continues for subsequent steps. ...

htmlcsswebprogress-bar

An angular component that is functioning properly when connected to a live server, however, it is experiencing issues when trying to run `

I tried integrating versitka into my Angular component by placing the version HTML file and all necessary assets in the appropriate directories. However, when I run ng serve, only the HTML file seems to be working, while the CSS and images fail to load. I ...

javascripthtmlangulartypescripthtml-templates

Tips on increasing the button size automatically as the elements inside the button grow in size

I have a button with an image and text inside, styled using CSS properties to achieve a specific look. However, I encountered an issue where the text overflows outside of the button when it's too long. I want to find a way to wrap the text inside the ...

htmlcss

Is there a way to pass locale data using props in VueJS Router?

To access hotel data, the URL path should be localhost:8080/hotel/:id (where id is equal to json.hoteID). For example, localhost:8080/hotel/101 This path should display the specific data for that hotel. In order to achieve this, we will utilize VueJS vu ...

javascripthtmlcssvue.jsvue-router

Samsung Galaxy S7 can interpret alphabetical parameters as numbers in a link sent via SMS

When trying to open a text message with a new message on my website using a link, I encountered an issue specifically with the Galaxy S7. The following code works on most Android phones: sms:5555555555?body=JOIN However, on the Galaxy S7, the "?body=JOIN ...

javascriptandroidhtmlsmssamsung-galaxy

Variety of part ingredients

In my component, I have a button and include another component which also contains a button. How can I align these two buttons next to each other without using absolute positioning? When I try positioning them using absolute right and top values, the lay ...

javascripthtmlcssangularangular2-template

To link circles vertically with a line and fill them with color when clicked, follow these steps:

I am looking to create a design similar to the image below using unordered list items. When a user clicks on a list item, I want the circle to fill with color. I have structured it by creating a div with nested list items and span elements. If a user click ...

javascriptjqueryhtmlcss

An alert box displays N times when the submit button is clicked N times

Consider the following function: function validateForm() { var elements = ["firstname", "lastname", "password", "favfood", "favsport"]; document.getElementById('register').setAttribute('noValidate', true); document.getElement ...

javascripthtmlformsalert

Concealing a column in a printed output on Internet Explorer 9

Our application features a webgrid with a hidden reference column that is concealed using CSS. While this method works seamlessly on most browsers, we encounter an issue when it comes to printing. In our print.css file, where the column is hidden similar t ...

cssinternet-explorerprinting

I'm noticing that my CSS is behaving differently than expected. Despite setting position: absolute, the output is displaying as inline-block instead of block. Why is this happening

div { width:200px; height:200px; position: absolute; } .first-container { background-color: #9AD0EC; } .second-container { background-color: red; left: 200px; } .third-container { background-color: blue; left:400px; } Despite setting th ...

javascripthtmlcssweb

CSS - Revealing an element on the backface post flip animation

I encountered an issue while working on a CSS flip card project. Despite using backface-visibility: hidden;, one element remains visible from the other side. In the simplified snippet provided, if you click on more in the bottom right corner, the card fli ...

css

Is it a good idea to relocate the pagination to the top of the DataGrid in MUI

Can someone suggest a solution for moving the default pagination of XGrid above the table? Or do I need to develop my own custom pagination instead of using the built-in feature with XGrid? ...

cssreactjsmaterial-ui

Resizable icon next to inline element caused width adjustment

I have a group of individuals listed, each with two elements side by side: a "contact me" button (an 'a' element with a fontawesome icon) and a tag displaying the user type (span element). Some users do not have a tag, and when there is one prese ...

htmlcssinline

iOS devices are experiencing issues with touchstart and touchend events not functioning when utilizing jquery mobile and cordova

During a previous project, I encountered no problems with the following code snippet. It effectively utilized touchstart and touchend events to adjust the CSS of a button: <script> $('input[type="button"]').on('touchstart', func ...

javascriptjqueryioscsscordova

"Aligning two images side by side in a horizontal

[enter image description here][1]I am trying to place two images on my website, but I am struggling to vertically align them properly. I have attempted using line-height and vertical alignment, however, I cannot seem to pinpoint the issue or identify any m ...

htmlcss

Utilizing the Bootstrap portfolio section, I aim to eliminate the 'ALL' tab and ensure a category is selected

Currently, I am utilizing this template If you scroll down to the WORK section, you will find the portfolio section which is filterable. The default selected option is "ALL," displaying all items. However, I would like to remove this and activate a diffe ...

javascripthtmltwitter-bootstrap

Deactivating a button if the input fields are blank using ReactJS

Hi there, I'm new to reactJS and recently encountered an issue with my code. Everything seems to be working fine except for the NEXT button not being disabled when text fields are empty. My expectation is that the NEXT button should only be enabled af ...

javascripthtmlreactjs

Height problem with the data-reactroot component

On one of my web pages, there is a data-reactroot element with a height of approximately 1906px. However, the surrounding divs and html tags have a height of only 915px. I am trying to figure out how to make all the enclosing elements match the same heigh ...

htmlcssreact-router