Background Image and Text

Exodus_AU · 01-01-2013, 09:34 AM

Hi,

Very new to CSS and im position text and navigation menu over a png background image.

I can get all the alignment ok and as soon as i restore my browser they no longer align.

How can i get this to stay aligned to the background image regardless of Resolution or size of browser?

HTML Code:

Code:

<!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>Make IT Work Computers</title>
<link href="Style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<h1 class="pos_right">Make IT Work</h1>
<h1 class="sml">Computers</h1>
<div id="logo"></div>
<div id="navigation" class="nav_position">
<a href="#">Home</a>|
<a href="#">About Us</a>|
<a href="#">Services</a>|
<a href="#">Shop</a>|
<a href="#">Contact Us</a>
</div>
<p><h2>Welcome</h2></p>
</body>
</html>

CSS:

Code:

/* Background, font and general customisations */
body { 
margin:110px 500px;
font-size:1em;
font-family: "Myriad Pro", "Trebuchet MS", Arial; 
font-size:14px; 
background: url(images/background.png);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center; 
background-color:#000000;
}
p { 
padding-top:-125px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
}

a:hover { text-decoration:underline;}

p { padding: 0 10px 5px 10px; }

/* Headers and List */
h1 { 
font-family: Georgia, &quot;Times New Roman&quot;, Times, serif;
font-size: 36px;
font-weight: bold;
color: #13869b;
text-align: left;
padding:3px 0 0 10px;
}
h1.pos_right
{
position:relative;
left:220px;
top:45px;
}
h1.sml
{
font-family: Georgia, &quot;Times New Roman&quot;, Times, serif;
font-size: 36px;
font-weight: bold;
color: #13869b;
text-align: left;
position:relative;
top:10px;
left:370px;
}
h2 {
font-family: Georgia, &quot;Times New Roman&quot;, Times, serif; 
font-size: 16px; 
font-weight: bold; 
color: #ffffff;
border-bottom: 1px solid #ffffff; 
}
li { 
list-style-type: none; 
line-height: 150%; 
list-style-image: url(images/list.png); 
}
li a:link { 
color: #13869b; 
text-decoration: none; 
font-weight: bold; 
} 
li a:hover { 
display: block; 
color: rgb(0, 96, 255); 
padding-bottom: 5px; 
font-weight: bold; 
border-bottom-width: 1px; 
border-bottom-style: solid; 
border-bottom-color: #169ab2; 
} 
li a:visited { 
color: #13869b; 
text-decoration: none; 
font-weight: bold; 
}

/* Navigation */ 
#navigation {
font-family: "Myriad Pro", "Trebuchet MS", Arial; 
font-size: 26px; 
font-weight: bold;
width:700px;
height:50px; 
margin: 0 auto;
clear:both;
/* border:1px 
solid #169ab2; */ 
text-align:center; 
color:#fff; 
padding-top:4px;}
#navigation.nav_position
{
position:relative;
left:150px;
top:-215px;
}
#navigation a { 
color:#fff;
text-transform:uppercase; 
font-size:14px; 
font-weight:bold; 
text-decoration:none; 
margin:0 20px; 
margin-top:3px;}
#navigation a:hover{ color:#169ab2}

/* Images and Logo */
#logo {
text-decoration:none;
border:0;
width : 269px;
height : 207px;
margin : 0;
padding : 0;
background : url(images/logo.png) no-repeat 0 0;
position:relative;
left:-50px;
top:-120px;
}


/* Links */
a:link { 
color: #13869b; 
text-decoration: underline; 
font-weight: bold; 
} 
a:visited { 
color: #13869b; 
text-decoration: underline; 
font-weight: bold; 
} 
a:hover { 
color: #169ab2; 
padding-bottom: 5px; 
font-weight: bold; 
text-decoration: underline; 
} 
a:active { 
color: rgb(255, 0, 102); 
font-weight: bold; 
}

Excavator · 01-01-2013, 05:18 PM

Hello Exodus_AU,
Put your background in a centered containing element and put your site in that instead of body.
Do you really need all that positioning? I think it would be better to let the document flow naturally. If you did want to position something the #container should be relative and the element you're positioning should be absolute.

