Dynamically Resizing Background Images

4 replies [Last post]

Fri, 2009-06-12 02:19

eddie22487

Offline

Regular

Timezone: GMT-6

Joined: 2009-05-13

Posts: 13

Points: 6

Hello! On my website, I have multiple buttons across the top and a border that goes all the way around the screen. My boss wants the site to be completely fluent through all browser sizes and resolutions. The problem that I am running into right now, is that my images are overlapping when the window gets too small. Either I need:

1) Dynamically resizing images that shrink with the width of the page (which I need help learning how to do)

2) Someone knows a way to prevent them from overflowing.

Thanks so much! Here is my website:

www.myachi.com/TEST/myachigonsite/

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<LINK REL="StyleSheet" title="Default" HREF="style.css" TYPE="text/css" MEDIA="screen">
 
 
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Myachigon Website</title>
 
 
 
</head>
 
<body>
 
 
<!-- Background Framework -->
<div id="left">
	<div id="bottom_left_border"></div>
	<div id="left_border_bars"></div>
	<div id="top_left_corner_panel"></div>
</div>
 
 
<div id="right">
<div id="bottom_right_border"></div>
<div id="right_border_bars"></div>
<div id="top_right_corner_panel"></div>
</div>
 
 
<div id="top_cross_bar"></div>
<div id="banner"></div>
<div id="top_bg"></div>
<div id="crowd"></div>
 
 
<!-- Buttons w/ Hover in style.css -->
<a id="Home" href="index.html" title="Home"> <div id="home_btn"> </div></a>
<a id="Store" href="store.html" title="Store"> <div id="store_btn"></div></a>
<a id="Tricks" href="tricks.html" title="Tricks"><div id="tricks_btn"></div></a>
 
<!-- Commercial Movie Clip -->
<embed type="video/quicktime" src="http://media.revver.com/qt;sharer=88328/635350.mov" pluginspage="http://www.apple.com/quicktime/download/" scale="aspect" cache="False" height="175" width="180" autoplay="False"></embed>
 
<div id="cam1"></div>
<div id="cam2"></div>
 
<div id="container">
<h1> Myachi Industries Corporation </h1>
<p> Hello Myachi World! </p>
<p class="news"> Check out the newest user submitted art on Myachi's <a href="http://www.myachi.com/Art.html" target="new">Art Page</a></p>
<p class="news2"> New PICS from MyachiGon!!! <a href="http://www.myachi.com/slideshow/slideshow.html">Click Here</a>!!!</p>
<p class="news"> Myachigon LIVE Webcams!! <br /><br /> Check out the Myachi Masters and Fans Jam at FAO -- Anytime!!!  <a href="www.myachi.com/jamcams.html" target="new">Click Here!</a>
<br />
<br /> Username: Myachi <br /> Password: Myachi<br /><br />
 
 Just choose a camera and log in!</p>
 
 
<p class="news2"> Watch Myachi Martha Stewart Episode!!!! <a href="http://www.marthastewart.com/article/myachi-101" target="new">Click Here</a>!</p>
<p class="news"> 
EXTRA! EXTRA!! The Myachi Boyz make the <a href="http://www.nytimes.com/2008/08/12/nyregion/12myachi.html?pagewanted=1&_r=1&sq=myachi&st=nyt&scp=1" target="new">New York Times</a>!!!
</p>
 
<p class="news2"> <a href="http://rss.api.ebay.com/ws/rssapi?FeedName=SearchResults&dfsp=32&from=R6&nojspr=y&output=RSS20&saaff=afepn&siteId=0&afepn=5336329323&customid=&satitle=Myachi&fbfmt=1&sabfmts=0&sascs=0&fsop=32&fsoo=2</p>" rel="nofollow">http://rss.api.ebay.com/ws/rssapi?FeedName=SearchResults&dfsp=32&from=R6&nojspr=y&output=RSS20&saaff=afepn&siteId=0&afepn=5336329323&customid=&satitle=Myachi&fbfmt=1&sabfmts=0&sascs=0&fsop=32&fsoo=2</p></a>	
</div>
 
 
</body>
</html>

and CSS

body {
  text-align: center;
  background-color: #000;
  background-repeat: no-repeat;
  margin-top:10px;
  margin-bottom:10px;
  color:#666666;
 
}
 
body a:link { color:#FF0; }
body a:hover {color:#F60;}
body a:active {color:#F00;}
 
#bottom_left_border {
	background-image: url(images/bottom_left_border.png);
	background-repeat: no-repeat;
	position: fixed;
	left: 30px;
	bottom: 0px;
	width: 110px;
	height: 171px;
	z-index: 3;
}
 
#bottom_right_border {
	background-image: url(images/bottom_right_border.png);
	background-repeat: no-repeat;
	position: fixed;
	right: 15px;
	bottom: 0px;
	width: 110px;
	height: 171px;
	z-index: 3;
}
 
#left_border_bars {
	background-image: url(images/left_border_bars.png);
	background-repeat: repeat-y;
	position: fixed;
	left: 60px;
	bottom: 0px;
	width: 46px;
	height: 100%;
	z-index: 1;
}
 
#right_border_bars {
	background-image: url(images/right_border_bars.png);
	background-repeat: repeat-y;
	position: fixed;
	right: 50px;
	bottom: 0px;
	width: 46px;
	height: 100%;
	z-index: 1;
}
 
#top_left_corner_panel {
	background-image: url(images/top_left_corner_panel.png);
	background-repeat: no-repeat;
	position: fixed;
	left: 0px;
	top: 0%;
	width: 205px;
	height: 193px;
	z-index: 99;
}
 
