Member Avatar for sllymrvn

I'm completely new to web design and I'm creating a site using dreamweaver. I want the home page to fit exactly into the web browser window. There isn't a great deal of content on the home page so I could do it if there's a way of making an image appear at the bottom of the web browser no matter the size. I've tried adjusting the alignment but there's a gap between the bottom of the image and the bottom of the web browser. Ive also tried making the image bigger so it hangs over (hoping the overlap would then be just cut off). This just extends the size of the page so that a scroll bar appears at the side so the user can scroll down to see the bottom of the image.

I'm hoping there's an easy way of doing this (there surely is) but I can't figure it out. Any help would be greatly appreciated.

Once i've figured this out I'm hoping to insert a javascript so that the image randomly changes on each site visit so I'm hoping the solution will apply to all the images (I'll resize the images so they're all the same size.

Hoping someone can help. Thanks, Richard

  • 4 Contributors
  • 5 Replies
  • 398 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by esk9skeets

Dani AI

Generated

Short answer: make a container that exactly matches the browser viewport and put the image into that container as a background (anchored bottom-left) or as a controlled <img>. That avoids the gap/scrollbar you saw (which is usually caused by default body margins or by letting the image sit in the normal flow). 's fixed-position idea is a valid quick fix, but using a viewport-sized container with background positioning scales more predictably across devices.

Example (CSS approach — background anchored bottom-left):

html, body {
  height: 100%;
  margin: 0;
}
.hero {
  min-height: 100vh;
  background-image: url('images/hero1.jpg');
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: auto 100vh; /* image height = viewport height, width scales */
}

Notes: min-height:100vh makes short pages fill the window. background-size:cover is an alternative if you want the image to always fill the area (it will crop parts). Make sure html, body margins are reset to 0 (that often creates the bottom gap).

Random image per load — two reliable options:

  • Server-side (recommended): let the server pick one image and output it (no browser permission prompts, works even with images behind access controls).
  • Client-side: run a small script on DOM ready to pick an image and set the .hero background. If your earlier JS "required permission" or failed in Firefox, you were likely opening the page via file:// or loading images with wrong paths. Test over HTTP (use a simple local server) and check the console for errors.

Simple JS example (client-side):

<script>
document.addEventListener('DOMContentLoaded', function () {
  var imgs = ['images/hero1.jpg','images/hero2.jpg','images/hero3.jpg'];
  var chosen = imgs[Math.floor(Math.random()*imgs.length)];
  document.querySelector('.hero').style.backgroundImage = 'url('+chosen+')';
});
</script>

Troubleshooting tips: inspect computed margins/padding, remove any extra wrapping height, ensure all images share an expected aspect or use background-size to control cropping. 's percent idea is on the right track — for viewport-fitting prefer vh units today. For older browsers give a small JS fallback that sets element height to window.innerHeight.

Recommended Answers

All 5 Replies

Member Avatar for almostbob

image placement is easy with css
css can be an external file that all the files on a site reference, great way to set the style for the entire site, then should you wish, you only need to make a single change to change the whole web page.
styles can go in the head, and they refer to every item on 1 page
styles can be added to an html element then the style referes only to that element.
to position a single image at the bottom of the page, to stay put, even IF the page gets larger than 1 screen the image remains and the page moves around it

<img src='whatever.jpg' style='background:transparent; top:auto; left:auto; bottom:0; right:0; position:fixed;' alt='whatever'>

top and left adjust to image size, bottom right set at zero from page border
css is very powerful, used right it makes layout piece of cake
there is a formum adjacent to this one in the web design forum css forum
containing css gurus to help debug
the W3C has a good basic tutorial http://www.w3schools.com/css/ to learn
what you can do,
when you should do,
and all that
good luck

Member Avatar for sllymrvn

Thanks so much for the help. This worked perfectly.

What I'd like to do now is have a different image appear in the same place (bottom left of the browser window) every time the page is refrehed. I tried running a javascript to do this however this didn't work in firefox and required permission in explorer.

I may create a flash animation to do this if I can figure out how to randomise the order of the images.

Edited by sllymrvn because: n/a
Member Avatar for helioworld

use shoul use % insted of giveing size in pixels then your page full be fully displayed

Member Avatar for almostbob

php image 'randomizer'(almost)

<?php $p = split('/', $_SERVER['SCRIPT_FILENAME']);
$today = getdate();
$script_name = $p[count($p)-1];
$path = './pathtoimages/'; // oops have to set this
$dir_handle = @opendir($path) or die("Unable to open $path");
Function get_Extension($m_FileName){
$path_parts = pathinfo($m_FileName);
if ($path_parts["extension"]) {
$m_Extension = strtolower($path_parts["extension"]);
return(strtoupper($m_Extension));
}
else { return "unknown"; }
}
function check_image($filename){
$temp=strtoupper(get_Extension($filename));
 if(($temp=="JPG")||($temp=="JPEG")||($temp=="GIF"))
return (true);
else
return (false);
}
Function get_Files($path) {
if ($handle = opendir($path)) {
while (false !== ($file = readdir($handle))) {
if(!is_dir($file) && substr($file,O,1) != "."){
$m_Files[]=$file;
}
}
closedir($handle);
}
if(sizeof($m_Files)>1)
asort($m_Files);
return $m_Files;
}
$files=get_Files($path);
$filter_files=array_filter($files,"check_image");
$maxnr=sizeof($filter_files)-1;
sort($filter_files);
$choose = $today[0] % count($filter_files);
echo '<img src="'.$path.$filter_files[$choose].'" alt="'.$path.$filter_files[$choose].'">';
closedir($dir_handle); } ?>

just drop it inplace instead of the existing img tag
user sees <img src=filename alt=filaname>

Edited by almostbob because: n/a
Member Avatar for esk9skeets

Hello helioworld.....I like your suggestion which you have given to sllymrvn.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.