See this quick demo on positioning.

And start with something like this -

Code:

<!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">
body, html {
	margin: 0;
	background: #fc6;
	font: 100% "Myriad Pro", "Trebuchet MS", Arial;
	color: #fff;
}
#container {
	height: 600px;
	width: 1000px;
	margin: 110px auto;
	position: relative;
	z-index: 1;
	background: #000 url(images/background.png) no-repeat fixed center;
	font-size: 1em;
}
	h1.sml {margin: 10px 0 0 130px;}
	h1.pos_right {margin: 0 0 0 10px;}
	h1 {
		float: left;
		clear: left;
	}
#logo {
	height: 207px;
	width: 269px;
	position: absolute;
	left: 150px;
	top: -50px;
	z-index: -1;
	background: #f00 url(images/logo.png) no-repeat 0 0;
}
#navigation {
	height: 50px;
	width: 700px;
	float: right;
	background: #6fc;
}
	h2 {
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		border-bottom: 1px solid #fff;
	}
</style>
</head>
<body>
    <div id="container">
        <h1 class="sml">Computers</h1>
        <h1 class="pos_right">Make IT Work</h1>
        <div id="logo"></div>
            <div id="navigation" class="nav_position">
                <a href="#">Home</a>|
                <a href="#">About Us</a>|
                <a href="#">Services</a>|
                <a href="#">Shop</a>|
                <a href="#">Contact Us</a>
            </div>
        <h2>Welcome</h2>
    <!--end container--></div>
</body>
</html>

Exodus_AU · 01-01-2013, 08:45 PM

Hi Excavator,

Thanks for the reply and i see what you mean by letting it flow more naturally. Thanks.

Having the background in a container didn't resolve my issue for example.

I have the background image which should be center and adjust according to the resize (which is working).

I then insert my logo onto a certain area of the page where it should over lap the top corner of the background image (same as with my text/title and navigation).

When i resize the page the background resizes accordingly however the images/texts etc all move off of the background image.

I will try and upload the site for you to see.

Exodus_AU · 01-01-2013, 09:00 PM

Hi,

I have loaded it up: http://mitwc.com.au/Test/index.html

Excavator · 01-01-2013, 11:19 PM

Your background doesn't resize. It moves around when the browser is resized but the image remains 1024x768.

Look at it like this once -

Code:

#container {
            background: url(images/background.png);
		        
		        position:relative;
		        z-index:1;
            margin:0 auto; 
		        width:1024px;
		        height:768px;
            }

Exodus_AU · 01-01-2013, 11:31 PM

OK I see what you mean, sorry im so noob...

Can you see how the text doesnt fit to the background though?

Excavator · 01-01-2013, 11:59 PM

Quote:

Originally Posted by Exodus_AU

OK I see what you mean, sorry im so noob...

Can you see how the text doesnt fit to the background though?

Look in my first post how I floated your headings and how the margins push them around. Floats are how we put elements beside each other...have a look at a float tutorial here.

Exodus_AU · 01-02-2013, 01:04 AM

OK thanks, i still have your float from the first post on the CSS and it does move from left to right when resizing just not up and down (same as logo).

I might start my code from scratch in case something i originally had is causing an issue.

I will let you know tonight.

Exodus_AU · 01-02-2013, 06:20 AM

OK,

