Adjustable image using before and after
I have and have overlaid the "before" on it and placed the image inside it. This is fine, but the image does not resize when scaled and scaled down, possibly due to "position: absolute".
And also not be responsive to using a media query for this?
Current code:
.abc {
border: 1px solid black;
width: 25%;
height: 130px;
}
.abc::before {
width: 120px;
content: " ";
background-image: url(arr1.png);
background-size: 70% 70%;
background-position: 0%;
background-repeat: no-repeat;
position: absolute;
left: 36%;
top: 52%;
height: 11%;
}
<ul>
<li class="abc">
<p>Heading Item</p>
</li>
</ul>
Based on your code, you don't have a "div" and <li>
with a class abc
that sets a background image on it. it is also not clear what you really want to achieve, but if you want a responsive image it is not.
I suggest taking a look at the download documentation which might be the easiest way to make anything responsive.
take a look at this example for sensitive images:
<div class="row">
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
https://jsfiddle.net/emilvr/9L5cqnn1/
Update:
To make your images flexible to the browser screen size, add these images to the images
.flexible-img {
max-width: 100%;
width: auto\9;
height: auto;
}
source to share