CODEWITHSUNDEEP
htmlcss
JugglingBob
JugglingBob

Reputation: 275

Text Outside of Div

For one reason or another, when I attempt to add text to a div, it cleverly misses it.

I'm trying to get the text INSIDE the div, but it's staying outside of it.

Here's a 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;
}

Upvotes: 0

Views: 163

Answers (3)

Barbara Laird
Barbara Laird

Reputation: 12717

The problem is you set the background of everything to your image. Change it to body and you'll be fine. 

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

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

Upvotes: 2

user4879488
user4879488

Reputation:

You aren't adding the background to the page properly if you do this it should work:

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

Upvotes: 0

ᔕᖺᘎᕊ
ᔕᖺᘎᕊ

Reputation: 3011

It is inside the div - it's just your background image that's tricking you.

See, if I remove the background image, and change the div's color, the Proudly celebrating 10 years can be seen inside the red (ie. inside the 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>

Upvotes: 3

Related Questions