Controlling content on background images ( responsive design )

[boshkodj]

Hello,

I’ve been stucked with this for very long time.
I was always hard coding it, so it just “fits” with bad principles and tehniques.

For example, look at this site : http://zurb.com/

What is the best way to handle the background image and the content over it, so for instance I want the content to be centered etc..

I did responsive images with padding-top and make it pos : absolute. Later I just puts some random top positions ( relative positions ) to the content until I make it nice.

Cheers.

[Paulie_D]

I did responsive images with padding-top and make it pos : absolute. Later I just puts some random top positions ( relative positions ) to the content until I make it nice.

If you did that then they weren’t background images which was the subject of your post.

Arranging content around bg images is just a matter of setting boundaries on the content based on the bg image of the parent element.

Arranging images in the HTML (lets call them** content images**) and other HTML elements is a different thing entirely.

[boshkodj]

I told that I don’t know how to do it, so I “did it” with paddings.. That’s why I post a question :)

[Paulie_D]

Perhaps you could show us your HTML/CSS in Codepen but if the image is affected by paddings or margins it is NOT a bg image.

[Alen]

Here’s a start : http://codepen.io/alenabdula/pen/ypKnc

[Author]

Posts