text over background image diff. width

[kaifreund]

Hi Forum,
I try to set a text over a background image. Both have different! width and should be centered in a frame. The text is justified. But the Text doesn't appear. Whats wrong?

Thx Kai


css:
.background{
z-index:10;
margin:auto;
background: url(../pics/hintergrund.jpg) no-repeat center;
width:1000px;
height:304px;}

.inhalt{
z-index:20;
margin:auto;
padding-top:10px;
text-align: justify;
width:800px;
height:304px;}

----

html:
<div class="background"></div>
<div class="inhalt">sampletext</div>

 

[ChrisHirst]

You have to put the text INSIDE the div if you want it to appear over the background

<div class="background">
<span class="inhalt">sampletext</span>
</div>

Chris.

Indifference will be the downfall of mankind, but who cares?

http://www.candsdesign.co.uk

A website that proves the cobblers kids adage.

http://www.cram-system.com

Nightclub counting systems

So long, and thanks for all the fish.

 

[philote]

First of all, divs are laid out vertically, so as you have it now the 'inhalt' div will be below the 'background' div. I put your code in a page and was able to see the text, though it was more than half way down the page.
You could fix this by using only one div or by absolutely positioning one or both of the divs.

Also, setting the background div to a width of 1000px will cause horizontal scrolling for people with lower screen resolutions or those who don't maximize their browser windows.

 

[kaifreund]

Wow- yes -thx man
kai

 

[Vragabond]

Like philote said, there is absolutely no need for 2 divs:

<style type="text/css">
.myDiv {
  margin: auto;
  background: url(../pics/hintergrund.jpg) no-repeat center;
  width: 1000px;
  height: 304px; 
  padding: 10px 100px 0px 100px;
  text-align: justify;
}
</style>

<div class="myDiv">This will do exactly what you wanted.</div>