2017-10-14 13 views
0

これはjekyllのブログのコードですが、私は外部のCSSファイルからCSSを使ってスタイルを決定しています。次のイメージを中位の投稿のような完全な背景イメージにするにはどうすればよいですか?メディアのようにフルスクリーンの背景イメージを作成するにはどうすればよいですか?

コードは[webpage] [1]とこの投稿の画像です。

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">

+0

を使用してみてください、あなたがブラウザウィンドウ全体を埋めるようなフルスクリーンを意味していますか? – TheRuler

+0

はい。このように:https://howwegettonext.com/inception-the-avian-flu-outbreak-in-hong-kong-1997-5c0de48f6781 –

+0

あなたはcss body {height:100%; background-image:url( "img .jpg ");背景サイズ:カバー; } – TheRuler

答えて

0

img{ 
    width: 100%; 

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

    // or viewwidth 
    width: 100vw; 
}