css - How do I keep this header responsive? -


i have been given mock-up design header hass curved image (similar http://www.smartwebby.com/images/tutorials/fireworks/website_design_fireworks/pic_header_footer.gif or http://theme-fusion.com/wp-content/uploads/2014/10/curved-header.png). @ top. thing has fluid & responsive. conceptually figure things out before start making them. can me how make responsive. if make 100% width going extremely distorted @ points. ideas?

as guessed can use width: 100% use media queries serve different image different screen sizes such as:

header {     width: 100%; }  @media screen , (min-width : 480px) {     header {         background-image: url("/img/image-xs.png");     } }  @media screen , (min-width : 768px) {     header {         background-image: url("/img/image-sm.png");     } }  @media screen , (min-width : 992px) {     header {         background-image: url("/img/image-md.png");     } }  @media screen , (min-width : 1200px) {     header {         background-image: url("/img/image-lg.png");     } } 

the multiple selection of images allows combat pixelation afraid of. serving image fits screen best @ different break points, keep image quality relatively @ sizes.


Comments

Popular posts from this blog

OpenCV OpenCL: Convert Mat to Bitmap in JNI Layer for Android -

android - org.xmlpull.v1.XmlPullParserException: expected: START_TAG {http://schemas.xmlsoap.org/soap/envelope/}Envelope -

python - How to remove the Xframe Options header in django? -