Jbknight3
06-14-2012, 12:19 PM
Sorry if the title is confusing, but I could not think of any other way to put it.
What I am trying to do is use 3 background images for 1 bock of text, which I am trying to use as a title.
The background images would be: A right image, left image, and a center image which would repeat horizontally across the entire div.
I'm trying to make the website scale with the browser size. I have no problem doing that, but I was just letting you know so you guys could make sure that whatever advice you give works around that.
I've uploaded a test site to dropbox to see if any of you could figure out what im doing wrong. I've got it set up like this:
CSS
h1 {
display:block;
background-image:url(images/title-right.jpg);
background-repeat:no-repeat;
background-position:top right;
line-height:50px;
font-family:Tahoma, Geneva, sans-serif;
font-weight:bolder;
font-size:18px;
color:#ce98fe;
}
h1 span {
display:block;
background-image:url(images/title-left.jpg);
background-repeat:no-repeat;
background-position:top left;
line-height:50px;
}
h1 span span {
display:block;
background-image:url(images/title-bg.jpg);
background-repeat:repeat-x;
background-position:top center;
line-height:50px;
}
HTML
<body>
<div id="content" align="center">
<h1>
<span>
<span>My Title Here</span>
</span>
</h1>
</div>
</body>
The problem is that the repeated image is overlapping the 2 side images.
Any help would getting this to work would be greatly appreciated. =)
Download the test site. (https://dl.dropbox.com/u/40074683/Example%20Site.zip)
-Jon
What I am trying to do is use 3 background images for 1 bock of text, which I am trying to use as a title.
The background images would be: A right image, left image, and a center image which would repeat horizontally across the entire div.
I'm trying to make the website scale with the browser size. I have no problem doing that, but I was just letting you know so you guys could make sure that whatever advice you give works around that.
I've uploaded a test site to dropbox to see if any of you could figure out what im doing wrong. I've got it set up like this:
CSS
h1 {
display:block;
background-image:url(images/title-right.jpg);
background-repeat:no-repeat;
background-position:top right;
line-height:50px;
font-family:Tahoma, Geneva, sans-serif;
font-weight:bolder;
font-size:18px;
color:#ce98fe;
}
h1 span {
display:block;
background-image:url(images/title-left.jpg);
background-repeat:no-repeat;
background-position:top left;
line-height:50px;
}
h1 span span {
display:block;
background-image:url(images/title-bg.jpg);
background-repeat:repeat-x;
background-position:top center;
line-height:50px;
}
HTML
<body>
<div id="content" align="center">
<h1>
<span>
<span>My Title Here</span>
</span>
</h1>
</div>
</body>
The problem is that the repeated image is overlapping the 2 side images.
Any help would getting this to work would be greatly appreciated. =)
Download the test site. (https://dl.dropbox.com/u/40074683/Example%20Site.zip)
-Jon