Background images within a div

Hello!

I placed a background image within a div and specified the dimensions. Once I added more text to the div the white space continued. I am trying to place another image within this div if possible? I would like it to be part of the background, perhaps as a fixed image so it won’t adjust when text is added. Here’s the link: http://jquerymobile.host56.com/proneim/layerslider/webDevelopment.html

Please advise.

Also, I wanted to know if I’m on the right track in making this web site responsive? If not, what are the necessary steps in developing for responsive web?

Thanks!

Yes of course it’s possible - have you tried it? Placing the background image? It would be an underlay under the text so no scrolling would appear (if the text did ever get scrollbars then it would need background-attachment:fixed)

You started making it responsive but as I go close the window, “.content_bkgd2” has a width set so scrollars apear starting at 1024px. Responsive design would allow for shrinking windows and accomodate as such.

Hello RyanReese!

Yes, I’ve tried the background image. Did you see the attachment I sent with my initial response? There was whitespace after I placed my first background image. Do I need to create another div and place background image in that div?

As for the responsive web design… take off the width settings for .content_bkgd2? In other words, set no dimensions? My first time doing the responsive design technique. I watched a couple of tutorials on Lynda.com

Hi,

You have a number of beginner mistakes in your code (mistakes we have all made at some time) that you need to rectify first.:slight_smile:

  1. First of all you have set a height of 381px on your .content_bkgd2 element but your content is in fact many hundreds of pixels taller than that. You never (mostly never) want to set height on content that holds fluid text because that means the text cannot change or be resized by the user without overflowing. Don’t add a height at all and the element will grow with content. If you need an initial height then use min-height instead,

  2. Your background doesn’t cover the content for two reasons. One is the reason I mentioned above because you have a set height and so any content greater than that height just overflows but takes no part in the flow of the page. The other reason in that the element contains a float that hasn’t been contained. Floated elements are removed from the flow so the parent ignores the float as far as its content height is concerned. You need to contain your floats which can easily be done by using overflow:hidden on .content_bkgd2 (assuming you don’t need visible overflow) or instead use anther clearing mechanism such as clearfix.

  3. You are moving things around with relative positioning which is a big mistake because relatively moved elements are in fact never moved at all. They always occupy their original place in the flow of the document. They just appear visually to be somewhere else which results in them overlapping other elements or gaps appearing in the page. Most times you simply need to use margins to push things around. Indeed beginners would seldom ever need to use relative positioning unless it was for some subtle overlapping effects but never in a structural layout. Most times beginners use relative positioning because they have not understood how collapsing margins work or how margins and floats interact so make sure you are familiar with these issues and things get much easier.

Regarding your background then css does allow for multiple backgrounds on the same element but I doubt that is what you want. With the fixes above your background image will fade into the gray background which I believe is what you want. Fixed backgrounds on centred elements are not a good idea because fixed elements are always fixed from the viewport and not related to the element that you apply them to. They will only show in that element if that element is over the position where the fixed background has been placed. This is probably not what you want.

If you are making a responsive site then don’t use fixed px withs but instead use a max-width which will allow the site to go smaller with viewport width. This of course means controlling all your inner elements so that they fit inside smaller widths as required - including things like images and indeed your slider.

Once you set all that up with media queries then ensure you have the appropiate viewport meta tag in place as the one you have in place stops users from zooming if they want to and is akin to turning of zoom in the browser and is really annoying to those of us that need glasses to read.

Hope that’s a start :smile:

Thank you for pointing me in the right direction.