[Poltra]

Hi,

i want to Maintain header Image Proportions for Different Screen resolutions. So if its 1080p or 720p the image is THE SAME but resized. Now its not like that and the image change, zooms, etc.

I know its possible because in another themes i can do that.

please help! :)

thank you

PD: its just with the header image

my website : http://www.josetarodo.com

[ahmetsali]

Hi, this might be done with some custom css, you want to look it like in mobile version on desktops or vice versa.

note: sorry for the delay.

[Poltra]

Yeah thats what i want, the picture to be resized so its the same picture in desktop (720p,1080p), mobile…

Please can you help with that custom CSS? i think it should be an option on the admin panel is quite common.

Please help with this :) one of my last request! :)

[Abbe]

720p and 1080p are native HD resolutions, and they don’t refer to width, but to height!

720p = 1280PX x 720PX
1080p = 1920PX x 1080PX

Keeping that in mind, if u still have the need to write custom css for those sizes, one solution could be this one:

@media screen and (min-width: 1280px) { … }

@media screen and (min-width: 1920px) { … }

Or if you want to just target TV screens:

@media tv and (min-width: 1280px) { … }

@media tv and (min-width: 1920px) { … }

Anyhow, i checked your site on a 15” Retina MacBook (over 1920px) and the image resizes accordingly.

Good Luck!

[Poltra]

Mmmmm… i explain again :)

If you go here you can check it easy:

http://quirktools.com/screenfly or directly

http://quirktools.com/screenfly/#u=http%3A//www.josetarodo.com/&w=1366&h=768&a=1

If on desktop you choose: 15″ (typical of laptop) it shows perfect (easy, my head is on the picture)

If you choose 24″ (my screen size) my head is cutted, its not properly resized to be always the same picture.

did you get it now?sorry for me is hard in english :)

[Abbe]

Hi,

When seeing your site at fullscreen, the image shows correctly. But you are right, your head is cut off. Still that’s the “correct behavior”

So, in my screen that starts to happen when i get close to 1600 pixels, try this:

@media screen and (min-width: 1600px) { .header { background-position:top center; } }


You will notice a jump on the position of the image once reached that number.

[ahmetsali]

@Abbe

thanks for the solution ;)