Support » Themes and Templates » Header image repeat?

  • 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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Michael

    (@alchymyth)

    Forum Moderator

    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.

    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*/}

    @jtlowe22
    @alchymyth

    Thank, Thanks…..Thanks…

    Regards

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Header image repeat?’ is closed to new replies.