Header Image Scrolling

  • I’m using a new header for my website, but when I scroll down, the header image scrolls down too. I’d really like for it to be fixed so that it doesn’t move while I scroll down. What do I need to do?

    I’m using Swell Lite, and I’ve posted in their support forums, but no one has replied me yet.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Vamsi

    (@mannemvamsi)

    Post your website link.

    Thread Starter Sam – Unsheathed

    (@sam-unsheathed)

    https://unsheathedblog.com/

    Vamsi

    (@mannemvamsi)

    If I understood correctly.. Are you thinking about doing something like this ?

    https://jsfiddle.net/mannemvamsi/oz4cn9bm/

    Thread Starter Sam – Unsheathed

    (@sam-unsheathed)

    Basically. What I want is for the header image to remain stationary and not scroll at all while I go down the page.

    Thread Starter Sam – Unsheathed

    (@sam-unsheathed)

    I’m not sure how to assimilate this into my CSS code. A little help, please? Swell Lite is a little different.

    Hi Sam,

    Just get rid of the background-attachment: fixed; in your #custom-header

    Thread Starter Sam – Unsheathed

    (@sam-unsheathed)

    This is the header code for the theme:

    <!-- BEGIN #header -->
<div id="header">

	<?php $header_image = get_header_image(); if ( ! empty( $header_image ) ) { ?>

		<div id="custom-header" <?php if ( has_nav_menu( 'fixed-menu' ) ) { ?>class="fixed-menu"<?php } ?> style="background-image: url(<?php header_image(); ?>);" data-type="background" data-speed="10">

			<?php get_template_part( 'content/logo', 'title' ); ?>

			<img class="hide-img" src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="<?php echo esc_attr( get_bloginfo() ); ?>" />

		</div>

	<?php } else { ?>

		<div id="custom-header" class="non-active<?php if ( has_nav_menu( 'fixed-menu' ) ) { ?> fixed-menu<?php } ?>">

			<?php get_template_part( 'content/logo', 'title' ); ?>

		</div>

	<?php } ?>

<!-- END #header -->

    How do I remove the background-attachment: fixed; part?

    Thread Starter Sam – Unsheathed

    (@sam-unsheathed)

    Anyone still here? I really need the help. Please…I’m new to CSS.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Header Image Scrolling’ is closed to new replies.