カレントディレクトリ以外のcsvファイルを読み込もうとしたらnumpyがimportされない

csvからデータを読み込んでnumpyの行列に入れるという操作をしていました。
pythonファイルとcsvファイルは以下の通りです。
hoge.py

import numpy as np
import sys

data = np.loadtxt(sys.argv[1], delimiter=',')
print(data)

data.csv

1, 2, 3
4, 5, 6

まあ、チュートリアルレベルの単純な処理なのですが以下のように動作します。

$ pyenv local anaconda3-4.1.1
$ python hoge.py ./data.csv
[[ 1.  2.  3.]
 [ 4.  5.  6.]]

なんの問題もなく読み込んだ行列が表示されていますね。
次に、他のディレクトリからcsvを読み込んでみます。

$ cp ./data.csv ~/Desktop/
$ python hoge.py ~/Desktop/data.csv
Traceback (most recent call last):
  File "hoge.py", line 1, in <module>
    import numpy as np
ImportError: No module named 'numpy'

「numpyなんていうモジュール無いよ」とエラーを吐いてしまいます。~/Desktop/の中でlocalのpyenvが設定されていて、そのpython環境にはnumpyが入っていませんでした。取り敢えずこの環境を解除してみますと、

$ cd ~/Desktop
$ pyenv local --unset
$ cd ~/work/python/hoge
$ python hoge.py ~/Desktop/data.csv
[[ 1.  2.  3.]
 [ 4.  5.  6.]]

ちゃんと動くようになりました。コマンドライン引数でディレクトリを指定した時はそのディレクトリの環境が読み込まれるのでしょうか？

ThinkPad X230にcorebootをインストールする

Thinkpad X230にcorebootをインストールしましたので、記録しておきます。
corebootはlinuxベースのオープンソースなbiosです。これをインストールすることで、lenovo謹製のスパイウェアやホワイトリストとおさらばすることができます。

必要なもの

• Raspberry Pi
• Pomona 5250クリップ
• ジャンプワイヤ
• Ubuntu(又は他のlinux)が動作する環境

Ubuntu上での作業

必要なパッケージをインストールします。
※いくつかのパッケージはbuild-essentialに含まれているかと思います。build-essentialをインストールしてから、足りないものを個別にインストールした方が良いかもしれません。

sudo apt-get install gcc g++ gcc-multilib make ncurses-dev cmake iasl flex bison doxygen

corebootをcloneします。

git clone https://review.coreboot.org/coreboot.git

ディレクトリを移動し、corebootを最新にします。

cd coreboot/
git submodule update --init --checkout

gccクロスコンパイラの設定です。今回使ったX230のCPUは4スレッドのi5-3320Mですので、「CPUS=4」とします。
※この処理にはかなり時間がかかります。気長に待ちましょう。

make crossgcc CPUS=4

終わったら以下のコマンドを打ちます。

make nconfig

すると、こんな感じのテキストインターフェイスの設定画面が出てきます。

enterを押すと詳細項目に移動し、escを押すと戻ります。また、項目でenterを押すとチェックを付けたり消したりできます。
以下のように設定していきます。

General setup

以下にチェックを入れます。
"Compress ramstage with LZMA (NEW)"
"Include the coreboot .config file into the ROM image (NEW)"
"Create a table of timestamps collected during boot"
"Allow use of binary-only repository"

Mainboard

"Mainboard vendor"は"lenovo"を選択
"Mainboard model"は"ThinkPad X230"を選択
"ROM chip size"は"4096 KB (4 MB)"を選択

Chipset

" Enable VMX for virtualization (NEW)"だけチェック

Devices

以下にチェックを入れます。
"Use native graphics initialization"
"Enable PCIe Clock Power Management"
"Enable PCIe ASPM L1 SubState"

Display

そのまま

Generic Drivers

以下にチェックを入れます。
Support Intel PCI-e WiFi adapters
PS/2 keyboard init

Console

そのまま

System tables

そのまま

Payload

