Skip to content

Instantly share code, notes, and snippets.

@jerinisready

jerinisready/banner_image.css

Created November 26, 2018 07:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jerinisready/5658a64666007a89f6d3c4b21ff835f8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jerinisready/5658a64666007a89f6d3c4b21ff835f8 to your computer and use it in GitHub Desktop.
Download ZIP
Set banner image with 100% widht and specific height. it automatically position to center of image so that, images of any size will be fit in same general size.
Raw
banner_image.css
.card__banner_image {
background: url('/image/file.jpg') center / cover;
width: 100%;
height: 160px;
}
.card__banner_text{vertical-align: middle;}
/**
<div class="card__banner_image">
<div class="card__banner_text"> Title of the image </div>
</div>
**/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment