...

View Full Version : Resolved Using 3 background images for one block of text?



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

coothead
06-14-2012, 01:16 PM
Hi there Jbknight3,

and a warm welcome to these forums. ;)

you do not need three images, just use CSS background-color and border.

Check out the attachment to see it.

coothead

Jbknight3
06-14-2012, 01:29 PM
Wow. That seems way easier! Thank you very much!

Just out of curiosity, is what I originally asked possible? What if it was a more complicated set of images I was trying to use? If you do know how I could make it work, I would love to know for future reference. =)

jimutt
06-14-2012, 01:44 PM
Yes, that is possible :) Here I've made a working solution for you: http://shares.sitefix.se/s#8ce689e2-fe59-4cb5-8e40-10139095e0d3/privat.clouddrive.sitefix.se/Example%20Site%20-%20edited.rar

coothead
06-14-2012, 01:49 PM
Hi there Jbknight3,

check out the attachment, to see an example of three images for the h1 element. ;)

coothead

Jbknight3
06-14-2012, 02:40 PM
Wow! Thanks to both of you for taking the time to make those for me!! I really appreciate it!!

:):):):):):)

Jon

coothead
06-14-2012, 05:09 PM
No problem, you're very welcome. ;)
coothead



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum