Steps to convert a half image card into a full image card using HTML and CSS

Hey there, I'm currently working on a website project for my college but I've run into an issue with the image card layout. Can anyone advise me on how to ensure that the background image of the card fills the entire space instead of being partially displayed?

element.style {
}
.item_service_card {
    position: relative;
    overflow: hidden;
} 
... (CSS code continues)
</pre>
<pre><code>Here is the HTML code snippet for the card:
<div class="owl-stage-outer"><div class="owl-stage" style="transform: translate3d(0px, 0px, 0px); transition: all 0s ease 0s; width: 1900px;"><div class="owl-item active" style="width: 350px; margin-right: 30px;"><div class="item_service_card">
<div class="image_service"> ... (HTML code continues)

The issue in question:

https://i.sstatic.net/99hws.png

I am looking to eliminate the partial display of the background image and have it fill the entire designated area within the card.

javascripthtmlcssbootstrap-4

Answer №1

To achieve this effect, you can utilize the image property as a background-image Here is an example snippet to add to your CSS:

.image_service {
    background: url(https://www.w3schools.com/bootstrap/la.jpg) center no-repeat;
    background-size: cover;
    height:-webkit-fill-available;
}


*,
 ::after,
 ::before {
   box-sizing: border-box;
}

.item_service_card {
   position: relative;
   overflow: hidden;
}

.owl-carousel.owl-drag .owl-item {
   -ms-touch-action: pan-y;
   touch-action: pan-y;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

.owl-carousel,
.owl-carousel .owl-item {
   -webkit-tap-highlight-color: transparent;
   position: relative;
}  

.image_service {
   background: url(https://www.w3schools.com/bootstrap/la.jpg) center no-repeat;
   background-size: cover;
   height: -webkit-fill-available;
}
<div class="container">
  <div class="owl-stage-outer">
    <div class="owl-stage" style="transform: translate3d(0px, 0px, 0px); transition: all 0s ease 0s; width: 1900px;">
      <div class="owl-item active" style="width: 350px; margin-right: 30px;">
        <div class="item_service_card">
          <div class="image_service">

          </div>
          <div class="describe_service">
            <h4 class="name_service">
              SYCon
            </h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In risus magna, porta sit amet orci ultrices, condimentum facilisis. </p>
          </div>
          <div class="overlay">
            <h4 class="name_service">
              <a href="sycon.html">SYCon</a>
            </h4>
            <h6>Guide:</h6>
            <p><a href="single-team.html">Jak Rooney</a></p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In risus magna, porta sit amet orci ultrices. Praesent sed eros et sapien laoreet vehicula ac at arcu. Suspendisse et nulla sem. Vestibulum condimentum risus vitae quam fringilla, vitae
              congue sem mattis. Nulla accumsan nisl ac massa sodales gravida.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Tip: If you want to create a carousel, Bootstrap offers built-in options for that purpose. You can refer to this Codeply example of a Multi Slider Carousel with cards expertly explained by skelly here. Adjust the col and transform:translateX(*%) values according to your needs. For col-sm-4, it would be transform:translateX(-33.3%), and for col-sm-3, it would be transform:translateX(-25%).

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

Incorporate a personalized JavaScript code segment during the Vue build process

I am currently working with Vue CLI and I need to include a custom javascript section in the default template when I release my project. However, I do not want this section to be included during the debugging phase. For example, I would like to add the fo ...

javascriptvue.jsvuejs2

Retrieve the attributes associated with a feature layer to display in a Pop-up Template using ArcGIS Javascript

Is there a way to retrieve all attributes (fields) from a feature layer for a PopupTemplate without explicitly listing them in the fieldInfos object when coding in Angular? .ts const template = { title: "{NAME} in {COUNTY}", cont ...

javascriptangulararcgisarcgis-js-apiarcgis-server

Tips for customizing the Electron title bar and enabling drag functionality

Currently, I am embarking on an electron project and my goal is to incorporate a unique custom frame at the top. Does anybody possess knowledge on how this can be achieved? To further clarify, here is a visual representation of what I envision for the cust ...

javascriptnode.jselectron

Best practices for loading and invoking Javascript in WordPress child themes

After spending countless hours searching for a detailed tutorial on how to properly incorporate Javascript into a WordPress website, I came up empty-handed. Running the Genesis Framework with a child theme on my localhost, I am eager to add a fullscreen b ...

javascriptphpjquerywordpress

What is the best method for enabling HTML tags when using the TinyMCE paste plugin?

After spending countless hours searching for a solution, I am still puzzled by this problem. My ultimate goal is to have two modes in my powerful TinyMCE editor: Allowing the pasting of HTML or Word/OpenOffice text with all styles and formatting attribu ...

javascriptjqueryjquery-pluginstinymcewysiwyg

Server has sent an Ajax response which needs to be inserted into a div

I have a modal window that sends a POST request to the server. Before returning to the view, I store some information in ViewData. Here's an example of what I'm doing: ViewData["Msg"] = "<div id=\"msgResponse\" class=\"success ...

javascriptc#jqueryajaxmodel-view-controller

In Angular 2, any element that is added to the body element will remain intact even after routing

Take a look at the demo link here: https://stackblitz.com/edit/angular-w7eij5?file=src%2Fapp%2Fdashboard%2Fdashboard.component.html I have added "Body content" to the body but when navigating through routing, the added element remains and is not destroye ...

javascriptangulartypescript

Exploring the JSON Structure in NodeJS

My current json array is structured in the following way: [{"id": 1, "meeting": "1/3/2015 12:30:00 PM", "name": "John"}, {"id": 1, "meeting": "1/3/2015 13:30:00 PM"}, "name": "John"}, {"id": 2, "meeting": "1/5/2015 7:00:00 AM"}, "name": "Peter"}, {"id": 2 ...

javascriptarraysnode.jsjsonobject

Why do attributes of a directive fail to function within a different directive in AngularJS?

Trying to set attributes of the angularJS directive named ng-FitText within another angularJS directive called scroll-cards. Here's the approach I'm taking: In the code snippet below, the attribute data-fittest is being assigned from ng-FitText ...

javascriptangularjsionic-framework

Listening for events in JavaScript using jQuery

I encountered an issue with my code that involves adding a check-all toggle to buttons named "CheckAll" in Internet Explorer browsers. I discovered that addEventListener does not function in IE and attachEvent should be used instead. However, there are con ...

javascriptjqueryfunctionaddeventlistener

Ways to constrain checkbox choices to only one within an HTML file as the checklist with the checkboxes is being created by JavaScript

I am working on developing an HTML dialogue box to serve as a settings page for my program. Within this settings page, users can create a list of salespeople that can be later selected from a drop-down menu. My current objective is to incorporate a checkbo ...

javascriptjqueryhtml

What is causing the bootstrap switch to not align horizontally with the other elements within the div?

Here is the code snippet that I am working with: .global-wrap { display: flex; flex-direction: row; align-items: center; justify-content: center; } .header { width: 1024px; background-color: purple; padding: 7px; margin: 0; } div { ...

htmlcssbootstrap-5

Can anyone provide guidance on how to trigger 3 unique functions in a specific order using JavaScript?

I've been troubleshooting this issue for quite some time, but I just can't seem to figure it out. Here's my dilemma: I have three functions - one to shrink a div, one to reload the div with new data, and one to enlarge the div - all triggere ...

javascriptjqueryhtml

React - the perfect solution for managing dynamic inline styles

When it comes to handling inline styles, there are two scenarios to consider. Which approach is the most effective for 'toggling' CSS properties based on the component state - or is there a better alternative? 1. The first method involves creati ...

javascriptcssreactjs

Unable to retrieve a URL from a hyperlink tag

I am attempting to extract data from a specific website: On the website, there are clickable links that lead to pages with more detailed information about each website. I am trying to capture the URL of these pages, but I have been unsuccessful in locatin ...

pythonhtmlselenium-webdriverweb-scraping

Bottom-anchored horizontal navigation bar for seamless scrolling experience

Is there a way to create a navbar with horizontal scrolling at the bottom of the page without compromising its scrollability? When I use position: fixed;, the navbar becomes non-scrollable. div.scrollmenu { background-color: #333; overflow: auto; ...

htmlcss

Developing an interactive menu for mobile devices utilizing a combination of JSON, HTML, JavaScript, and CSS

Creating a custom dynamic menu for mobile platforms using HTML, JavaScript, and CSS with a JSON object downloaded from the server. Not relying on libraries like jQuery. I've come across advice stating that "document.write" should not be used in event ...

javascriptjsonmobilemobile-website

replace icons using AngularJS app.directive

I am facing an issue with my menu icons. When I click on one icon, it changes as expected. However, if I click on another icon, the first one should return to its original state but it doesn't. I am not sure why this is happening. Below is the HTML c ...

angularjshtmltwitter-bootstrap-3angularjs-directive

Name values not appearing in dropdown list

Looking for some assistance with displaying a list of names in a dropdown menu using Angular. The dropdown is present, but the names from my array are not appearing. I think it might be a simple fix that I'm overlooking. I'm new to Angular, so an ...

htmlangulartypescript

Adding elements to an array appears to cause the previously created object to react

I am encountering a situation where once I add an object to an array, it becomes reactive to any changes made. // actions.js export const addToCart = ({ commit }) => { commit('addToCart'); // successfully updates the state setTimeout ...

javascriptvue.jsvuex