Text positioning over a bkg image

HTML & CSS
1

I have text that I want to lay on top of that bkg img. Since it’s centered, how do I keep the text in the same place, if the user decides to extend the width of their browser?

I’m very new to CSS and all the positioning techniques and how they work are a bit overwhelming. :confused:

Here is a link

http://designingyours.com/undercon/

I want to put all the contact information text aligned to the other text that’s part of the bkg img

Also how do I, in my CSS, get other the contact text to be different sizes, you’ll see what i tried to do in my CSS file.

2

Cool, check it out now, looks great!

3

Glad to help.
:slight_smile:

4

If I am understanding you correctly , you want the text to go INSIDE the box, right?

If this is the case, you want to put your list ( the contact info) INSIDE the id=img div.

<div id="wrapper">
<div id="img">

<ul id=“contact”>

		&lt;li class="title"&gt;&lt;em&gt;&lt;strong&gt;K & M Medical, Inc.&lt;/em&gt;&lt;/strong&gt;&lt;/li&gt;
		&lt;li&gt;333 S.Main Street, Suite 607B&lt;/li&gt;
		&lt;li&gt;Akron, OH 44308&lt;/li&gt;
		&lt;li&gt;&lt;span&gt;Office:&lt;/span&gt; (877) 374-1414&lt;/li&gt;
		&lt;li&gt;&lt;span&gt;Fax:&lt;/span&gt; (330) 374-1633&lt;/li&gt;

		&lt;li&gt;&lt;span&gt;Email:&lt;/span&gt;&lt;a href="mailto:info@kmmed.com"&gt; [email]info@kmmed.com[/email]&lt;/li&gt;
	&lt;/ul&gt;

</div>
</div><!-- End Wrapper –>

then you will want to push the list down away from the ::shudders:: image text… by doing this:
#wrapper ul{ padding-top:360px; padding:left:92px /rough measurements here/}

NOW… that it should like what you want …HERE IS WHAT WRONG WITH all of this. as a concept…

  1. if the viewer enlarges the fonts enough or if you ad more LIs to your contact info… or just generally more content… it will eventually leak out of the box since your background image wont grow.

  2. Why the block of image text?! A user cant google it ( bad SEO) and should he/she/it be interested in copying and forwarding any or all part of the content text.

You should really take the text out ot the bg, put it in a <p> inside the id=“img” div, but before your UL , actually while you are at it use a <hx> tag for “K&M Medical”>

your CSS your css would then need to resemble this:
#wrapper ul, #wrapper h1, #wrapper p{ padding:left:92px ;}
#wrapper h1{padding-top:158px; padding-bottom:29px;}
#wrapper p {padding-top:22px ; }
#wrapper ul {padding-top:50px ; }

This wont help the accessibility issue, but at least you’ll bemove versatile ( if change the image) and you’ll get better SEO

BTW, I eyeballed my measurements so play with the px values +/-

Hope that helps

5

@dresden_phoenix thanks a lot for your input, I’m aware that the text in the img is bad SEO, I just wanted to throw a quick under construction page up and made the contact info real text incase people wanted to copy paste.

You made some great pointers, thanks for them.