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> Link to comment https://forums.phpfreaks.com/topic/284465-image-in-footer/ 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%; } Link to comment https://forums.phpfreaks.com/topic/284465-image-in-footer/#findComment-1461078 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. Link to comment https://forums.phpfreaks.com/topic/284465-image-in-footer/#findComment-1461109 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 Link to comment https://forums.phpfreaks.com/topic/284465-image-in-footer/#findComment-1461110 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 Link to comment https://forums.phpfreaks.com/topic/284465-image-in-footer/#findComment-1461124 Share on other sites More sharing options...
mindapolis Posted December 3, 2013 Author Share Posted December 3, 2013 Hold on I might have it. Link to comment https://forums.phpfreaks.com/topic/284465-image-in-footer/#findComment-1461125 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? Link to comment https://forums.phpfreaks.com/topic/284465-image-in-footer/#findComment-1461129 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 Link to comment https://forums.phpfreaks.com/topic/284465-image-in-footer/#findComment-1461138 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? Link to comment https://forums.phpfreaks.com/topic/284465-image-in-footer/#findComment-1461273 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%;} Link to comment https://forums.phpfreaks.com/topic/284465-image-in-footer/#findComment-1461401 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. Link to comment https://forums.phpfreaks.com/topic/284465-image-in-footer/#findComment-1461414 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? Link to comment https://forums.phpfreaks.com/topic/284465-image-in-footer/#findComment-1462179 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.