BootStrapのフリーテーマを使っており、ヘッダー画像をHTMLに記述したい

###BootStrapのフリーテーマを使っており、ヘッダー画像をHTMLに記述したい
BootStrapのフリーのテーマを使っているのですが、ヘッダー画像がCSSで記述されており、それをHTML側に画像設定したいです。HTML側への記述方法がわからないので教えてほしいです。

###該当のソースコード

HTML
1<!-- Header -->
2<div class="home">
3    <header class="text-center carousel" id="carousel-example" data-ride="carousel">
4        <div class="intro-text carousel slide" data-interval="2000">
5            <h1>THE BADDEST</h1>
6            <p>タイトルタイトルタイトルタイトルタイトル</p>
7        </div>
8    </header>
9</div>
10
11```CSS
12```CSS
13.home header {
14	background: url(../img/header-bg.jpg) no-repeat bottom center;
15	background-size: cover;
16	color: #cfcfcf;
17	position: relative;
18	height: 500px;
19}

###追加情報

<div class="home">に連動して、その他のページも連動して画像設定されています。全てHTML側で画像を設定し、その後Cake PHPに落とし込みたいと思います。バックエンドからは画像設定はCSSでしないでほしいという依頼からこの質問となりました。

CSS
1.premium header {
2	background: url(../img/premium-header-bg.jpg) no-repeat bottom center;
3	background-size: cover;
4	color: #cfcfcf;
5	position: relative;
6	height: 200px;
7	width: 100%;
8}
9.store header {
10	background: url(../img/store-header-bg.jpg) no-repeat bottom center;
11	background-size: cover;
12	color: #cfcfcf;
13	position: relative;
14	height: 200px;
15	width: 100%;
16}

kei344

2017/03/30 05:08

テーマ名と取得したURLを質問文に追記ください。（URLにはリンクを張ることができます）

WPJ

2017/03/30 05:14

早急なご返答誠にありがとうございます。こちらになります。http://www.templatewire.com/optics-free-one-page-html-template

kei344

2017/03/30 05:16

この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文を編集することをお勧めします。

WPJ

2017/03/30 05:16

かしこまりました。

行動規範の内容に同意します

回答2件

バックエンドからは画像設定はCSSでしないでほしいという依頼

まずは、こちらがどのような理由からなのかを先に片付けましょう。中途半端に捉えたまま解決策を編み出しても、それすら拒否されてしまうのであれば元も子もありません。

投稿2017/03/30 05:23

maisumakun

総合スコア145183

WPJ

2017/03/30 05:30

回答ありがとうございます。画像は全てHTMLに記述し、最終的にctpファイルでCake PHPに落とし込んでおります。トップのヘッダー部分のみがCSSで画像読み込みされていまして、このヘッダー部分の画像はCake PHPで作られた管理画面で、お客様（クライアント）が自由に画像をアップロード出来る流れを作りたいからです。フリーのテーマはこちらになります。http://www.templatewire.com/optics-free-one-page-html-template

行動規範の内容に同意します

ベストアンサー

【Optics】
http://www.templatewire.com/preview/optics/

上記サンプルと同じ構造であれば、下記のように書けば出来ます。

CSS
1.xxxx_backend {
2	height: 100%;
3	width: 100%;
4	object-fit: cover;
5	position: absolute;
6	left: 0;
7	top: 0;
8}

HTML
1<header class="text-center" name="home">
2<img class="xxxx_backend" src="https://placehold.jp/24/cc9999/993333/350x150.png" alt="">
3<div class="intro-text">
4    <h1>We are <span class="color">Optics</span></h1>
5    <p>An award winning digital design and development company</p>
6    <div class="clearfix"></div>
7    <a href="#about-section" class="btn btn-default btn-lg page-scroll">Learn More</a> </div>
8</header>