How to display a repeated image stored in database on background as on Twitter?

Question

I want to display an image on background (by using CSS repeat) the same way as on Twitter but the problem is that I am retrieving it from a MySQL database and CSS cannot handle

Answer 1

You can do this in two steps.

Create a PHP script that accepts a parameter to identify through a unique ID, which Row has the image to display. This script will extract the image from database and send the codes with appropriate mime-type, so that browser understands. This way, apply a class to the container (or body tag) and display the background like:

.backgroundTile { background-image: url('/path/to/php-image-render-script.php?image_id=1212') !important; background-repeat: repeat; }

Example PHP Script (Source- http://cookbooks.adobe.com/post_Display_an_image_stored_in_a_database_PHP-16637.html ) :

<?php require_once('Connections/testConn.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
  if (PHP_VERSION < 6) {
    $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
  }

  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}

$colname_getImage = "-1";
if (isset($_GET['image_id'])) {
  $colname_getImage = $_GET['image_id'];
}
mysql_select_db($database_testConn, $testConn);
$query_getImage = sprintf("SELECT mimetype, image FROM images WHERE image_id = %s", GetSQLValueString($colname_getImage, "int"));
$getImage = mysql_query($query_getImage, $testConn) or die(mysql_error());
$row_getImage = mysql_fetch_assoc($getImage);
$totalRows_getImage = mysql_num_rows($getImage);
header('Content-type: ' . $row_getImage['mimetype']);
echo $row_getImage['image'];
mysql_free_result($getImage);
?>

Answer 2

You cannot repeat <img src="#" /> so for that you need to use CSS in your PHP document, you can do it like

<style>
body {
   background-image: url('<?php echo $whatever; ?>') !important;
   background-repeat: repeat;
}
</style>

Either you can do is

Make a stylesheet with a .php extension.

Than <link rel='stylesheet' type='text/css' href='css/stylesheet.php' />

At the top of the page mention this

<?php
    header("Content-type: text/css; charset: UTF-8");
?>

Now you can set variables accordingly

<?php
    header("Content-type: text/css; charset: UTF-8");
    $background = "$imgsrc"; /* Retrieve your image here */

    /*Now simply use the $background variable for setting the body background */
?>