以下にチェック
Hardware init during option ROM execution
Use LZMA compression for payloads
"Secondary Payloads"では以下にチェック
Load coreinfo as a secondary payload
Load Memtest86+ as a secondary payload
（"Load tint as a secondary payload"はテトリスみたいなゲーム）

Debugging

そのまま

終わったらF6を押して保存します。

makeします

make

"Built lenovo/x230 (ThinkPad X230)"と表示されたら成功です。
これでUbuntu上での作業は終わりです。"./build/coreboot.rom"がbuildされたcorebootのイメージファイルですので、これをRaspberry Piに持っていきます。

Raspberry Pi上での作業

raspi-configを起動して、SPIが有効になっていることを確認してください。

sudo raspi-config

必要なパッケージをインストールします。

sudo apt-get update
sudo apt-get install build-essential pciutils usbutils libusb-1.0-0-dev libpci-dev libftdi1 libftdi-dev zlib1g-dev subversion

romを焼くためのツールである「flashrom」をダウンロードし、makeします。makeには少し時間が掛かります。

svn co https://code.coreboot.org/svn/flashrom/trunk flashrom
cd flashrom
make

makeが終わったら以下のコマンドを打ちます。

sudo modprobe spi_bcm2835
sudo modprobe spidev

Pomona 5250クリップを使って、bios chipとRaspberry Piを接続します。
以下のようにピンを繋ぎます。
bios chip -> Raspberry Pi

• 1 -> 24
• 2 -> 21
• 4 -> 25
• 5 -> 19
• 6 -> 23
• 8 -> 17

biosチップとRaspberry Piのピン番号は以下のようになっています。
↓biosチップ

↓Raspberry Pi

注意しなければならないのは、biosチップの向きです。X230では上の画像の向きから180度回転して実装されています。画像左上のポッチの位置をよく確認しましょう。

Pomona 5250クリップとジャンプワイヤーを使って、以下のように接続します。

biosチップとRaspberry Piが正しく接続されているかチェックするために以下のコマンドを実行します。

sudo ./flashrom -p linux_spi:dev=/dev/spidev0.0

正しく接続されていれば以下のように表示されます。

Found Macronix flash chip "MX25L3205(A)" (4096 kB, SPI) on linux_spi.
Found Macronix flash chip "MX25L3205D/MX25L3208D" (4096 kB, SPI) on linux_spi.
Found Macronix flash chip "MX25L3206E/MX25L3208E" (4096 kB, SPI) on linux_spi.
Found Macronix flash chip "MX25L3273E" (4096 kB, SPI) on linux_spi.
Multiple flash chip definitions match the detected chip(s): "MX25L3205(A)", "MX25L3205D/MX25L3208D", "MX25L3206E/MX25L3208E", "MX25L3273E"
Please specify which chip definition to use with the -c <chipname> option.

正しく接続されていなければ以下のように表示されます。

No EEPROM/flash device found.
Note: flashrom can never write if the flash chip isn't found automatically.

次に、biosを読みだしてMD5の値を確認します。これを3回繰り返し、MD5の値が全て同じであれば接続が正しくできています。

sudo ./flashrom -c "MX25L3206E/MX25L3208E" -p linux_spi:dev=/dev/spidev0.0 -r test.rom
md5sum test.rom

接続の確認ができたら、以下のコマンドでcorebootをインストールします。

sudo ./flashrom -c "MX25L3206E/MX25L3208E" -p linux_spi:dev=/dev/spidev0.0 -w /home/pi/Desktop/coreboot.rom

成功であれば以下のようなメッセージが表示されます。

Calibrating delay loop... OK.
Found Macronix flash chip "MX25L3206E/MX25L3208E" (4096 kB, SPI) on linux_spi.
Reading old flash chip contents... done.
Erasing and writing flash chip... Erase/write done.
Verifying flash... VERIFIED.

【osx86】ThinkPad X220にmacOS Sierraをインストールする

ThinkPad X220でmacOS Sierraが動作する夢を見ましたので、記録しておきます。
※あくまでも夢の話です

