Movable Type Community Forum > Need help w/ adding Banner Images

Full Version: Need help w/ adding Banner Images

Movable Type Community Forum > Additional Resources > Tips and Tricks

Rev

Mar 10 2003, 12:47 PM

Hi everyone, I'm new at this so please bear with me if I did something incredibly retarded =)

I spent a few hours yesterday setting up MT 2.63 and was quite pleased with myself seeing as I've never done CGI work before. Riding on that feeling of satisfaction, I thought I would one-up myself and put up a few images.

Uh oh

I've tried many ways, copied and pasted CSS inserts from http://www.w3schools.com/css....osition for static bg image, but nothing even shows up when I pasted that into my CSS template editing area and rebuilt everything.

I searched the forums for a while yesterday looking for ways to put up a STATIC banner-esque image that will go on the top of all my pages...and for everyone else that seemed to work fine, what's wrong with mine??

I also came across something suggested by some of the members, MTInclude or smth along that line, anyone care to help a lost n00b MT-er? =)

Here's the page btw (edited a bit of Plain Jane style, smaller font/spacing, in DIRE need of some images

)
http://cgi.sfu.ca/~jhuanga/

Many thanks in advance.
-j

Rev

Mar 11 2003, 11:48 AM

ttt

kadyellebee

Mar 11 2003, 01:28 PM

I would guess that the additional html tags in your stylesheet are causing the problem. Instead of this:

CODE

<html>
<head>
<style type="text/css">
body
{
background-image:
url("http://www.sfu.ca/~jhuanga/Logo/nr2.jpg");
background-repeat:
no-repeat;
background-position:
center center
}
</style>
</head>

</html>

just use this:

CODE

body
{
background-image:
url("http://www.sfu.ca/~jhuanga/Logo/nr2.jpg");
background-repeat:
no-repeat;
background-position:
center center
}

Kristine

Rev

Mar 12 2003, 11:27 AM

I think that was the problem! I'm going to play around the margin now because the image shows up, but the content is now blocking the img

Thanks Kristine!

edit: spelled Kristine with Ch

Rev

Mar 12 2003, 12:12 PM

QUOTE

body
{
background-image:
url("http://www.sfu.ca/~jhuanga/Logo/nr2.jpg");
background-repeat:
no-repeat;
background-position:
top left
}

h1, h2, h3 {
margin: 0px;
padding: 0px;
}

#banner {
font-family:verdana, arial, sans-serif;
color:#CC9933;
font-size:17px;
font-weight:bold;
background:#FFF;
padding-left:15px;
}

#content {
float:left;
width:75%;
background:#FFF;
margin-right:15px;
margin-bottom:20px;
}

#links {
background:#FFF;
color:#CCC;

Let me reiterate the question a bit, how do people adjust it so the top margin isn't covering my banner/bg image?

h1 seems to affect EVERY top margin in the document, and there doesn't seem to be a place where I can just adjust the "px" amount so that the title would move down and not cover the banner.

I'm just confused because for the links/calendar area, there's a top margin px amount that you can adjust, there doesn't seem to be one for the main content area??

kadyellebee

Mar 12 2003, 12:28 PM

If I'm understanding what you are looking for, maybe this will help?
Add margin-top:500px; to your #banner class so it looks like this:

CODE

#banner {
font-family:verdana, arial, sans-serif;
color:#CC9933;
font-size:17px;
font-weight:bold;
background:#FFF;
padding-left:15px;
margin-top:500px;
}

Post back if I misunderstood what you were trying to do!

Kristine

Rev

Mar 12 2003, 12:41 PM

Kristine, there are no words I can use to describe my gratitude.

So, yet another simple thanks would have to suffice

rev, a very happy newbie MT user ^^

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.