Note that there are some explanatory texts on larger screens.

plurals
  1. POGetting a parent div's background image to show through
    primarykey
    data
    text
    <p>I have a horizontal band on my webpage which is a div class called horizontal-strip, and I have sub-divided this into 2 separate classes called left-horizontal and right-horizontal, so I can have a list of news headlines on the left-hand half and an email signup form on the right-hand half. The horizontal-strip div has a background image, but now that I've added the left-horizontal and right-horizontal classes, the image is not showing through.</p> <pre><code>.horizontal-strip { background: url("ColBackground.png") scroll center top repeat; margin: auto auto 10px; padding: 5px; width: 950px; } .horizontal-strip .left-horizontal { float: left; width: 450px; } .horizontal-strip .right-horizontal { float: right; width: 450px; } </code></pre> <p>This is what the HTML code looks like:</p> <pre><code>&lt;div class="horizontal-strip"&gt; &lt;div class="left-horizontal"&gt; &lt;h1&gt;Top Stories&lt;/h1&gt; &lt;ul class="news-listing"&gt; &lt;li&gt;list of links here... &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;!-- Closes left-horizontal div --&gt; &lt;div class="right-horizontal"&gt; &lt;h1&gt;News Sign-Up&lt;/h1&gt; &lt;p&gt;Enter your email address below to receive automatic updates when a new story is added.&lt;/p&gt; &lt;form action=""&gt; Email: &lt;input name="email" type="text"&gt; &lt;input name="submit" value="Submit" id="submit-button" type="submit"&gt; &lt;/form&gt; &lt;/div&gt; &lt;!-- Closes right-horizontal div --&gt; &lt;/div&gt; &lt;!-- Closes horizontal-strip div--&gt; </code></pre> <p>Can anyone tell me why the background image isn't showing through?</p>
    singulars
    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.
 

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