大まかな流れは以下のようになります。

1. mod BIOSを導入
2. wifiモジュールを換装
3. macOS SierraインストールUSBメモリを作成
4. インストールUSBメモリにClover EFIをインストール
5. Sierraをインストール
6. X220にClover EFIをインストール

wifiモジュールの換装

ThinkPad X220のwifiモジュールはmacOSでは動かないので、
Inventory of supported and unsupported wireless cards - Wireless and Bluetooth - OSXLatitude Forum
を参考に対応しているwifiモジュールに換装します。ここでは「DW1515」を使用しました。
また、ThinkPad X220のBIOSはlenovoが許可したハードウェアしか動作しないようになっているので、modBIOSを導入する必要があります。

インストールUSBメモリの作成

まず、SierraのインストールイメージをApp Storeからダウンロードします。

次に、以下のwebサイトから「ThinkPad x220 macOS Sierra Utility and Kext pack.zip」をダウンロードします。
File sharing and storage made simple
ダウンロードしたら、解凍しておきます。このzipファイルの中にClover EFIとkextが入っています。

インストールイメージからインストールUSBメモリを作成します。
※[USB]にはUSBメモリの名前が入ります。

sudo /Applications/Install\ macOS\ Sierra.app/Contents/Resources/createinstallmedia --volume /Volumes/[USB]/ --applicationpath /Applications/Install\ macOS\ Sierra.app/ --no interaction

インストールUSBのEFIパーティションのディスクIDを確認します。

diskutil list

インストールUSBのEFIパーティションをマウントします。
※X,Yは数字

diskutil mount /dev/diskXsY

「ThinkPad x220 macOS Sierra Utility and Kext pack.zip」を解凍して出てきたフォルダの中にある「EFI」というフォルダをインストールUSBのEFIパーティションにコピーします。

cp -R ~/Downloads/ThinkPad\ x220\ macOS\ Sierra\ Utility\ and\ Kext\ pack/EFI /Volumes/EFI/

インストール

作成したインストールUSBメモリをX220に挿して起動します。インストールUSBメモリが正しく作成されていれば、以下のようなインストール画面が表示されます。

あとは画面の表示に従ってインストールします。

インストールUSBのEFIパーティションの中身を内蔵SSDのEFIパーティションにコピーする

インストールUSBのEFIパーティションをマウントします。

diskutil mount diskXsY

「EFI」フォルダをホームディレクトリにコピーします。

cp -R /Volumes/EFI/EFI ~

インストールUSBのEFIパーティションをアンマウントします。

diskutil umount diskXsY

内蔵SSDのEFIパーティションをマウントします。

diskutil mount diskXsY

「EFI」フォルダを内蔵SSDのインストールUSBのEFIパーティションにコピーします。

cp -R ~/EFI /Volumes/EFI/

Clover EFIにSSDTを読み込ませる

CPUパワーマネジメントを有効にしてバッテリー持ちを良くするために、SSDTファイルをClover EFIに読み込ませます。まずは以下の手順でSSDTファイルを生成します。
SSDTファイル生成スクリプトをダウンロード

curl -o ~/ssdtPRGen.sh https://raw.githubusercontent.com/Piker-Alpha/ssdtPRGen.sh/master/ssdtPRGen.sh

実行権限を付与

chmod +x ~/ssdtPRGen.sh

SSDTファイル生成を生成

./ssdtPRGen.sh

/Users/username/Library/ssdtPRGen/ の中に"SSDT.aml"というファイルが作成されました。これをClover EFIに読み込ませるためにEFIパーティション内にコピーします。
EFIパーティションをマウントします。

diskutil mount diskXsY

SSDTファイルをコピーします。

cp /Users/username/Library/ssdtPRGen/SSDT.aml /Volumes/EFI/EFI/CLOVER/ACPI/patched

コンピューターを再起動すると、Clover EFIにSSDTファイルが読み込まれます。低負荷時にファンの音が消えたりバッテリー持ちが良くなったりと、かなり実感できる効果があります。

