Help needed with scaling a background image to fit browser/resolution

P

pantherish

New Member
Hello All!

Thanks for your help...

I am fairly new to dreamweaver and even newer to CSS.

Basically I have a fairly simple website that I'm working on... currently the background is an image thats 2000X1500 (widthxheight)

Now on my 24" mac screen it looks great and fits the browser window perfectly but on a smaller screen or on PCs it looks terrible.

I really need to find a way with HTML or CSS that I can adjust the size of the background image to the size of the users' browser window or resolution... I am happy to loose a bit off the right hand side (with the image aligned left) in order to maintain the aspect ratio

Help much appreciated thanks!

my html for the background is currently:

background-image: url(images/sitebackgroundweb.jpg);
background-repeat: no-repeat;
 
PixelPusher

PixelPusher

Super Moderator
Staff member
Do you have a link to the website, so I can see what you are talking about?

When you say "it looks terrible", do you mean you have scrollbars? the image pixelating? too much of it cropped away?

Of the top of my head....you would be better off not using such a huge image as a background. Nevertheless, if changing it is not an option, try this:

HTML: 
<!--CSS Styles-->

body {
background:url(images/sitebackgroundweb.jpg) top left no-repeat;
}

The image will now be cropped based on the size of the browser window. This can still cut away a lot of the image though if the browser window is very small.
 
PixelPusher

PixelPusher

Super Moderator
Staff member
Ok though of a better solution, still holding to my first statement about not using such a large image, but if you must....try this:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
}
div.image {
background: url(images/Vixen-Lounge.jpg) center no-repeat; 
position:absolute;
width:100%;
height:100%;
}
</style>
</head>

<body>
<div class="image">&nbsp;</div>
</body>
</html>

I don't know how your site is built but you could add a DIV (like above) with a background image and it will crop the image from all sides. Each time the browser window is resized is re-centers the image (cropping what it needs to). This is ideal if your background image has a centered design (point of view). You might be able to add the entire structure of the website into this DIV just replace the "&nbsp:" with your content. Or you could stack the DIV behind your existing website by adding this to the css:

z-index:-20;

without seeing you site I cant help you much more.
 
P

pantherish

New Member
thanks

you can see a preview of the site here

http://felixngonadi.110mb.com/

basically when a computer with a low resolution is used so much of the image is cropped away that only a very small area of it is shown, this ruins the site design as the background image is integral to the design. plus with only a small part shown "kind of zoomed in" the image looks pixelated.

I know i will have trouble incorporating code into my existing design, I am currently on holiday but will give this a go when I return home on the 21st July.

thanks so much for your help it is really appreciated!
 
PixelPusher

PixelPusher

Super Moderator
Staff member
your welcome pantherish.

That is a nice image. I would make it smaller and set it to no repeat. Smaller size will eliminate the grainy look.

Then, choose a background color that works...maybe the purple-ish color and using photoshop blend the image into that color. This way when the body background is set to that same purple-ish color the image will fade into it nicely. This should make it look much better on a wide range of resolutions.
 
P

pantherish

New Member
thanks pixel pusher. again I am away for the next 2 weeks, I will try and get online to see your response sometime in the next week. ...

My HTML at the moment is:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>RiverLounge</title>
<style type="text/css">
<!--
@import url("style1.css");
body {
background-image: url(images/sitebackgroundweb.jpg);
background-repeat: repeat;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
font-size: 18px;
font-weight: lighter;
background-image: url(images/transparanttablebg.gif);
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}
-->
</style>
<link href="style1.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
color: #FFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover {
text-decoration: none;
color: #CCC;
}
a:active {
text-decoration: none;
color: #FFF;
}
-->
</style></head>

<body>
<table width="663" height="248" border="0" cellpadding="5">
<tr>
<td width="649" height="43"><h1><a href="restaurant.html">Restaurant</a> | <a href="bar.html">Bar</a> | <a href="membership.html">Membership</a> | <a href="onlocation.html">On Location</a> | <a href="privatehire.html">Private Hire</a> | <a href="gallery.html">Gallery</a> | <a href="contact.html">Contact</a></h1></td>
</tr>
<tr>
<td height="199"><p><img src="images/logo1.gif" width="361" height="166" alt="logo" /></p></td>
</tr>
</table>
<table width="759" height="523" border="0">
<tr>
<td width="93" rowspan="3" id="bodytable">&nbsp;</td>
<td width="386" rowspan="3" id="tablebg"><p>&nbsp;</p></td>
<td width="59" height="72">&nbsp;</td>
<td width="203" id="tablebg">&nbsp;</td>
</tr>
<tr>
<td height="203">&nbsp;</td>
<td id="bodytable2">&nbsp;</td>
</tr>
<tr>
<td height="102">&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>


I have tried pasting that where the "&nbsp" of your html is and i don't think it works... I can see the page when I preview it in firefox but I don't see the image changing size when i change the size of the browser window... but if the HTML is there I assume something is happening?

Just to make sure here is the HTML of the page, with my page's HTML pasted into the code you gave me:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
}
div.image {
background: url(images/Vixen-Lounge.jpg) center no-repeat;
position:absolute;
width:100%;
height:100%;
}
</style>
</head>

<body>
<div class="image"><style type="text/css">
<!--
@import url("style1.css");
body {
background-image: url(images/sitebackgroundweb.jpg);
background-repeat: no-repeat;
background-color: #3F0A34;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
font-size: 18px;
font-weight: lighter;
background-image: url(images/transparanttablebg.gif);
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}
-->
</style>
<link href="style1.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
color: #FFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover {
text-decoration: none;
color: #CCC;
}
a:active {
text-decoration: none;
color: #FFF;
}
-->
</style></head>

<body>
<table width="663" height="248" border="0" cellpadding="5">
<tr>
<td width="649" height="43"><h1><a href="restaurant.html">Restaurant</a> | <a href="bar.html">Bar</a> | <a href="membership.html">Membership</a> | <a href="onlocation.html">On Location</a> | <a href="privatehire.html">Private Hire</a> | <a href="gallery.html">Gallery</a> | <a href="contact.html">Contact</a></h1></td>
</tr>
<tr>
<td height="199"><p><img src="images/logo1.gif" width="361" height="166" alt="logo" /></p></td>
</tr>
</table>
<table width="759" height="523" border="0">
<tr>
<td width="93" rowspan="3" id="bodytable">&nbsp;</td>
<td width="386" rowspan="3" id="tablebg"><p>&nbsp;</p></td>
<td width="59" height="72">&nbsp;</td>
<td width="203" id="tablebg">&nbsp;</td>
</tr>
<tr>
<td height="203">&nbsp;</td>
<td id="bodytable2">&nbsp;</td>
</tr>
<tr>
<td height="102">&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</body></div>
</body>
</html>

I appreciate that you are really helping me out here, I would be happy to pay you for this if you want, please let me know your email address and I can contact you through that... send you the HTML and files for you to see?

thanks again
 
You must log in or register to reply here.
Top