Greetings,
I have successfully changed the banner of my Dspace 7 at /opt/dspace-angular/src/themes/dspace/app/home-page/home-news.... and here is my .html code
<div class="background-image-container" class="background-image" style="width: auto; height: 450px; background-image: url('assets/dspace/images/2.png'); background-repeat: no-repeat; background-size: 100% 100%;">
<div class="" style="padding-left: 60px;padding-right: 60px;">
<div class="jumbotron jumbotron-fluid">
<div class="d-flex flex-wrap">
.
.
.
meanwhile my .scss file code per listed below:
:host {
display: block;
margin-top: calc(var(--ds-content-spacing) * -1);
div.background-image-container {
color: white;
position: relative;
.background-image > img {
background-color: var(--bs-info);
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
.container {
position: relative;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
&:before, &:after {
content: '';
display: block;
width: var(--ds-banner-background-gradient-width);
height: 100%;
top: 0;
position: absolute;
}
&:before {
background: linear-gradient(to left, var(--ds-banner-text-background), transparent);
left: calc(-1 * var(--ds-banner-background-gradient-width));
.
.
.
However, the banner looks very weird and does not fit according to different screen size. Is there any corrections that I can do? I attached the link to my Dspace 7 platform. I was told not to touch the .scss file.
I really appreciate the help, and please, help me as well.
Thank you so much.