How to clip the top bar with screen


Tags: html,css

Problem :

How to clip my top bar with screen. So as I goes down on page i mean scrolling down the page the top bar should also move. Just like in Facebook the top bar moves on screen. I am searching google from last 2 hours. But unable to get, that what we calls it.

enter image description here

and my HTML/CSS is ..

#topnavbar
{
 width:100%;
 height:50px;
 background-image:url('top.jpg');
 background-repeat:repeat-x;
}

HTML

 <div id="topnavbar">

 </div>


Solution :

It seems there are some sort of image slider on your page. So what I will suggest you to include z-index also.

#topnavbar
{
 width:100%;
 height:50px;
 background-image:url('top.jpg');
 background-repeat:repeat-x;
 position:fixed;
 z-index:500;
}

    CSS Howto..

    VERY BASIC: How to inline social media logos on a header

    How to apply css to three different classes hovering one of them

    show the div inside that div next to it

    How do I apply (or edit) a broad set of styles to only one class/ID?

    How to add a fade effect to html transition with javascript

    how to spread small image file in background and it should scroll with other elements

    How to display sub menu horizontally?

    How to handle PNG image loading time in html, css

    how to use jquery closest function

    How to create a div with a diagonal (or angled) top line

    How to define different css based on element changing number

    How to use Vendor Properties in Multiple Backgrounds?

    How do you style/select inline-block elements in the first row when in a flexible container?

    How does one creates inner and outer triangles on a div with pure CSS?

    How can I add spaces between two lines using CSS?

    How do I avoid gap when using z-index in CSS?

    How to apply a css class to master page based on the url using jquery? [closed]

    CSS how to hide resize divs while keeping it centerd

    How to override CSS :hover?

    Empty div with 2px width and background color doesnt show with height as 100%

    How to add custom layout and css in a CakePHP application?

    How to style a button inside asp dropdown

    How to add composite css -webkit-mask-image?

    How are styles within div's made 'safer' (i.e. so they do not override parent styles)

    How can I anticipate which type of CSS selector will work?

    How to get GWT console/development mode to generate css errors?

    How to put image and input on the same line with css

    How can I rotate(or change) background image using CSS and Javascript

    CSS: How to theme only submit button (and not cancel or back button) - I´m using Drupal 6

    Dropdown not showing elements Bootstrap 3