confused and dazed Posted June 11, 2014 Share Posted June 11, 2014 Hello Internet, I am struggling with what I am guessing is a relatively simple concept. I have looked at some tutorials on W3 and did general searches on the internet. The effect I am trying to accomplish it to have the image I supply as a background image scale with the screen size - screen size meaning 100% vs 75% vs 50%. In the attachment the Tan area is an image I want to scale with the screen size. My primary two constraints are: 1. I want the background color to be a dark gray 2. I also want the tan image that is 1000px wide centered in the screen. The height is irrelevant because it’s the sides that are important to me. The height can be any size. If the screen is at 100% or at 25% the height needs to fill the whole screen. I have tried many things - height:auto, height:100%, em, divs... many different things. If you can direct me to a tutorial or help in any way I would appreciate it. I did include a file that shows the effect I am looking for.Screen size.pdf Link to comment Share on other sites More sharing options...
newseed Posted June 11, 2014 Share Posted June 11, 2014 You might try background-size: 100%; Adjust to suit. Link to comment Share on other sites More sharing options...
confused and dazed Posted June 11, 2014 Author Share Posted June 11, 2014 Does not work - I have a background color of #000E0E (with a body {} call) and an image i want down the center to scale with the screen.... Link to comment Share on other sites More sharing options...
newseed Posted June 11, 2014 Share Posted June 11, 2014 Is the image embedded in the html? If so, set the image size to be width: 100%; It will fit in whatever the containing div is. Link to comment Share on other sites More sharing options...
confused and dazed Posted June 11, 2014 Author Share Posted June 11, 2014 I dont think you are getting the whole issue here - If I place an image in a DIV container i still have not been able to size the container to fit the screen (height) 100%. I can size the image within the DIV exactly the way I want it - thats not the problem - the problem is sizing the DIV to the screen. Link to comment Share on other sites More sharing options...
confused and dazed Posted June 11, 2014 Author Share Posted June 11, 2014 Im sorry - background-size100% does work. Sorry for that newseed.... Link to comment Share on other sites More sharing options...
dsonesuk Posted June 11, 2014 Share Posted June 11, 2014 (edited) You can only achieve 100% height in html,body tag, and a direct child element of body only using min-height: 100%;, when html and body are given 100% height;. <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Background Image Height changing with Screen Size</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script type="text/javascript"> </script> <style type="text/css"> html, body {height: 100%; margin:0; padding:0; background-color: #000; min-width:480px;} #tan-really-question-mark {width: 75%; margin: 0 auto; min-height: 100%; background-color: #494529; overflow:hidden; text-align: center;} </style> </head> <body> <div id="tan-really-question-mark"> <p>more like s@#t brown to me</p></div> </body></html> Edited June 12, 2014 by dsonesuk 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