Protecting background images

wright67uk · June 20, 2011

Im using a background image in my #Logo div. If i minimise my browser window #bannerright will overlap my image.

I dont want this to happen as the image is a logo that needs to be displayed all of the time.

Is my only way around this to place the image in my html opposed to as a bg image in my css?

What is the usual practice when you want a website to look good in different monitor/browser sizes?

Ive used a 100% width in my banner as I want it to span the whole screen at all times, however things such as my google map have fixed widths. Should I be combining % in one part of my page and then px in another.

Please any suggestions. I have a test page www.1pw.co.uk/b.php.

Any suggestions /constructive critisism welcome.

Many thanks from an amateur wanting to learn.

<!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" />
<link href="header.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="banner">
<div id="bannerleft"></div>
<div id="logo"></div>
<div id="bannerright"><div id="navbar" title="">	 
						 <div id="b1"><p class="centre"><a href="index.html">Directory</a></p></div>
    					 	 <div id="b2"><p class="centre"><a href="business.html">Add Your Business</a></p></div>
   						 	 <div id="b3"><p class="centre"><a href="contact.html">Contact Us</a></p></div>
    	</div><!-- end of navbar-->
</div><!--end of bannerright-->
</div><!-- end of banner-->

@charset "utf-8";
/* CSS Document */
body
{
color:#FFF;
font-family:Tahoma, Geneva, sans-serif;
}
#listhold 
{
width:1000px;
height:auto;
margin-left:auto;
margin-right:auto;
margin-top:20px;
background-color:#06F;
padding-left:10px;
}
#b1 {margin-right:70px; margin-left:70px; height:40px; float:left}
#b2 {margin-right:70px; height:40px; float:left}
#b3 {margin-right:70px; height:40px; float:left}
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: #CCC;}
a.blue {color:#06F;}
p.centre {color:#FFF; margin-top:2px; text-align:center;}
#banner
{
height:80px;
width:100%;
margin-top:30px;
}
#bannerleft
{
background-color:#36F;
height:25px;
width:10%;
float:left;
margin-top:13px;
}
#logo 
{
height:80px;
width:22%;
background-image:url(i-stevenage.png);
background-repeat:no-repeat;
float:left;
overflow:visible;
}

#bannerright
{
background-color:#36F;
height:25px;
width:68%;
float:left;
margin-top:13px;
}

cssfreakie · June 21, 2011

as you can see in your css you gave body a width of 100%. But since it is not wrapped in a div with a fixed width, it will use the window width as a reference. So if you make a window size of 10 px #banner will be 10pixels.

Now as i sneaky tried to tel in the sentence above you require a reference point when working with percentages. For instance a wrapper that has a fixed width. But another thing could be to assign a min-width to en element. That way it can increase in size, but when the window is resized and meets that min-width, it shows a scroll bar.

As far as making sure websites look the same in most browsers. Have a look at the sticky of the css forum and apply those 6 points. besides that make sure your markup and css is valid. This seems logical but most people fail to do so.

Sign In

Protecting background images

Recommended Posts

wright67uk

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information