Sydney header image fullscreen

Hi,

my site is http://www.daanbijlholtpt.nl

Ive already changed the header image with custom css so that the background is fixed:

.header-image{
  background-attachment: fixed;
  background-position: center top !important;
    -webkit-background-size: auto !important;
	-moz-background-size: auto !important;
	background-size: auto !important;

Now i want to change the size of the background image so that it is fullscreen just like the dynamic function of the sydney header. By changing:

.header-image {
    height: 500px; 

i can change the height, but i want it to be fullscreen. On any device or Resolution does anyone have a idea how to change it?

Hi,

A purely CSS solution would be this:


.header-image {
      background-size: cover !important; /*instead of auto*/
      height: 100vh;
}

You should expect a lack of support for vh for older browsers.

Thanks for your reply.

if i change the code to this:

.header-image {
     background-size: cover !important; /*instead of auto*/
    -webkit-background-size: cover !important;
	-moz-background-size: cover !important;
 	background-position: center top !important;
  	background-attachment: fixed;
 	height: 100vh;

it works, however on my iphone the background is like zoomed in and its not good. When i change the -webkit background size to auto its fine but then on google chrome its not in fullscreen. any tips?

Something like this should do it:


@media only screen and (max-width: 1024px) {
   .header-image {
        -webkit-background-size: auto !important;
        background-size: auto !important;
  	background-attachment: scroll;
   }
}

Edit: also revert the webkit bg size to cover.

I added your code with the other code and it worked, so thanks!

Also, i experienced a little problem with the theme. I tried testing it on my playstation 3 but it wont load the site.( with the ps3 browser ) You can see a red dot in the middle probably from the pre loader and the rest of the screen is white. This was also the case when viewing the Theme from your website. Other theme’s like Moesia werent a problem.

I am not really disturbed by this, because who will view the page on a ps3. but maybe its a error in the code i dont know.

Haven’t tried it on PS3 but even if I do I probably couldn’t pinpoint the exact issue as I wouldn’t be able to check for errors. It’s probably a limitation of the PS’s browser that stops it from running the scripts properly.

What is the header size requirement? 3/5 images are stretched. Thank you!
freewebsiteandhosting.org