HTMLページのatom ioに似た画像の背景を追加する

Question

私はatom.ioのウェブサイトの背景について知りたいと思います。ソースを確認すると、画像のリンクがありません。イメージをR-Clickすると保存できません。

私が開発しているウェブサイトで同様の機能を利用する方法を知っていますか？

Answer 1

彼らは<div>にCSSの背景イメージを使用します。

あなたdivのように書く似た何かをしたい場合：

<div class="mybackground"></div> 

と、あなたのスタイルシートで、このCSS書く：

.mybackground { 
    height: 590px; 
    background-image: url("yourimage.png"); 
    background-position: 50% 0; 
    background-size: auto, auto 100%; 
} 

Answer 2

が@Simrandeepシンから続行するには、あなたが使用するものをこのようなCSS内：

.hero { 
    background-image:url('/path/to/image'); 
    background-repeat: no-repeat; 
    background-position: center; 
} 

atom.ioはおそらくAdobe Illustratorなどのプログラムを使用して作成されたsvgイメージです。これはベクターシェイプを使用してウェブサイト上でアニメートできるイメージを作成します（ページ上をスクロールするとイメージに表示されます）。

こちらがお役に立てば幸いです。