Note that there are some explanatory texts on larger screens.

plurals
  1. POCan't get background image to be visible with faux-column approach
    primarykey
    data
    text
    <p>There must be something extremely simple I'm messing up, but I can't tell what it is. The two columns appear properly separated and the image is in the correct location (I've dragged-and-dropped the image into the CSS code in VS2012 to verify the path is correct.) The background image should show the left column has being a tan color and the main content column as being white. Instead the background of the entire page is white.</p> <p>Here is the HTML:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;link href="TwoColumnStyle.css" rel="stylesheet" /&gt; &lt;title&gt;Two-column layout&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="wrapper"&gt; &lt;div id="leftColumn"&gt; &lt;ul&gt; &lt;li&gt;First&lt;/li&gt; &lt;li&gt;Second&lt;/li&gt; &lt;li&gt;Third&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="mainContent"&gt; &lt;h1&gt;This is the header&lt;/h1&gt; &lt;h2&gt;Content1&lt;/h2&gt; &lt;p&gt;This is the first paragraph. La de daa.&lt;/p&gt; &lt;p&gt;This is the second paragraph. Doo be doo.&lt;/p&gt; &lt;h2&gt;Content2&lt;/h2&gt; &lt;p&gt;This is the third paragraph. Bow chik a wow wow.&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Here is the CSS:</p> <pre><code>body { width: 960px; margin-left: auto; margin-right: auto; } #wrapper { background-image: url(images/col_bg.png); background-repeat: repeat-y; background-position: left top; } #leftColumn { width: 100px; float: left; } #mainContent { width: 860px; float: right; } </code></pre> <p>Here is the absolute path to the image, though obviously the CSS above is a relative path:</p> <pre><code>http://localhost:10525/layouts1/images/col_bg.png </code></pre> <p>The image is 960px by 1px.</p> <p>Any clues to what I'm doing wrong here? I'm trying to do some experimentation with basic layouts using DIV, and from the information I'm seeing online this is exactly how it should be written (via CSS Missing Manual 2nd edition and online resources.)</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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