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
Post a Comment