mindapolis Posted December 3, 2013 Share Posted December 3, 2013 hi, on http://anothermileministries.net/test1.php how can I get the image at the bottom to stretch the width of the browser? I have tried putting it in the footer and putting it as a background image but neither worked. <?php require_once('Ftest.php'); ?> <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <style type="text/css"> body { width:100%; margin:0; } header { background-color: #735435; } aside { float:left; } #logo { float: left; } #lonPic{ float: right; padding-top:2%; padding-right:2%; } #headerAdjust { clear:both; } #photos { width: 400px; margin-left:auto; margin-right:auto; } nav { padding-top:2%; padding-bottom:10%; } #mainContent { float:right; margin-left:auto; margin-right:auto; padding-right:20%; } #speakingEngagements { height:20%; width:90%; border-color:#33F; border-style:dotted; } footer { clear:both; width:100%; height:20%; background-image: url(assets/road.jpg); background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: contain; background-size: cover; } </style> </head> <body> <header><!-- html5 tag<header>--> <div id="logo"> <img src="assets/logo.jpg" width="439" height="135" /> </div> <div id="lonPic"> <img src="assets/jenn2.jpg" width="100" height="144" /></div> <div id="headerAdjust"></div> <?php photos(); ?> </header> <aside> <nav> <a href="test1.php" tabindex="1" accesskey="h">Home</a><br /> <a href="aboutMe.php" tabindex="2" accesskey="a">About Me</a><br /> <a href="events.php" tabindex="3" accesskey="u">Upcoming Events</a><br /> <a href="contact.php" tabindex="4" accesskey="c">Contact Me</a> </nav> <div id="speakingEngagements"> Upcoming Speaking Engagements <br /> upcoming <br /> events <br /> will <br /> go <br /> here </div> </aside> <div id="mainContent"> <video width="640" height="360" controls preload="autoplay"> <source src="assets/barbie.mp4" type="video/mp4" preload="autoplay"> <source src="assets/barbie.ogv" type="video/ogg" preload="autoplay"> <object type="application/x-shockwave-flash" data="/mov/player.swf" width="320" height="240" preload="autoplay"> <source src="assets/.m_barbie.mp4" type="video/mp4" preload="autoplay"> <param name="allowfullscreen" value="true" preload="autoplay"> <param name="allowscriptaccess" value="always" preload="autoplay"> <param name="flashvars" value="file=/mov/scene.mp4" preload="autoplay"> <!--[if IE]><param name="movie" value="/mov/player.swf"><![endif]--> <img src="/img/scene-preview.jpg" width="320" height="240" alt="Video"> <p>Sorry but your browser doesn't support HTML5 video.</p> </object> </video> </div> <footer> <img src="assets/road.jpg" alt="road"> </footer> </body> </html> Quote Link to comment Share on other sites More sharing options...
cyberRobot Posted December 3, 2013 Share Posted December 3, 2013 Try adding the following: footer img { width:100%; } Quote Link to comment Share on other sites More sharing options...
mindapolis Posted December 3, 2013 Author Share Posted December 3, 2013 That kind of work but now the height is way too tall. Quote Link to comment Share on other sites More sharing options...
cyberRobot Posted December 3, 2013 Share Posted December 3, 2013 You could try adding the height attribute: https://developer.mozilla.org/en-US/docs/Web/CSS/height Quote Link to comment Share on other sites More sharing options...
mindapolis Posted December 3, 2013 Author Share Posted December 3, 2013 I tried that and that didn't help Quote Link to comment Share on other sites More sharing options...
mindapolis Posted December 3, 2013 Author Share Posted December 3, 2013 Hold on I might have it. Quote Link to comment Share on other sites More sharing options...
mindapolis Posted December 3, 2013 Author Share Posted December 3, 2013 I got it, but the picture looks distorted. Are there any suggestions? Quote Link to comment Share on other sites More sharing options...
cyberRobot Posted December 3, 2013 Share Posted December 3, 2013 Perhaps one of the image background techniques found here will work: http://line25.com/tutorials/basic-web-page-background-techniques-with-css Quote Link to comment Share on other sites More sharing options...
mindapolis Posted December 4, 2013 Author Share Posted December 4, 2013 I still can't get it to look right. Is this idea even feasible? Quote Link to comment Share on other sites More sharing options...
QuickOldCar Posted December 5, 2013 Share Posted December 5, 2013 The reason your image is being distorted is that you define the height of your footer css to 20% height:20%; Eliminate that value and let the footer be as large as needs to be. Now using what cyberrobot said. footer img { width:100%;} Quote Link to comment Share on other sites More sharing options...
cyberRobot Posted December 5, 2013 Share Posted December 5, 2013 The reason your image is being distorted is that you define the height of your footer css to 20% height:20%; Eliminate that value and let the footer be as large as needs to be. See Reply 3...the OP doesn't want the image to be too tall. The only way I can think of is to modify the image so it fits the allocated space. Perhaps the image could be cropped to fit better. Or the image could fade into a solid color. Quote Link to comment Share on other sites More sharing options...
wooxie Posted December 12, 2013 Share Posted December 12, 2013 <img src="assets/road.jpg" alt="road" height="15%"; witdh:"100%"> could be working? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.