Image resizing to browser size css/jquery

HTML & CSS
1

Hello,

I’m using jquery and the cycle plugin to cycle through a few images on my homepage inside a container.When i load the website at any browser size, it seems to do the proper thing. The problems arise when i try to make the browser bigger or smaller after that, it does funky things to the images. If you begin to scale the browser when the first image is displayed, it also seems to scale properly for that first image, but goes haywire after that. It pretty much does it in all browsers and i can’t seem to figure out if it’s something im not setting properly within css or if it have something to do with jquery and the cycle plugin.

here’s the website thus far:

www dot beaucoupla dot com

this is my first time writing code


@charset "utf-8";
/* CSS Document */

#mainWrapper {
	/*
	background:#000 right top no-repeat; 
	min-width:1000px;
	min-height:775px;
	border:0px;
	background-color:#000; */
	padding: 0 0 0 1px;
	margin:0;
	top:0;
	left:0;
	width:100%;
}

.mainbar { 
	position:absolute;
	top:0px;
	left:0px;
	display:none;
	visibility:hidden;
	width:78%;
	min-height:100%;
	height:auto;
	/*This works for IE7
	min-height:775px;
	height:775px;*/ 
	border-right: #FFF solid medium;
}

#imagelist {
	left:0;
	position:absolute;
	display:block;
	visibility:visible;
	/* width:auto; static size */
}

#imagelist img {
	display:block;
}

#imagelist img.first {
	display:block;
}

.theimage {
	position:absolute;
	left:0;
	width:100%;
	/* Adding this works for IE7 */
	/* height:775px; */
	border-right: solid #FFF medium;
}


#podcast {
	/*right:303px; */
	position:absolute;
	top:0px;
	left:0px;
	height:100%;
}


.about_info p {
	font-size:1.1em;
		
}

.contact_info, .about_info, .news_info {
	position:relative;
	margin-top:4em;
	margin-left:10%;
	width:78%;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:1.3em;
	color:#FFF;
	height:100%;
}

.contact_info #title, .about_info #title, .news_info #title {
	font-size:1.75em;
	padding-bottom:1.5em;
	color:#1ac089;
	color:#03c5d1;
}
.contact_info .heading {
	color:#c04141;
	font-size:1.2em;
}

.contact_info .mail {
	text-decoration:underline;
}

.contact_info a:hover {
	color:blue;
	text-decoration:underline;
}

.news_info .heading {
	color:#c04141;
}



body {
	/*width:1400px;
	height:775px;*/
	padding:0;	
	margin:0;
	border:0;
	background-color:#000;
}



#share td {
	padding-left:0.5em;
}


#share {
	margin-left:1.4em;
	margin-top:0;
	border-top:0;
	/* padding-top:5; */
	font-size:0.65em;	
}

.sidebar {
	position:relative;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	margin-left:78%;
	margin-top:1em;
	font-size:2em;
	color:#FFF;
}


ul {
	border:0;
	margin:2px;
	text-decoration:none;
}

li {
	list-style:none;
}

a {
	text-decoration:none;
	color:#FFF;
}

a.home:hover {
	color:#bc7bd4;
}

a.news:hover {
	color:#7bd488
}

a.podcast:hover {
	color:#d47b88;
}

a.blog:hover {
	color:#d4cb7b;
}

a.about:hover {
	color:#7bd4c6;
}

a.contact:hover {
	color:#d4a37b;
}

a.twitter:hover {
	color:#33ccff;
}

a.myspace:hover {
	color:#999;
}

a.facebook:hover {
	color:#5b61d5;
}
2

Hi jtodap. Welcome to SitePoint!

Yeah, the site is badly broken in my Firefox browser. There’s a very small height set on those images (19px) which isn’t helping at all. It’s probably inserted by the Javascript.

Frankly, I’s suggest looking at some different scripts. These two in particular are very reliable:

http://www.buildinternet.com/project/supersized/default.php

http://growmedia.ca/blog/2009/10/14/resizable-full-browser-background-image-with-jquery-preserving-aspect-ratio/

http://www.search-this.com/2008/06/17/nicely-fitting-background-images/

http://www.ajaxblender.com/bgstretcher-jquery-stretch-background-plugin.html

3

Hi, most of that page is absolutely positioned and you should never use AP for the structure of a website. It will always fail when you try and test different screen sizes, etc. There is just no flow to it :). It can be broken easily. AP should be used for small design details and other small parts of a website.

Your code is also error prone and bug prone. I’d recommend st arting from sc ratch and rework it to floats instead :slight_smile: