Having an image in my header

Hi,

not sure what you mean.
About which image are you talking about? about the one with the clouds? please send us a precise link and a screenshot showing what you want to achieve. Use imgur.com or dropbox.

Best regards,
Andy

Hi,

this is what I see on the link you’ve provided us (see screenshot in private section). There I can’t find any header background image, nor a header itself. So please provide us a precise link finally, where we can inspect the elements in question. Admin access would be helpful as well.

Best regards,
Andy

Hi!

The size of the image in the link given by jordan ( http://www.w3schools.com/css/trolltunga.jpg ) is 1000px x 300px. There’s no right image size unfortunately, because different monitors or devices have different screen sizes, for example some screens are using 1600px wide monitor some are 1400px, ipad landscape for example uses 1024px while in portrait it’s 768px. The right size differs in each device or monitor, to know more information regarding it you can check: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

What I can see on my end is same as Andy’s screenshot, it seems that it’s in maintenance mode and we can’t see how it looks like or can’t inspect it further. Can you atleast provide a screenshot on your site so we can atleast know how it looks like. We need as much information we can get so we can provide better solutions. Hope you would understand.

Can you
Regards,
Nikko

Hey!

You can add the following codes to Quick CSS, just replace the IMAGE_URL with the image you have, I will be suggesting image widths on each.

This is for desktops and all screens that uses more than 1024px screen width. Suggested image width is 1600px.

#header {
  background: url('IMAGE_URL') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

This is for ipad or tablets in landscape orientation. Suggested image width is 1024px.

@media only screen and (max-width:1024px) {
  #header {
    background-image: url('IMAGE_URL'); 
  }
}

This is for ipad or tablets in portrait orientation and mobile in landscape orientation. Suggested image width is 768px.

@media only screen and (max-width:768px) {
  #header {
    background-image: url('IMAGE_URL'); 
  }
}

This is for iphone or mobile devices in portrait orientation. Suggested image width is 480px.

@media only screen and (max-width:480px) {
  #header {
    background-image: url('IMAGE_URL'); 
  }
}

You have 4 image with different sizes you need to use, kindly use the suggested image size. Hope this helps.

Best regards,
Nikko

• This reply was modified 7 years, 11 months ago by Nikko.

Hi,

I apologize for that mistake, I forgot to add # (I have fixed the code above). I removed “ from your Quick CSS, however it is still missing this so the header image should show up, kindly add it to Quick CSS:

#top .header_bg {
    background: transparent !important;
}

I tried to add the code and removed it shortly after since I don’t think it looks good with logo and the background.

Best regards,
Nikko

• This reply was modified 7 years, 11 months ago by Nikko.

Hi!

I checked the site and the width is good however, the height of the background image is too long. Can you try to use 220px for the height of the image?

Regards,
Nikko