Copy link to clipboard
Copied
Hi all,
Here is my link
The images in the carousel (Home Page) are not responsive.The images were embedded as a background.So I don't know how to make them to be responsive.
Kindly help to make them responsive.
.carousel-item.item4 {
background: url(../images/ANEH2019-Web-V3.png) no-repeat;
background: url(../images/ANEH2019-Web-V3.png) no-repeat;
background: url(../images/ANEH2019-Web-V3.png) no-repeat;
background: url(../images/ANEH2019-Web-V3.png) no-repeat;
background: url(../images/ANEH2019-Web-V3.png) no-repeat;
background-size: cover;
}
Thanks.
I think it would be easier to add the images to each slide with <img src="folder/image.jpg" class="img-fluid">
I'm pretty sure you don't then need to name each slide .item1 .item2 etc then so ....
e.g.:
<div class="carousel-inner">
<div class="item active">
<img src="/folder/image1.jpg" class="img-fluid">
</div>
<div class="item">
<img src="/folder
/image2.jpg" class="img-fluid"
>
</div>
<div class="item">
<img src="/folder
/image3.jpg" class="img-fluid"
>
</div>
</div>
Also you stil
...Copy link to clipboard
Copied
try adding
background-size: contain;
so:
.carousel-item.item4 {
background: url(../images/ANEH2019-Web-V3.png) no-repeat;
background: url(../images/ANEH2019-Web-V3.png) no-repeat;
background: url(../images/ANEH2019-Web-V3.png) no-repeat;
background: url(../images/ANEH2019-Web-V3.png) no-repeat;
background: url(../images/ANEH2019-Web-V3.png) no-repeat;
background-size: contain;
}
Copy link to clipboard
Copied
Yes... I did ...and its responsive .....but it gets left aligned in desktop view.And there is gap at the right side....
Copy link to clipboard
Copied
I think it would be easier to add the images to each slide with <img src="folder/image.jpg" class="img-fluid">
I'm pretty sure you don't then need to name each slide .item1 .item2 etc then so ....
e.g.:
<div class="carousel-inner">
<div class="item active">
<img src="/folder/image1.jpg" class="img-fluid">
</div>
<div class="item">
<img src="/folder
/image2.jpg" class="img-fluid"
>
</div>
<div class="item">
<img src="/folder
/image3.jpg" class="img-fluid"
>
</div>
</div>
Also you still have some messed up comment tags in that page ..
Copy link to clipboard
Copied
Thank you very much..It works well now...
Copy link to clipboard
Copied
Good to know
Copy link to clipboard
Copied
Could also try:
background-size: cover;
background-repeat: no-repeat;
background-position: center center;