Jump to content


Photo

image in footer


  • Please log in to reply
11 replies to this topic

#1 mindapolis

mindapolis

    Advanced Member

  • Members
  • PipPipPip
  • 257 posts

Posted 02 December 2013 - 10:32 PM

hi, on http://anothermilemi...s.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>



#2 cyberRobot

cyberRobot

    Advanced Member

  • Gurus
  • 1,655 posts

Posted 03 December 2013 - 08:25 AM

Try adding the following:

footer img {
     width:100%;
}

Blogging about PHP and other web development topics at ScorpBytes.com

#3 mindapolis

mindapolis

    Advanced Member

  • Members
  • PipPipPip
  • 257 posts

Posted 03 December 2013 - 11:52 AM

That kind of work but now the height is way too tall. 



#4 cyberRobot

cyberRobot

    Advanced Member

  • Gurus
  • 1,655 posts

Posted 03 December 2013 - 12:05 PM

You could try adding the height attribute:

https://developer.mo.../Web/CSS/height


Blogging about PHP and other web development topics at ScorpBytes.com

#5 mindapolis

mindapolis

    Advanced Member

  • Members
  • PipPipPip
  • 257 posts

Posted 03 December 2013 - 01:50 PM

I tried that and that didn't help



#6 mindapolis

mindapolis

    Advanced Member

  • Members
  • PipPipPip
  • 257 posts

Posted 03 December 2013 - 01:58 PM

Hold on I might have it. 



#7 mindapolis

mindapolis

    Advanced Member

  • Members
  • PipPipPip
  • 257 posts

Posted 03 December 2013 - 02:13 PM

I got it, but the picture  looks distorted.  Are there any suggestions? 



#8 cyberRobot

cyberRobot

    Advanced Member

  • Gurus
  • 1,655 posts

Posted 03 December 2013 - 04:13 PM

Perhaps one of the image background techniques found here will work:

http://line25.com/tu...niques-with-css


Blogging about PHP and other web development topics at ScorpBytes.com

#9 mindapolis

mindapolis

    Advanced Member

  • Members
  • PipPipPip
  • 257 posts

Posted 04 December 2013 - 01:26 PM

I still can't get it to look right.  Is this idea even feasible? 



#10 QuickOldCar

QuickOldCar

    Advanced Member

  • Members
  • PipPipPip
  • 1,707 posts
  • LocationNorthEast Pennsylvania

Posted 05 December 2013 - 02:54 PM

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%;
}


DynaIndex.com
Dynamic search index of websites, links, feeds, title, description, keywords and thumbnail snapshot.

#11 cyberRobot

cyberRobot

    Advanced Member

  • Gurus
  • 1,655 posts

Posted 05 December 2013 - 03:33 PM

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.


Blogging about PHP and other web development topics at ScorpBytes.com

#12 wooxie

wooxie

    Newbie

  • New Members
  • Pip
  • 3 posts

Posted 12 December 2013 - 04:30 AM

<img src="assets/road.jpg" alt="road" height="15%"; witdh:"100%">

 

 

could be working?






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com