Problem with backgrounds in css in Parallax

[achuka]

Can someone explain why this html:

<section class="book3">
<div class="one-half first" style="text-align: center;">Teaching Resource 01<a href="http://jonwalter.net/wp-content/uploads/2015/05/cw01.png"><img class="aligncenter wp-image-177 size-full" src="http://jonwalter.net/wp-content/uploads/2015/05/cw01.png" alt="TeachingResource01" width="200" height="200" /></a></div>
<div class="one-half" style="text-align: center;">Teaching Resource 02<a href="http://jonwalter.net/wp-content/uploads/2015/05/cw02.png"><img class="aligncenter size-full wp-image-176" src="http://jonwalter.net/wp-content/uploads/2015/05/cw02.png" alt="cw02" width="200" height="200" /></a></div>
<div class="one-half first" style="text-align: center;">Teaching Resource 01<a href="http://jonwalter.net/wp-content/uploads/2015/05/cw01.png"><img class="aligncenter wp-image-177 size-full" src="http://jonwalter.net/wp-content/uploads/2015/05/cw01.png" alt="TeachingResource01" width="200" height="200" /></a></div>
<div class="one-half" style="text-align: center;">Teaching Resource 02<a href="http://jonwalter.net/wp-content/uploads/2015/05/cw02.png"><img class="aligncenter size-full wp-image-176" src="http://jonwalter.net/wp-content/uploads/2015/05/cw02.png" alt="cw02" width="200" height="200" /></a></div>
<div class="one-half first"></div>
</section>

and this css

section.book3 {
	padding: 20px;
	color: #000000;
	margin-top: 70px;
	border-bottom: 2px solid #0a326b;
	background-image: url('http://jonwalter.net/wp-content/uploads/2015/05/redbc.png');
	background-position: center center;
	background-attachment: fixed;
	background-repeat: no-repeat; 
}

does not allow the background image (a solid red) to show behind the images...

I have also tried with background color
and with a much smaller background image set to repeat - still the colour does not fill the div as intended and expected

http://jonwalter.net/close-to-the-wind/

[SavvyJackie]

Hi,
I do not see a section with class book3 on your homepage. This is what appears where a section class book3 might go.

<div id="tr" class="_mPS2id-t mPS2id-target mPS2id-target-first mPS2id-target-last">
<span><p></p>
<div class="book3">
<div class="one-half first" style="text-align: center;">Teaching Resource 01<a href="http://jonwalter.net/wp-content/uploads/2015/05/cw01.png"><img class="aligncenter wp-image-177 size-full" src="http://jonwalter.net/wp-content/uploads/2015/05/cw01.png" alt="TeachingResource01" width="200" height="200"></a></div>
<div class="one-half" style="text-align: center;">Teaching Resource 02<a href="http://jonwalter.net/wp-content/uploads/2015/05/cw02.png"><img class="aligncenter size-full wp-image-176" src="http://jonwalter.net/wp-content/uploads/2015/05/cw02.png" alt="cw02" width="200" height="200"></a></div>
<div class="one-half first" style="text-align: center;">Teaching Resource 01<a href="http://jonwalter.net/wp-content/uploads/2015/05/cw01.png"><img class="aligncenter wp-image-177 size-full" src="http://jonwalter.net/wp-content/uploads/2015/05/cw01.png" alt="TeachingResource01" width="200" height="200"></a></div>
<div class="one-half" style="text-align: center;">Teaching Resource 02<a href="http://jonwalter.net/wp-content/uploads/2015/05/cw02.png"><img class="aligncenter size-full wp-image-176" src="http://jonwalter.net/wp-content/uploads/2015/05/cw02.png" alt="cw02" width="200" height="200"></a></div>
<div class="one-half first"></div>
</div>
<p>
</p></span></div>

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[achuka]

Yes, that's because, in the absence of a very quick response, I've continued experimenting and wanted to see if changing from <section> to <div> made any difference...

The circular Resource links (placeholders at the moment) are supposed to be in a block of red background colour, but as you will see the colour does not extend very far, and that is what I am puzzling to account for / correct

[achuka]

have continued experimenting with different height attributes - all to no avail

think the solution/explanation is going to be connected with image positioning

but this is a VERY straightforward thing I'm aiming for here, which would have been a piece of cake in html/table/rows&columns terms - not sure why it should be perplexing me in css

[SavvyJackie]

Try specifying a min-height of 520px or so instead of height: auto;

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[achuka]

I have tried specifying minimum height, but it's not a responsive solution...

[SavvyJackie]

Add overflow: hidden; to the section.book3 - that should do it and leave the height as auto.

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[achuka]

Thank you!
That works nicely - I don't fully comprehend why yet, but am happy to end the day with it working 🙂

Much appreciate your input.

[SavvyJackie]

My pleasure. One of those quirky things I guess.

"Overflow:

The second method, which is preferred by most people (I think) is to change the CSS of the parent element so that the overflow is anything but "visible". So setting the overflow to "hidden" will force the parent to stretch beyond the bottom of the floated child. This is only true if you haven't set a height on the parent, of course."

Found here: http://stackoverflow.com/questions/16568272/why-doesnt-the-height-of-a-container-element-increase-if-it-contains-floated-el

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[Author]

Posts