StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POPositioning of Content Relative to Background
text
Body
copied!<p>I am new to HTML and CSS and have been struggling with a simple problem. I am designing a music space: <a href="http://theparadisegarage.co/" rel="nofollow">http://theparadisegarage.co/</a> , and I am trying to position the main text box so that the text "disappears" (ie ends) behind the crate in the same place. In reality, the text box changes location depending on the window size. I have tried setting the position to absolute and giving it a fixed (px) margin on the bottom, but it doesn't seem to work. To give you an idea of the basic location that I would like the text box, I positioned the textbox with respect to the top of the browser window (because that seems to work for some reason). I have included relavent CSS. I am stumped... thank you in advance for any help!</p> <pre><code> <html> <body style="background-color:transparent"> <div id="container" style="background-color:transparent" > <div id="logo"> </div> <div id="content" style="float:left" > </div> <div id="navbar" style="position:fixed"> </div> </div> </body> </html> body{ width: 100%; height: 100%; margin: 0; padding: 0; background-image:url(paradisebackground6.jpg); background-repeat:no-repeat; background-attachment: fixed; } container { position:relative; width:100%; height:100%; } content{ position:relative; vertical-align:bottom; margin-top:12.5%; margin-left:190px; margin-right:auto; width:625px; height:372px; overflow:auto; z-index:-40 } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload