how do you place multiple images in one div; ( the second image is a normal colour)

[andreea115]

Hi everyone

my question is this. i have a div that is 875px high. the first half of the image will contain a background image. The second half of the div should however just contain a normal background colour i.e: background:#FFF;

http://codepen.io/anon/pen/gjoyh

i am having problems doing this. the code i have drafted only stops at the point where the image end. YOu will notice the image in the middle. the first half of the image is grey; well it should extend another 400 px. the second half should be a normal background colour: white.

i would love some advice on how to draft the code.

warm regards

Andreea

[wolfcry911]

you’ve overridden the white color with the second background declaration (which contains a transparent color). Just use a single background with the white color and the image. Also, don’t use empty divs for spacing layout elements – use margins.

Further, you don’t need to use an image for the gradient (unless you want to support older browsers).

[andreea115]

Hello again wolfcry

i tried using a single colour within the div but i did not work:
http://codepen.io/anon/pen/yIKzg

if possible, can you tell how how to code it correctly.

secondly, the reason why i am using an empty spacing div for the layout is that i am having problems with margin collapse. in the example above, u will not that even though i placed a ” Margin: 0 ” in the containing div (#middlepart_background ) so that i could then apply a padding to the
#white_middle_background, it did not work. that is why i then found that by placing an empty div i could force it apart.

i would be grateful if you could advice me how to tackle the margin collapse in the above example.

warm regards

Andreea

[wolfcry911]

http://codepen.io/wolfcry911/pen/JFwLr

You tried the color with the background, but left the next background declaration in there which again overruled the first.

You are correct that the ‘problem’ was margin collapse, but empty divs are not the solution. I’ve used overflow: hidden; in this case, but a top padding or border on middlepart_background would also have worked. Top padding on white_middle_background will not work because the padding will show either the background color or image and not appear down the 31px you desire.

You may want to consider eliminating the outer div entirely and use the body for those images…

[Author]

Posts