Responsive Background Image Bootstrap Code Example


Example 1: make a background image responsive css


html {
min-height: 100%;
background-image: url(image.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}

Example 2: add background image in bootstrap 5


<div class="has-bg-img bg-purple bg-blend-screen">
<h4>Background blend mode: Multiply</h4>
<img class="bg-img" src="...">
</div>

Example 3: Scaling Images and Videos css


.container {
width: 50%;
height: 200px;
overflow: hidden;
}

.container img {
max-width: 100%;
height: auto;
display: block;
}

Example 4: how to set background image in css responsive


body{
background:url("images/xyz.jpg") no-repeat center;

Example 5: making image responsive


<p>
<a href="MY WEBSITE LINK" target="_blank">
<img src="IMAGE LINK" style='width:100%;' border="0" alt="Null">
</a>
</p>

Comments

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android SDK Location Should Not Contain Whitespace, As This Cause Problems With NDK Tools