Hi, Can some one help me how to reduce css background image in order to fit in mobile version? Images are cutting off a little on the right side when I reduce the window to match mobile size. The last three images on this website: Audio, Music, Design http://www.neoloveproductions.com/about/ I appreciate your help....
You should look into these 2 articles 1: http://www.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-background-images/ 2: http://webdesign.about.com/od/css3tutorials/a/browser-size-cover.htm
My advice -- on mobile just get rid of them. There is no reason to be wasting space on a tiny little mobile screen on PRESENTATIONAL images that add nothing of value to the page/content. That or I'd make smaller versions the same height as the headings, and put them next to the headings when it's narrow. Side note -- might also help if you had accessibility BEFORE adding responsiveness -- your use of absurdly undersized fixed metric (aka px) fonts and hard to read ultra-thin webfonts (that probably look fine on a Mac, but suck everywhere else) REALLY isn't helping make for a good page. 14px on BODY? How to throw accessibility right out the window. Some logical heading orders wouldn't hurt either, but being the usual train wreck of "I cans haz intarnets" turdpress markup -- good luck with that given all the other nonsense in the way.
I just visited your site and your background is just not displayed well in mobile device, Just use this in your css. And it will be fixed... @media (max-width: 470px) { #audio_neo, #music_neo, #graphic_neo { background-size: 100% auto; width: 100%; } }