CODEWITHSUNDEEP
htmlcssimage
Tanaka
Tanaka

Reputation: 301

How do I create a fullscreen background image like on medium?

This is code from a jekyll blog but I use CSS from an external CSS file to determine its styling. How do I make the following image become a full background image like those on medium posts?

The code is for this [webpage][1] and the images in the post.

HTML

img {
  max-width: 100%;
  font-style: italic;
  vertical-align: middle;
  border: 0;
}
<p><img src="http://tanaka.co.zw/images/posts/fowlplague.gif" alt="Fowl plague"></p>

<p>This article has left me most thoughtful about my present and future. It and other readings I will cite at the bottom will examine an issue of interest to me, and perhaps to all of us in many ways. Share your thoughts with me. 
 
Outbreak: Our Next Global Pandemic
In May of 1997, a boy in Hong Kong is diagnosed with a new form of influenza- H5- he was dead within days. Within months, the Chinese government had ordered the slaughter of 1.2 million birds to curb the spread of the outbreak.
Epidemics and pandemics have historically been the greatest existential dangers our species has faced. We spend trillions on defense but [war and violence](https://ourworldindata.org/slides/war-and-violence/#/title-slide) has really killed just 167 million to 188 million in the last century.</p>

<img src="http://tanaka.co.zw/images/posts/democracy.png" alt="The History of Conflict">

Upvotes: 0

Views: 222

Answers (1)

williamsi
williamsi

Reputation: 1606

Try to use

img{
    width: 100%;

    // or min-width
    min-width:100%;

    // or viewwidth
    width: 100vw;
}

Upvotes: 1

Related Questions