having backgroud image repeat the whole width

  • I’d like my background image in the header to repeat 100% of the width.

    I did try setting the header to “Full width,” but it messes up my logo position and my horizontal nav (they become way to spread out).

    I also tried to add a CSS class and put a margin on them, but this messes up the responsive functions for smaller devices.

    Any ideas?

Viewing 11 replies - 1 through 11 (of 11 total)
  • Thread Starter sarahwebs

    (@sarahwebs)

    Hey everyone – is the above possible?

    Thanks!

    There’s really no way to help with questions like this without seeing your site.

    I depends how you define “repeat 100% of the width”.

    If you mean repeat as it is defined by CSS – the one image tiled against each other, then create a child theme if you haven’t already, and in edit the style.css

    If you want a Custom background to be repeated (ie – a background selected through the Administration console like TwentyTwelve) – then put this in your style.css:

    body {
background-repeat: repeat-x;
}

    If you are just hardcoding the background image, just include that above:

    body {
background: url('/relative/path/to/image.png') repeat-x;
}

    If you need something more specific, let us know the details.

    Thread Starter sarahwebs

    (@sarahwebs)

    body {
    background: url(‘/relative/path/to/image.png’) repeat-x;
    }

    `

    Thanks – put the above in the CSS.. Looks good, but now the little default theme smiley face is showing in the header with my repeating background underneath..?

    Thread Starter sarahwebs

    (@sarahwebs)

    Here is the page:
    https://blueoakwebdesign.com/Wordpress2/

    Did you fix the issue? I’m not sure of the problem on that link. Can you point it out?

    Thread Starter sarahwebs

    (@sarahwebs)

    there’s a smiley face in the header that should not be there.. it’s in the default CC theme..

    Thread Starter sarahwebs

    (@sarahwebs)

    and the home page is acting odd -I’m getting a 404 even though it’s there in the list of pages?

    actually, I’ve fixed the 404 -now there are 2 home page links in the nav pointing to the same home page.. ?

    If you want to get rid of the smiley completely:

    #header {
  background: none;
}

    For the Home page issue – I can’t really help you unless I see what code you are using to pull the Navigation menu from WordPress. You can’t View Source PHP.

    Copy and paste your header.php file. Make sure to put it within code tags in the forum post.

    Thread Starter sarahwebs

    (@sarahwebs)

    Thread Starter sarahwebs

    (@sarahwebs)

    <!DOCTYPE html>

    <html xmlns=”https://www.w3.org/1999/xhtml&#8221; <?php language_attributes(); ?>>
    <head profile=”https://gmpg.org/xfn/11″&gt;
    <meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” />
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
    <?php do_action(‘favicon’) ?>

    <title><?php wp_title(); ?></title>

    <?php do_action( ‘bp_head’ ) ?>
    <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />
    <link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />

    <?php wp_head(); ?>
    </head>

    <body <?php body_class(get_responcive_class()) ?> id=”cc”>
    <div id=”outerrim”>

    <?php do_action( ‘bp_before_header’ ) ?>

    <div id=”header”<?php echo (get_responcive_class() === ‘not-responsive’ && (is_active_sidebar(‘headerleft’) || is_active_sidebar(‘headerright’) || is_active_sidebar(‘headercenter’)))? ‘ style=”height: 220px;”‘:”; ?>>

    <?php wp_nav_menu( array( ‘container_class’ => ‘menu menu-top’, ‘theme_location’ => ‘menu_top’,’container’ => ‘div’, ‘fallback_cb’ => false ) ); ?>
    <div class=”row-fluid header-widgets”>
    <div class=”span12″>
    <?php if( ! dynamic_sidebar( ‘headerfullwidth’ )) :?>
    <?php endif; ?>

    <?php if (is_active_sidebar(‘headerleft’) ){ ?>
    <div class=”widgetarea cc-widget span4″>
    <?php dynamic_sidebar( ‘headerleft’ )?>
    </div>
    <?php } ?>

    <?php if (is_active_sidebar(‘headercenter’) ){ ?>
    <div class=”<?php if(!is_active_sidebar(‘headerleft’)) { echo (get_responcive_class() === ‘not-responsive’)? ‘widgets_imp_350′:’widgets_imp_410’; } ?> widgetarea cc-widget cc-widget-center span4″>
    <?php dynamic_sidebar( ‘headercenter’ ) ?>
    </div>
    <?php } ?>

    <?php if (is_active_sidebar(‘headerright’) ){ ?>
    <div class=”widgetarea cc-widget cc-widget-right span4″>
    <?php dynamic_sidebar( ‘headerright’ ) ?>
    </div>
    <?php } ?>
    </div>
    </div>
    <?php do_action( ‘bp_before_access’)?>
    <div class=”stratcher”></div>
    <div id=”access” class=”span12″>
    <div class=”menu”>

    <?php do_action(‘bp_menu’) ?>

    <?php /* Our navigation menu. If one isn’t filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
    <?php wp_nav_menu( array( ‘container_class’ => ‘menu-header’, ‘theme_location’ => ‘primary’,’container’ => ”) ); ?>
    </div>
    </div>

    <?php do_action( ‘bp_after_header_nav’ ) ?>

    <div class=”clear”></div>

    </div><!– #header –>

    <?php do_action( ‘bp_after_header’ ) ?>
    <?php do_action( ‘bp_before_container’ ) ?>

    <div id=”container” class=”container-fluid”>
    <div class=”row-fluid <?php echo cc_get_class_by_sidebar_position(); ?>”>
    <?php do_action(‘sidebar_left’);?>

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘having backgroud image repeat the whole width’ is closed to new replies.