What steps can be taken to resolve the issue with the background's placement?

https://i.sstatic.net/d3GEw.jpg

There seems to be an issue with the border being hidden. I've tried adjusting the background-position variables, but without success.

Here is a code example:

* {
  margin: 0;
  padding: 0;
}

.container {
  max-width: 1170px;
width: 100%;
margin: 0 auto;
padding: 0 15px;
}

.item_wrapper {
  display: flex;
  justify-content: space-between;
  
}

.items {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 270px;
  background-image: url(https://svgshare.com/i/6MZ.svg);
  min-height: 270px;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 0 20px;
  
}
<div class="container">
  <div class="item_wrapper">
    <div class="items">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, voluptas dicta aut hic dolorum quam ex consequuntur esse vel cum voluptatem tempora expedita molestias optio necessitatibus reiciendis asperiores odio blanditiis!</div>
  <div class="items">Tenetur minus cumque enim est in aliquam quam blanditiis obcaecati quae aut quis, ratione rerum facere accusantium? Quos eum, sequi odit exercitationem beatae iusto fugiat maxime nulla a laboriosam rem!</div>
  <div class="items">Necessitatibus voluptatum quisquam placeat. Provident quo ut autem voluptatibus assumenda odit maxime rerum! Porro vitae omnis nemo eveniet aspernatur, iste veniam placeat repudiandae. Ab exercitationem non eligendi hic doloremque accusantium?</div>
  <div class="items">Id voluptas architecto quisquam nobis. Nisi, dicta, deleniti maxime atque aperiam, fuga reprehenderit cum ex numquam voluptatum totam? Quisquam fugit numquam accusantium temporib...</div>
  </div>
</div>

P.S. In the above example, the bottom border remains hidden.

Answer №1

To ensure that the background covers the available width and height, you need to set the background size using: background-size: 100% 100%;. This will make sure it fills its container properly.

* {
  margin: 0;
  padding: 0;
}

.container {
  max-width: 1170px;
width: 100%;
margin: 0 auto;
padding: 0 15px;
}

.item_wrapper {
  display: flex;
  justify-content: space-between;
  
}

.items {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 270px;
  background-image: url(https://svgshare.com/i/6MZ.svg);
  min-height: 270px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 0 20px;
  
}
<div class="container">
  <div class="item_wrapper">
    <div class="items">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, voluptas dicta aut hic dolorum quam ex consequuntur esse vel cum voluptatem tempora expedita molestias optio necessitatibus reiciendis asperiores odio blanditiis!</div>
  <div class="items">Tenetur minus cumque enim est in aliquam quam blanditiis obcaecati quae aut quis, ratione rerum facere accusantium? Quos eum, sequi odit exercitationem beatae iusto fugiat maxime nulla a laboriosam rem!</div>
  <div class="items">Necessitatibus voluptatum quisquam placeat. Provident quo ut autem voluptatibus assumenda odit maxime rerum! Porro vitae omnis nemo eveniet aspernatur, iste veniam placeat repudiandae. Ab exercitationem non eligendi hic doloremque accusantium?</div>
  <div class="items">Id voluptas architecto quisquam nobis. Nisi, dicta, deleniti maxime atque aperiam, fuga reprehenderit cum ex numquam voluptatum totam? Quisquam fugit numquam accusantium temporibus iusto. Vel quasi cupiditate magni excepturi recusandae!</div>
  </div>
</div>

Answer №2

Applying background-size: contain should resolve the problem you're facing.

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

Enclose several lines of text within a border in the midst of other content

I'm looking to add a stylish border around multiple lines of text in a paragraph without having the border appear on each line individually. While I could enclose all the text in a div, it would separate the content from the rest of the paragraph. W ...

What is the process of using an if statement in jQuery to verify the existence of a property in a JSON file?

I am working on a task to incorporate an if statement that checks for the existence of a specific property in a JSON file. If the property exists, I need to display its value within HTML tags <div class='titleHolder'> and "<div class=&ap ...

Is there a way to have a div element with a box-shadow effect on top of its h1 child element?

I am facing an issue where a div with a box-shadow and an h1 inside are not aligned properly, causing the shadow to not cover the h1 element. Below is the code snippet in question: h1 { position: absolute; top: 50%; left: 44%; -webkit-t ...

How can I customize the color of Chrome's default date and time picker to a different shade of blue?

Is there a way to customize the color of the blue buttons, text, and date indicator in the native datetime picker for Chrome using CSS? https://i.stack.imgur.com/eZSaE.png ...

Using jQuery to delay hiding for 2 seconds

Hey there! I'm facing an issue with my code. The function is supposed to make #aboutPopOut slide to the left, and then after a 2-second delay, fade out the fadescreen by hiding it. The sliding part works fine, but the waiting and hiding do not seem to ...

Managing both clicking and hovering events on a single element, ensuring that the popup modal remains open as long as it is being hovered over

After successfully implementing click and hover functionality on an element, I was able to position the popup relative to the mouse pointer based on a previous solution. However, I am now facing an issue where I want the popup modal to be fixed in a specif ...

Having difficulty styling scrollbars using CSS

There is currently a scrollbar displaying over part of my page when necessary. https://i.stack.imgur.com/48Rbx.png I want to change the styling of the scrollbar to make it less bright and have a transparent background. I attempted to apply some styles, bu ...

Errors that occur when parsing templates in Angular 2

I'm encountering a template parse error with my Angular 2 component using the following template: <div *ngIf="chapter == 1"> <p><h4><br><b>Exercise</b>: Get the Groceries starting point<br></h4 ...

How can I make two flexbox items in a row stack on top of each other as a column?

I'm currently working on a layout that involves a parent flexbox containing multiple sections. My challenge lies in getting two specific sections to stack vertically while the rest of the layout remains horizontal. At the moment, I have two sections ...

Ways to incorporate a smooth transition between the opened and closed fab functionality

I am currently utilizing VueJS and Vuetify in my project. I have successfully implemented Vuetify's FAB component, which displays a list of fab buttons as demonstrated in the documentation: <div id="fab-button"> <v-speed-dial v-mo ...

Encountering difficulties with the functionality of Google Places API

I am attempting to incorporate the autocomplete functionality of Google Places API into a text field. Below is the code I have implemented: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script> <script ...

The Safari browser is having trouble rendering the website's CSS and HTML properly

Check out this example of how the website should look on Chrome for Android: https://i.stack.imgur.com/RzUSp.jpg And here is an example from Safari on iPad Mini 2: https://i.stack.imgur.com/PAj2i.jpg The Safari version doesn't display the proper fon ...

Why isn't the default value appearing on page load in jQuery?

I have a set of radio buttons with five different values. For each value selected, a corresponding span tag is generated with a description associated with that specific radio button option. Here's an example: <table class="jshop"> <tbod ...

Manipulate SVG elements by dragging them along the boundary of the path

Looking to achieve a specific functionality where I can drag and drop an element along the edges of a drawn path, rather than inside the path itself. To clarify, the goal is to move the red marked element on the black line bordering the path, allowing move ...

Modifying the appearance of scoped child components in Vue: A step-by-step guide

I am currently using vant ui components in my Vue project, such as buttons. I would like to make some minor style adjustments, like changing the color and border, but I am unsure how to do it. Can anybody please assist me in solving this issue? Thank you i ...

Javascript - accessing a local file (located in the same directory as the HTML file, not an uploaded file)

I have been attempting to find a solution, but have had no success. Is there a way to read a file using JavaScript or HTML? I have a text file named "sample.txt" with some information in it. This file is located in the same folder as the HTML file that con ...

Enhance the speed of webview on Android devices

I have been working on an application that utilizes a webview to load both HTML and JavaScript files. Unfortunately, I have noticed a significant decrease in performance when displaying the content. Despite trying various solutions such as: webVi ...

ajax and codeigniter combination for selecting options

Is it possible to implement a set_select option within an AJAX component for a dynamic dependent dropdown list that is being cleared after validation errors? I am looking to incorporate the set_select functionality in the code snippet below: <script ty ...

What is the best way to position the underline to appear beneath the second line in mobile view?

I have successfully incorporated a code to add a blue underline to the company name. However, in mobile view, the blue line appears on the first line. How can I adjust it so that it starts from the second line? Below is my CSS code: label { margin: 0; ...

Challenges with border-color and CSS input:focus

The dilemma Currently, I am immersed in a project focusing on constructing a front end using bootstrap4. In order to align with the company's main color scheme, I decided to alter the highlighting color of inputs. To achieve this, I made the followi ...