$(document).ready(function(){
$('.slider').slider();
});
#logo {
background-size:auto auto;
background-repeat: no-repeat;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="slider">
<ul class="slides">
<li>
<img src="https://lorempixel.com/580/250/nature/1"> <!-- random image -->
<div class="caption center-align">
<img src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.png" id="logo">
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="https://lorempixel.com/580/250/nature/2"> <!-- random image -->
<div class="caption left-align">
<h3>Left Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="https://lorempixel.com/580/250/nature/3"> <!-- random image -->
<div class="caption right-align">
<h3>Right Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="https://lorempixel.com/580/250/nature/4"> <!-- random image -->
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>
</div>
<!--JavaScript at end of body for optimized loading-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
Я пытаюсь поместить Lo go в подпись для одного из изображений в ползунке Materialise CSS. Lo go в формате png с прозрачным фоном. Я могу видеть отображаемое изображение, но оно не увеличено. Я пытался исправить это с помощью css, но, похоже, ничего не работает. Я не знаю много о css. Каков наилучший способ сделать это?
вот мой код
<div class="slider">
<ul class="slides">
<li>
<img src="img/headeroptimised.jpg"> <!-- random image -->
<div class="caption right-align">
<img src="img/alternate.png" width="300px" height="200px"> <!-- logo i am trying to insert inplace of big Tagline like in 2nd slider -->
<h5 class="light grey-text text-lighten-3>Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="img/slider2optimised.jpg">
<div class="caption left-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>
</div>