Spunky Posted January 27, 2014 Share Posted January 27, 2014 (edited) So I recently noticed that although a site I am working on is set to still look good when it shrinks, these background images that are used for links do not shrink since I have the div height and width set to be the size of the image. I did a little research and came across the background-size property. It works as expected: I change the width and height of the div containing the background-image, set the background-size:100%;, and it changes size according: awesome, I learned something new. However, I am trying to make it so the div's do shrink with a smaller browser and thus far have had no luck. I set up a very basic testing ground and this is what I have come up with: <html><head><style>div#mediaWrap{ width:100%; height:105px; background-image:url(social_greybar.png);}div#buttonsWrap{ margin:0 auto; width:468px; min-width:100px; height:105px;}div#youtubeLink{ height:105px; min-height:45px; width:117px; min-width:50px; float:left; background-image:url(youtube_1.png); background-size:100%;}a div#youtubeLink:hover{ background-image:url(youtube_2.png);}div#facebookLink{ height:105px; min-height:45px; width:117px; min-width:50px; float:left; background-image:url(facebook_1.png); background-size:100%;}a div#facebookLink:hover{ background-image:url(facebook_2.png);}div#googleLink{ height:105px; min-height:45px; width:117px; min-width:50px; float:left; background-image:url(google_1.png); background-size:100%;}a div#googleLink:hover{ background-image:url(google_2.png);}div#twitterLink{ height:105px; min-height:45px; width:117px; min-width:50px; float:left; background-image:url(twitter_1.png); background-size:100%;}a div#twitterLink:hover{ background-image:url(twitter_2.png);}</style></head><body><div id="mediaWrap"> <div id="buttonsWrap"> <a href="http://www.youtube.com/user/" target="_blank"><div id="youtubeLink"></div></a> <a href="https://www.facebook.com/" target="_blank"><div id="facebookLink"></div></a> <a href="https://plus.google.com/" target="_blank"><div id="googleLink"></div></a> <a href="https://twitter.com/"><div id="twitterLink" target="_blank"></div></a> </div></div></body></html> I've tried setting the max width/height as well and when I do that the div's shrink down to the minimum width/height. Edited January 27, 2014 by Spunky Link to comment Share on other sites More sharing options...
davej Posted January 28, 2014 Share Posted January 28, 2014 You might try looking at a tutorial for "responsive" design... https://www.google.com/#q=responsive+css+tutorial Link to comment Share on other sites More sharing options...
ChrisLannister Posted February 14, 2014 Share Posted February 14, 2014 You should also look at the @media declaration http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ /* Smartphones (portrait and landscape) ----------- */@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {/* Styles */} However a fluid design is often best, so you don't have to create css for every screen size. However, responsive design takes much longer; you'll have to do a bit of studying. Link to comment Share on other sites More sharing options...
Ingolme Posted February 14, 2014 Share Posted February 14, 2014 In order to allow your elements to change their width, remove any width rules. You can use min-width and max-width, but if you use width then the width will stay the same all the time. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now