ブートストラップでPHP変数を渡す方法CCSクラスバックグラウンドで動的なイメージを変更するための背景イメージのリンク

Question

私はFULLの背景イメージのためにこのCSSを持っています。今私は動的に背景イメージを変更するには、このURLにPHP変数を渡したいと思います。私に教えてください。私のコードは、あなたが次のようにインラインまたは内部CSSを使用することができます。..

.imgback { 
padding-top:140px; 
height:100vh; 
min-height:400px; 
background-size:cover; 
background-image:url("../img/picmax/6.jpg"); 
} 

<section class="imgback"> 
<div class="container"> 
<h1 class="text-center">Traveller's Zone.</h1> 
</div> 
</section> 

Answer 1

です：

内部

<style> 
    div { background-image: url(<?php echo $imageURL;?>); } 
</style> 

インライン

<div style="background-image:url(<?php echo $imageUrl?>) no-repeat center center fixed"> 
</div> 

Reference from Change css background-image with php

Answer 2

あなたのスタイルコードでphp変数を使用できますが、php変数の後にcssコードを書く必要があります。この

<?php 
$bg_image = '../img/picmax/6.jpg'; // this is static value for test 
?> 
<section class="imgback"> 
    <div class="container"> 
     <h1 class="text-center">Traveller's Zone.</h1> 
    </div> 
</section> 

、あなた

HTMLコードでこのPHPの値を使用することができます

<?php 
$bg_image = '../img/picmax/6.jpg'; 
?> 
<section class="imgback" style="background-image: url('<?php echo $bg_image ?>')"> 
    <div class="container"> 
     <h1 class="text-center">Traveller's Zone.</h1> 
    </div> 
</section> 

のスタイルを追加した後、PHPの値を定義し、あなたはこのコードを使用することができます

<style> 
     .imgback { 
      padding-top: 140px; 
      height: 100vh; 
      min-height: 400px; 
      background-size: cover; 
      background-image: url("<?=$bg_image?>"); 
     } 
    </style> 

のようなものは、それを願っていますが手伝う。

Answer 3

データベースからデータを読み込んで、好きな場所に置くことができます。

`<?php 
$a = "6.jpg"; 
?>` 

は、あなたのCSS

.imgback { 
padding-top:140px; 
height:100vh; 
min-height:400px; 
background-size:cover; 
background-image:url("../img/picmax/"); 
} 

<section class="imgback"> 
<div class="container"> 
<h1 class="text-center">Traveller's Zone.</h1> 
</div> 
</section> 

に挿入します。しかし、PHPが唯一のすべてのリフレッシュや負荷に一度実行されるため、それは十分ではありません。 （あなたはjQueryのを使用することができます）、またはページに

を更新せずに 変更画像をことができるように彼らはイベントによってトリガされているので、あなたがより良いような作品のこれらのタイプのためにはJavaScriptを使用し