embed, .embed {
	position: fixed;
	height: 147px;
	width: 173px;
	top: 20px;
	left: 5px;
	z-index: 100;
}
 
 
 
#top_right_corner_panel {
	background-image: url(images/top_right_corner_panel.png);
	background-repeat: no-repeat;
	position: fixed;
	right: 0px;
	top: 0%;
	width: 185px;
	height: 193px;
	z-index: 100;
}
 
#top_cross_bar {
	background-image: url(images/top_cross_bar.png);
	background-repeat: repeat-x;
	position: fixed;
	height: 40px;
	width: 100%;
	top: 60px;
	left: 0px;
	z-index: 90;
}
 
#banner {
	background-image: url(images/banner.png);
	background-repeat: no-repeat;
	position: fixed;
	height: 135px;
	width: 405px;
	top: 15px;
	left: 35%;
	z-index: 100;
}
 
#home_btn {
	background-image: url(images/home_btn.png);
	background-repeat: no-repeat;
	position: fixed;
	height: 40px;
	width: 116px;
	top: 30px;
	left: 15%;
	z-index: 95;
}
 
#home_btn:hover { background-position: -0 -40px; }
#home_btn:active { background-position: -0 -80px; }
 
#store_btn {
	background-image: url(images/store_btn.png);
	background-repeat: no-repeat;
	position: fixed;
	height: 40px;
	width: 116px;
	top: 30px;
	left: 25%;
	float: left;
	z-index: 95;
}
 
#store_btn:hover { background-position: -0 -40px; }
#store_btn:active { background-position: -0 -80px; }
 
#tricks_btn {
	background-image: url(images/tricks_btn.png);
	background-repeat: no-repeat;
	position: fixed;
	height: 40px;
	width: 116px;
	top: 30px;
	right: 30%;
	z-index: 95;
}
 
#tricks_btn:hover { background-position: -0 -40px; }
#tricks_btn:active { background-position: -0 -80px; }
 
 
 
 
#container {
	background-color: black;
	position: center;
	margin-top: 160px;
	height: auto;
	margin-left: 16%;
	margin-right: 16%;
	border: double;
	border-color: red;
	padding: 20px;
	z-index: 0;
 
}
 
p { color: white; 
	text-align: justify;
	margin: 20px;}
 
 
h1 { color: #FDE829; }
 
h2 { 
	color: #FDE829;
	text-decoration: underline;
	text-align: justify;
	}
 
#top_bg {
	background-image: url(images/top_bg.png);
	position: fixed;
	height: 96px;
	width: 100%;
	top: 0%;
	left: 30px;
	background-repeat: repeat;
	z-index: 1;
}
 
#crowd { background-image: url(images/crowd.gif);
		width: auto;
		height: auto;
		position: fixed;}
 
#left { float: left; 
		height: auto;
		width: auto; 
		z-index: 0;}
 
#right { float: right;
		height: auto;
		width: auto;
}
 
#cam1 {
	background-image: url(images/Animated_Gif_Camera1.gif);
	background-repeat: no-repeat;
	position: fixed;
	height: 74px;
	width: 73px;
	left: 3%;
	top: 190px;
	z-index: 98;
}
 
#cam2 {
	background-image: url(images/Animated_Gif_Camera2.gif);
	background-repeat: no-repeat;
	position: fixed;
	height: 74px;
	width: 73px;
	right: 3%;
	top: 190px;
	z-index: 98;
}
 
p.news{ background-image: url(images/logo_mini.png);
		background-position: 5px 5px; 
		background-repeat: no-repeat;
		padding-left: 115px;
		padding-top: 9px;
		height: auto;
		min-height: 30px;
		width: auto;
		margin-top: 10px;
		}
 
p.news2{ background-image: url(images/logo_mini.png);
		background-position: 5px 9px; 
		background-repeat: no-repeat;
		background-color: #333;
		padding-left: 115px;
		padding-top: 11px;
		height: auto;
		min-height: 30px;
		width: auto;
		}

Tags:

CSS Layouts

Fri, 2009-06-12 04:41

Deuce

Offline

Guru

Timezone: GMT-7

Joined: 2005-11-20

Posts: 3731

Points: 1038

Two things. Your code

Two things.
Your code doesn't validate.

And the design is horrible and I know of very few people who will take that site seriously.
It looks like it was designed in the 90's.
You should do some research on design trends and usability.

I offense meant, so sorry if you take it that way.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Thu, 2009-07-02 14:44

eddie22487

Offline

Regular

Timezone: GMT-6

Joined: 2009-05-13

Posts: 13

Points: 6

Believe my I absolutely

Believe my I absolutely agree that my site looks 90's. For some crazy reason, this is the way my boss wants it. I've tried convincing him otherwise, but if it looks any different, I'm not getting a paycheck. :\.

Thu, 2009-07-02 14:52

CupidsToejam

Offline

Guru

Timezone: GMT-5

Joined: 2008-08-15

Posts: 2382

Points: 1268

Quote: It looks like it was

Quote:

It looks like it was designed in the 90's.

Didnt you hear? The 90's are coming back; 90210 and Melrose Place to name two!! I think this is the start of a new trend!! I think my next design will include deep space background, and metal pipes and bars with flashing red lights.

First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS

http://www.pixelbehavior.com

Thu, 2009-07-02 16:55

Deuce

Offline

Guru

Timezone: GMT-7

Joined: 2005-11-20

Posts: 3731

Points: 1038

I reread what I posted and

I reread what I posted and meant to say "I mean no offense".
But yes, I'm thinking of adding some animated pixelated Doom characters to my site as well!

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Dynamically Resizing Background Images

Two things. Your code

Believe my I absolutely

Quote: It looks like it was

I reread what I posted and

New forum topics

User login

Navigation