WordPress.org

1. jawin
   Member
   Posted 1 year ago #

   Hi,

   I am trying to make header image repeat horizontally repeat-x in Cutline theme here are the required codes:

   Header.php

   <div id="header_img">
   		<img src="<?php header_image() ?>" width="970" height="55" alt="" />
   		</div>

   Styless.css
   

   #header_img { position: relative; margin: 0 0 3.0em 0; border-bottom: 1px solid #000; float: left; clear: both; }
   
   	#header_img img { display: block; } /* this is really just an IE 6 and 7 hack in disguise */

   function.php
   

   <?php
   
   $themecolors = array(
   	'bg' => 'ffffff',
   	'text' => '000000',
   	'link' => '0060ff'
   );
   
   // No CSS, just IMG call
   
   define('HEADER_TEXTCOLOR', '');
   define('HEADER_IMAGE', '%s/images/header.gif'); // %s is theme dir uri
   define('HEADER_IMAGE_WIDTH', 970);
   define('HEADER_IMAGE_HEIGHT', 55);
   define( 'NO_HEADER_TEXT', true );
   
   function cutline_admin_header_style() {
   ?>
   <style type="text/css">
   #headimg {
   	height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
   	width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
   }
   
   #headimg h1, #headimg #desc {
   	display: none;
   }
   
   </style>

   what changes i have to make in order to make header image repeat-x

   Thanks for ur help.

   Best Regards

2. alchymyth
   The Sweeper
   Posted 1 year ago #

   repeat-x only works for background images:
   http://www.w3schools.com/css/css_background.asp

   you could use a graphics program to make a header image that will fit the available space.

3. jtlowe22
   Member
   Posted 1 year ago #

   If you want to repeat it horizontally, apply the image as a background image to the header. I would still leave the header img in the header div, but I would hide it. This would allow the viewer to see the image if stylesheet was disabled. Something like:

   /* header code */
   <div id="header_img">
   <img src="<?php header_image() ?>" width="970" height="55" alt="" />
   </div>

   /* style code */
   #header_img { position: relative; margin: 0 0 3.0em 0; border-bottom: 1px solid #000; float: left; clear: both;
   background: url(path/to/image/header.gif) repeat-x; height:55px; width:970px; }

   #header_img img { display: none; /*this hides the image*/}

4. jawin
   Member
   Posted 1 year ago #

   @jtlowe22
   @alchymyth

   Thank, Thanks.....Thanks...

   Regards

Topic Closed

This topic has been closed to new replies.