Jump to content

Background Image Height changing with Screen Size

confused and dazed

Recommended Posts

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

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 by dsonesuk
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...