make header image fixed

  • rollerh4

    (@rollerh4)


    12 years, 2 months ago

    Hello everyone, and my apologies if this has benn answered before.

    I have put a header image in my website ( http://placebopharm.gr ). I want the header to adjust in window’s dimensions and not see different part of the header for each dimension. My css code for the header is that:

    header.tc-header {
background-image:url(http://placebopharm.gr/wp-content/uploads/2014/03/header_background_braille_code_placebo.jpg);
background-attachment:	fixed;
background-size: cover;
}

.tc-header {
    background: none repeat scroll 0 0 #FFFFFF;
    min-height: 200px;
    z-index: 200;
border-bottom: medium none;
    border-top: 8px solid #9DB668;
}

    What should I change?

    Thanks in advance!

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

    (@rdellconsulting)

    12 years, 2 months ago

    I use Resizer to look at different viewports.

    But I don’t think you need to change anything as Czr is fully-responsive.

    Thread Starter rollerh4

    (@rollerh4)

    12 years, 2 months ago

    I know it is fully-responsive, I dont mean to undone this. I just want the header image to be standar, and just get bigger or smaller while changing the dimensions, instead of having more or fewer parts of the image revealed, depending on the height,width.

    acub

    (@acub)

    12 years, 2 months ago

    What you want is not possible, because the header area has different proportions at different page widths. So your image can’t scale proportionally, the viewport sometimes needs to be a crop of the image. I suppose the closest to what you want is:

    {
	background-size: cover;
	background-position: center top;
}

    When very large, it will scale with the page, cropping from the bottom if needed. When very small, it will remain 100% of header height cropping equal portions of left and right side.
    Another option is “background-position: center center;”.

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

The topic ‘make header image fixed’ is closed to new replies.