補足

今回用いたkextパックでは、以下のようなファンクションキーの割り当てになるようです。

• PrtSc -> トラックパッドon/off
• ScrLk -> バックライト輝度-
• Pause -> バックライト輝度+
• ScrLk -> バックライト輝度-
• F10 -> 音量ミュート
• F11 -> 音量-
• F12 -> 音量+

ArchLinuxをThinkpad X220にインストールする

インストールの準備

Isoファイルをタウンロードする

インストールUSBメモリを作る(Macの場合)

$ sudo dd if=./archlinux-2016.12.01-dual.iso of=/dev/diskX bs=1048576

※/dev/diskXはUSBメモリ

インストール

USBメモリから起動する
Arch Linux archiso x86_64 UEFI CD を選択する

UEFIモードになっているか確認

# ls /sys/firmware/efi/efivars

※このディレクトリが空だったらUEFIモードでない

wifiを設定する

# wifi-menu

接続されたか確認

# ping archlinux.org

パーティションの設定

# cgdisk /dev/sda

以下のような構成で

UEFI System partition(ESP) (512MiB)
/ (残り全部)

※EFI System Partitionの場合、typeはef00にする

フォーマットする

# mkfs.vfat -F32 /dev/sda1
# mkfs.ext4 /dev/sda2

マウントする

# mount /dev/sda2 /mnt
# mkdir /mnt/boot
# mount /dev/sda1 /mnt/boot

参照先のサーバーのリストを編集

# vim /etc/pacman.d/mirrorlist

日本国内のサーバーを一番上に持ってくる

## Score: 1.5, Japan
Server = http://ftp.jaist.ac.jp/pub/Linux/ArchLinux/$repo/os/$arch
## Score: 1.9, Japan
Server = http://ftp.tsukuba.wide.ad.jp/Linux/archlinux/$repo/os/$arch

インストールする

# pacstrap /mnt base base-devel

各種設定

fstabファイルを生成する

# genfstab -U /mnt >> /mnt/etc/fstab

インストールされたシステムにchrootする

# arch-chroot /mnt

viが使い辛いのでvimをインストールする

# pacman –S vim

タイムゾーンの設定

# ln -s /usr/share/zoneinfo/Asia/Tokyo /etc/localtime
# hwclock --systohc

locale.gen を編集

# vim /etc/locale.gen

英語と日本語のコメントアウトを外す

en_US.UTF-8 UTF-8
ja_JP.UTF-8 UTF-8

ロケールを生成

# locale-gen

ホスト名を設定

# echo “My_ThinkPad-X220” > /etc/hostname

hostsファイルにも追加する

# vim /etc/hosts

127.0.0.1	localhost.localdomain	localhost
::1		localhost.localdomain	localhost
127.0.1.1	My_ThinkPad-X220.localdomain	My_ThinkPad-X220

rootパスワードの変更

# passwd

grubをインストールする

# pacman -S grub dosfstools efibootmgr
# grub-install --target=x86_64-efi --efi-directory=/boot --bootloader-id=grub
# grub-mkconfig -o /boot/grub/grub.cfg

wifi関連のツールをインストール

# pacman -S wireless_tools wpa_supplicant wpa_actiond dialog

アンマウントして再起動

# exit
# umount -R /mnt
# reboot

再起動するとログイン画面が出てくる
rootでログインする

wifiを設定する

# wifi-menu

毎回設定するのは面倒なので、自動で接続できるようにする

# systemctl enable netctl-auto@wlp3s0

ユーザーの追加

# useradd -m -g wheel tarou
# passwd tarou

sudoersの編集

# vim /etc/sudoers

以下のコメントアウトを外す

Defaults env_keep += "HOME"
%wheel ALL=(ALL) ALL

もしくは以下を追加

tarou ALL=(ALL) ALL

デスクトップ環境のインストール

グラフィックドライバをインストールする

$ sudo pacman -S xf86-video-intel

Xorg関係をインストールする

$ sudo pacman -S xorg-server xorg-server-utils xorg-xinit xterm
$ sudo pacman -S mesa

ディスプレイマネージャをインストールする

$ sudo pacman -S lightdm lightdm-deepin-greeter

設定ファイルを編集

$ sudo vim /etc/lightdm/lightdm.conf

以下を追加

[SeatDefaults]
greeter-session=lightdm-deepin-greeter

deepinデスクトップ環境をインストールする

$ sudo pacman –S deepin deepin-terminal
$ sudo systemctl enable lightdm.service

再起動する

$ sudo reboot

ブラウザのインストール

まだブラウザが無いのでインストールする。無難にchromeで行く。
yaourtのインストール
/etc/pacman.confの編集

$ sudo vim /etc/pacman.conf

以下を追加

[archlinuxfr]
SigLevel = Never
Server = http://repo.archlinux.fr/$arch

インストール

$ sudo pacman -Sy yaourt

google chromeのインストール

$ yaourt -S google-chrome

フォントの設定

このままだとフォントが汚いので、いくつか好みのフォントをインストールする
source code pro をインストール

$ sudo pacman –S adobe-source-code-pro-fonts

adobe-fontsのインストール

$ git clone https://aur.archlinux.org/ttf-adobe-fonts.git
$ cd ttf-ms-fonts
$ makepkg –sri

日本語フォント

yaourt -S ttf-migmix

.fonts.confを編集(or作成)

$ vim .fonts.conf

モノスペースフォントはsource code pro、標準フォントはMyriad proにする

<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
  <alias>
    <family>serif</family>
    <prefer>
      <family>Noto Sans</family>
      <family>MigMix 1P</family>
    </prefer>
  </alias>
  <alias>
    <family>sans-serif</family>
    <prefer>
      <family>Myriad Pro</family>
      <family>MigMix 1P</family>
    </prefer>
  </alias>
  <alias>
    <family>monospace</family>
    <prefer>
      <family>Source Code Pro</family>
    </prefer>
  </alias>
</fontconfig>

日本語入力

fcitxとmozcを使う

$ sudo pacman -S fcitx-im fcitx-configtool fcitx-mozc

.xprofileを編集

$ vim ~/.xprofile

以下を追加

export GTK_IM_MODULE=fcitx
export QT_IM_MODULE=fcitx
export XMODIFIERS=@im=fcitx

ログインし直してからinput Method ConfigurationでMozcを追加する

CapsLockをCtrlにする

これはかなり重要。aの隣がCtrlじゃないPCなんて使えたもんじゃない！(※個人の感想です)
以下の場所に.confファイルを作成する

$ sudo vim /etc/X11/xorg.conf.d/00-keyboard.conf

Section "InputClass"
	Identifier "system-keyboard"
	MatchIsKeyboard "on"
	Option "XkbLayout" "us"
	Option "XkbModel" "pc105"
	Option "XkbOptions" "ctrl:nocaps"
EndSection

これでようやく、PCとして普通に使える状態になった。
適当にGUIインストーラーと設定画面を操作するだけでこれらのことが全てできてしまうUbuntuは偉大だ...笑

AppleEventまとめ

最初はApplewatch

防水(水深50m)に対応

AppleWatch用のポケモンGOも出るらしいです

HERMESとのコラボモデル

デュアルコアCPU。2倍の明るさのディスプレイ。防水。GPS搭載。watchOS 3搭載。

新しいAppleWatchは$369より

今までのAppleWatchは$269に値下げ

iPhone 7

次に発表されたのはiPhone 7

新色のピアノブラック

「メッセージ」アプリでは動くスタンプが登場

シルバー

ローズゴールド

ホームボタンも進化

Taptic Engineを搭載

Macbookのトラックパッドのように、振動でクリック感を出す

防水防塵に対応

IP67防水に対応

カメラも進化

背面には１２メガピクセルのカメラを搭載

iPhone 7+にはカメラが２つ

前面カメラは7メガピクセル

iPhone 7とiPhone 7+

スピーカーは左右(上下?)に２つ搭載

