[Solved] Positioning images & text over background image

[chrysolight]

I have been trying to get both an image that needs to float left and some text that I want to float to the lower right of a background image to behalf correctly. The text jumps down from the background image when the browser window is shrunk smaller. Should the background image be placed in a div and not as a background?

The code is posted here:

See the Pen ReducedTestCase_1 by RK Robinson ( @chrysolight) on CodePen.

<script async src=”//assets.codepen.io/assets/embed/ei.js”></script>

Here is what the code should look like:

And here is the current result when browser window made smaller:

Thank you for anyone’s assistance.

[chrysolight]

Thanks Paulie_D,
I will be using text, but I have no idea how to get the text to position correctly. I converted the text to an image just for the purpose of presentation here, as I was better able to control the image. The text needs to display on the lower right side of the brown wood-grain background, lower than the logo image, and be able to float as the screen size changes, as well as when a viewer resizes their browser window on a pc or tablet. Your code has the ‘Quality’ text image floating appropriately, but how can we get it positioned so that it floats below the ‘DK’ image when the widow is resized, but still over the brown background? If all 3 images are set as stacked background images is it possible to position one of the background images differently?

[chrysolight]

Thank you – this issue is now resolved.

[Author]

Posts