WordPress.org

Ready to get started?Download WordPress

Forums

Header image repeat? (4 posts)

  1. jawin
    Member
    Posted 3 years 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
    Forum Moderator
    Posted 3 years 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 3 years 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 3 years ago #

    @jtlowe22
    @alchymyth

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

    Regards

Topic Closed

This topic has been closed to new replies.

About this Topic