Я создаю веб-сайт для своего колледжа, но эта карта с изображениями испортила вещи, как мне сделать фоновое изображение карты полным, а не показанным на картинке. Пожалуйста, просмотрите ее
element.style {
}
.item_service_card {
position: relative;
overflow: hidden;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
*, ::after, ::before {
box-sizing: border-box;
}
user agent stylesheet
div {
display: block;
}
.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;
}
body {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
line-height: 1.48;
font-weight: 400;
color: #000;
}
body {
line-height: 1;
}
body {
margin: 0;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #fff;
}
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
--font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
-webkit-tap-highlight-color: transparent;
}
user agent stylesheet
html {
color: -internal-root-color;
}
*, ::after, ::before {
box-sizing: border-box;
}
*, ::after, ::before {
box-sizing: border-box;
}
the following code is my html code 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">
<img src="assets/images/sycon.jpg" alt="">
</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>
Подробности
Я хочуудалить половину фона на изображении и сделать его полным в области изображения