stretch header image according to screen resolution

[veki]

I need to define header image to be stretched according to screen size in browsers. The elements i.e sidebars and main are defined by percentages and image does have fixed size in pixels. How to make css code for image to be stretched proportionaly with other elements so it can be nicely seen in all screen resolutions?
The address of site is
eap-iea.org
I attach css code that I have got so far.
Thanks

See the Pen yOgegZ by Vedran Vucic ( @veki) on CodePen.

[VJ]

Hi veki, check this link. may be you are looking for this output right.

http://s.codepen.io/vulchivijay/debug/LNWOga

a lot of things there to learn in terms of code and basics.

[veki]

Hello,
I see that you marked some my code with //. Should I delete that code?

Thanks,

veki

[Beverleyh]

This might help – 3 ways to scale/resize images in responsive design http://www.dynamicdrive.com/forums/entry.php?293-3-Ways-to-Resize-Scale-Web-Images-in-Responsive-Design

[Author]

Posts