I started with the code you put in the first post and the Background just moves around (if i view on a 27" monitor it cuts the bottom off the image).

I then changed the size of the image so that that was working.

The Text i used a float as you stated and it is floating well when i resize and change my broswer from Left to Right however not up and down.

It does not stay aligned to where the bg image is on the page.

Excavator · 01-02-2013, 07:12 AM

So many things affect a site there is no way to tell what's happening without looking at it. A link to the test site with the most recent version of your code would be best.

Posting your entire code here in the forum will work too, just not as well.

Exodus_AU · 01-02-2013, 08:07 AM

Hi Excavator,

I really appreciate your patience on this.

I have uploaded the updated site: http://mitwc.com.au/Test/index.html

My issue is that the Title and Logo all works correctly now (YAY) but the footer using the same code as the header doesnt follow the resize like the rest does.

HTML:

Code:

<!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>Make IT Work Computers</title>
<link href="Style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
	<div id="bgimg"></div>
	<div id="logo"></div>
	<div id="header1">Make IT Work</div>
	<div id="header2">Computers</div>
	<div id="navigation" class="nav_position">
		<a href="#">Home</a>|
    	<a href="#">About Us</a>|
    	<a href="#">Services</a>|
    	<a href="#">Shop</a>|
    	<a href="#">Contact Us</a>
	</div>
</div>
<div id="footer">Copyright &copy; 2010 Make IT Work Computers</div>
</body>
</html>

CSS:

Code:

body 
	{
		text-align:center;
		margin:0;
		background-color:#000000;
	}

#container
	{
		position:relative;
		width: 1024px;
		margin-top: 0px;
		margin-left: auto;
		margin-right: auto;
		text-align:left; 
	}

#bgimg
	{
		position:absolute; 
		overflow:hidden; 
		left:0px; 
		top:17px; 
		width:1024px; 
		height:768px; 
		z-index:0;
		background: url(images/background.png);
		border=0;
		width=1024;
		height=768
	}

#logo
	{
		position:absolute;
		overflow:hidden; 
		left:8px; 
		top:30px; 
		width:269px; 
		height:207px; 
		z-index:1;
		background: url(images/Logo.png);
		border=0;
		width=269;
		height=207;
	}

#header1
	{
		position:absolute; 
		overflow:hidden; 
		left:287px; 
		top:54px; 
		width:402px; 
		height:90px; 
		z-index:2;
		font-size: 40px;
		font-family: Arial,Helvetica,Sans-Serif;
		font-style: normal;
		font-weight: bold;
		color:#13869b;
	}
	
#header2
	{
		position:absolute; 
		overflow:hidden; 
		left:470px; 
		top:91px; 
		width:221px; 
		height:90px; 
		z-index:3;
		font-size: 37px;
		font-family: Arial,Helvetica,Sans-Serif;
		font-style: italic;
		font-weight: normal;
		color:#13869b;
	}

#footer
	{
		position:absolute; 
		overflow:hidden; 
		left:326px; 
		top:745px; 
		width:800px; 
		height:90px; 
		z-index:5;
		font-size: 19px;
		font-family: Arial,Helvetica,Sans-Serif;
		font-style: normal;
		font-weight: normal;
		color:#ffffff;
	}
		
/* Navigation */ 
#navigation 
	{
		font-family: "Myriad Pro", "Trebuchet MS", Arial; 
		font-size: 26px; 
		font-weight: bold;
		width:700px;
		height:50px; 
		margin: 0 auto;
		clear:both;
		/* border:1px 
		solid #169ab2; */ 
		text-align:center;  
		color:#fff; 
		padding-top:4px;
	}
#navigation.nav_position
	{
		position:relative;
		left:150px;
		top:135px;
	}
#navigation a 
	{ 
		color:#fff;
		text-transform:uppercase; 
		font-size:14px; 
		font-weight:bold; 
		text-decoration:none; 
		margin:0 20px; 
		margin-top:3px;
	}
#navigation a:hover
	{ 
		color:#169ab2
	}

Excavator · 01-02-2013, 03:52 PM

Your ap #footer is outside of relative #container so it is not positioned by that element.

Move #container's closing </div> further down in your markup so #footer is enclosed as well.

Exodus_AU · 01-03-2013, 12:54 AM

oh man, how did i miss that?!

Thanks heaps man, sorry this is my first website :S

I will continue browsing this site to learn

Excavator · 01-03-2013, 01:34 AM

Quote:

Originally Posted by Exodus_AU

oh man, how did i miss that?!

Thanks heaps man, sorry this is my first website :S

I will continue browsing this site to learn

This is a great site to learn - lots of smart people here!

While you're looking around, check out the links about validation in my signature line. Both the validators can really help you a lot.

Exodus_AU · 01-03-2013, 05:19 AM

Will do! Again, thank you very much. I appreciate you spending the time with me even as basic as it was!