CSS help please

Maccy · 14 Jun 2015 at 13:59

I've got a background image and would like to overlay a white box for the all of the content, but keep the background image showing on each side.

I can't think of what to search or how to explain it so have drafted up a quick example in Photoshop -

Can someone explain how to achieve this please? I want the white box to increase in size depending on how much content there will be.
I've tried using a background image and creating a div for all of the content with white background but isn't working!

Alpherah · 14 Jun 2015 at 14:46

Just give it (the div) a background colour of white in the css? Can't imagine why it wouldn't work.
Div {
Background-color: White;
}

Replacing div with the id of your div and apply the background image to the container div or body tag

Magik5 · 14 Jun 2015 at 16:55

Something like this? https://jsfiddle.net/mvzevpwt/

Nymins · 14 Jun 2015 at 17:09

Magik5 said:
Something like this? https://jsfiddle.net/mvzevpwt/

Works, however it would be better to specify a 'min-height' instead of a static 'height' as the div will not change size with the content.

Magik5 · 14 Jun 2015 at 17:18

True, although once the content is in it's probably best not specify a height at all.

shepherd · 29 Jun 2015 at 09:19

How would you know how much content was going to be in there particulalry if its a CMS? I'd stick with the min-height