2015-07-23 1 views
0

Pour une raison ou une autre, lorsque j'essaie d'ajouter du texte à un div, il me manque habilement. J'essaie d'obtenir le texte à l'intérieur de la div, mais il reste à l'extérieur de celui-ci.Texte en dehors de Div

Voici un JFIDDLE: http://jsfiddle.net/hspwtyag/1/

<div align="center"> 
<div id="box1"> 
<img src="https://upload.wikimedia.org/wikipedia/commons/c/cc/Rectangle_.png" /> 
</div> 

<div id="box2"> 
<h2>Proudly celebrating 10 years</h2> 
</div> 
</div> 

* { 
background-image: url("http://images.virtualworldsland.com/blog/2322/796.jpg"); 
background-attachment: fixed; 
} 

#box1 { 
border-radius: 1px solid black; 
width: 500px; 
background: white; 
border-radius: 15px 15px 15px 15px ; 
} 

#box2 { 
border-radius: 1px solid black; 
width: 500px; 
background: white; 
border-radius: 15px 15px 15px 15px ; 
height: 150px; 
} 

Répondre

3

Il est dans la div - c'est juste votre image de fond qui est vous tromper.

Voir, si je retire l'image d'arrière-plan, et changer la couleur de la div, la Proudly celebrating 10 years peut être vu à l'intérieur le rouge (ie. intérieur la div).

#box1 { 
 
    border-radius: 1px solid black; 
 
    width: 500px; 
 
    background: white; 
 
    border-radius: 15px 15px 15px 15px; 
 
} 
 
#box2 { 
 
    border-radius: 1px solid black; 
 
    width: 500px; 
 
    background: red; 
 
    border-radius: 15px 15px 15px 15px; 
 
    height: 150px; 
 
}
<div align="center"> 
 
    <div id="box1"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/c/cc/Rectangle_.png" /> 
 
    </div> 
 

 
    <div id="box2"> 
 
    <h2>Proudly celebrating 10 years</h2> 
 
    </div> 
 
</div>

+0

Alors, comment pourrais-je contourner ce i.e. garder l'arrière-plan et de garder le blanc div? – JugglingBob

+0

@JugglingBob Changer '*' en 'body' –

0

Vous n'êtes pas ajouterez l'arrière-plan à la page correctement si vous faites cela, il devrait fonctionner:

html{ 
background-image: url("http://images.virtualworldsland.com/blog/2322/796.jpg"); 
background-attachment: fixed; 
} 

#box1 { 
border-radius: 1px solid black; 
width: 500px; 
background: white; 
border-radius: 15px 15px 15px 15px ; 
} 

#box2 { 
border-radius: 1px solid black; 
width: 500px; 
    background: white; 
border-radius: 15px 15px 15px 15px ; 
height: 150px; 
} 

JSFIDDLE

2

Le problème est que vous définissez le fond de tout à votre image. Changez-le en corps et tout ira bien.

body { 
background-image: url("http://images.virtualworldsland.com/blog/2322/796.jpg"); 
background-attachment: fixed; 
} 

http://jsfiddle.net/hspwtyag/2/

+0

MERVEILLEUX, merci! – JugglingBob