新しいイヤホンはLightningで接続

ちゃんと変換ケーブルも用意されている

ワイヤレスのイヤホン、「AirPods」も登場

イヤホンを2回タップするとSiriが起動するらしい

AirPodsの接続の様子

価格は$159

日本人には朗報

iPhone 7はFeliCaに対応

ついにiPhoneにもモバイルSuicaが登場(AppleWatchも対応?)

「A10Fusion」という、クアッドコアの新しいCPUを搭載

現行のA9よりも50％速いグラフィック

バッテリー持ちも改善

iPhone 7の機能まとめ

カメラの強化、新しいホームボタン、防水防塵、A10チップ、450MbpsのLTE、バッテリー、iOS10

こちらはiPhone 7+

純正アクセサリ、ケース

iPhone 7は$649から

ストレージ容量は32GB, 128GB, 256GBの3種類

iPhone 7+は$769から

月々$32~で毎年新しいiPhoneに換えられる、「iPhone Upgrade Program」

残念ながら日本では利用できない(現時点でこのプログラムを利用可能なのはアメリカ、イギリス、中国のみ)

予約は9月9日から開始

販売開始は9月16日

iOS10は9月13日に登場

MacやiPadに関する発表は特になし…

以上、AppleEventのまとめでした。

 

背景画像が固定で境目だけがスクロールするwebデザイン

正式名称は分からないのですが、背景画像自体はスクロールしても動かないけど、文字と背景の境目だけがスクロールして背景が切り替わっていく感じのデザインをお洒落なサイト最近良く見かけます。
これを作ってみましたので、備忘録として残します。

デモページ

htmlソース

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>HTML SAMPLE</title>
        <link rel="stylesheet" href="./style.css" type="text/css" charset="utf-8">
    </head>
    <body>
        <div class="bg1">
            <div id="titleArea">
                <h1>PAGE TITLE</h1>
            </div>
            <hr/>
            <div class="bg1">
                <div class="content">
                    <h2>short sentence</h2>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </div>
            </div>
        </div>
        <div class="bg2">
            <div class="content">
                <h2>long sentence</h2>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>
    </body>
</html>

cssソース

html {
    height: 100%;
}

body{
    color: #ffffff;
    height: 100%;
    margin: 0;
}
.bg1 {
    display: table;
    height: 100%;
    width: 100%;
    position: relative;
    background-image: url('./bg01.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    box-sizing:border-box;
}

.bg2 {
    display: table;
    height: 100%;
    width: 100%;
    position: relative;
    background-image: url('./bg02.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    box-sizing:border-box;
}

#titleArea {
    text-align: center;
}

@media (min-width:640px) {
    .content {
        margin: auto;
        width: 600px;
    }
}

@media (max-width:640px) {
    .content {
        margin: auto;
        width: 90%;
    }
}

短い文章の時は画像の表示される範囲は画面サイズと同じになりますが、長い文章ではその文章が終わるまでは画像が表示されたままになります。

下記のサイトを参考にさせて頂きました。
javatechnology.net

最近良く見る、背景に写真を設定してフィルターで暗くするwebページ

最近増えてきている、背景いっぱいに暗くした画像を表示するデザインのやり方です。

デモページ

htmlソース

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>HTML SAMPLE</title>
        <link rel="stylesheet" href="./style.css" type="text/css" charset="utf-8">
    </head>
    <body>
        <div id="titleArea">
            <h1>PAGE TITLE</h1>
        </div>
        <hr/>
        <div class="content">
            <h2>subtitle1</h2>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <h2>subtitle2</h2>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
    </body>
</html>

cssソース

body{
    height: 100%;
    margin: 0;
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('./bg01.jpg');
    background-attachment: fixed;
    background-size: cover;
    color: #ffffff;
}

#titleArea {
    text-align: center;
    padding: 10px;
}

@media (min-width:640px) {
    .content {
        margin: auto;
        width: 600px;
    }
}

@media (max-width:640px) {
    .content {
        margin: auto;
        width: 90%;
    }
}