Div with image, image with text on it

Forum Moderators: not2easy

Message Too Old, No Replies

Div with image, image with text on it

html/css help

Starbucksamore

4:34 pm on Dec 22, 2014 (gmt 0)

So pleased to find a forum with such long-term posters for help! Thanks in advance!

Probably very simple solution, but would really appreciate an explanation of how to create a page with the following:

I have a background image loaded fine for the body.
Next, I have a logo at the top - I made a div for that.
Next, and this is the trouble area ... I want to load an image and put text on the image. The image needs to be centered and the text needs to be in a particular position on the image.

After that, I have two more divs that are different colors and they will have text on them. Once of the divs will have three columns. Would love help with that part too.

So in summary, two questions:
1. how to put text on an image that is layered itself over another background image

2. how to put three divs within a new div layered on a background image, so that they create three columns.

So thankful, again, for the help!
Gillian

lucy24

5:21 pm on Dec 22, 2014 (gmt 0)

1. how to put text on an image that is layered itself over another background image

#1 You can have multiple backgrounds, one on top of another. So the background of a <div> will display on top of the <body> background, and the background of an inner <div> will go on top of the background of a containing <div>. This is not even a newfangled CSS 3 property; you've always been able to do it.
#2 There is no limit to how deeply the <div> elements can be nested. But if you have eleven nested divs, people who snoop into your HTML will sneer and assume you've used a CMS.
#3 If you want divs to go side by side, experiment with these two forms: {display: inline-block;} applied to the inner divs, or {display: table;} applied to the containing div, with {display: table-cell;} on the inner divs. The background image should be applied to the containing div, unless you only want it to be visible in the central section; then you give the background to the inner div.

Starbucksamore

5:50 pm on Dec 22, 2014 (gmt 0)

Thanks so much, Lucy for the super-quick reply!
Yes, I had been playing with the multiple divs prior to posting my question and thought I must be doing something wrong, because the text that I wanted on the image just won't display on it - it displays above. But I will persist! Perhaps I'm doing something wrong with positioning or margins to bump things out of where I'd like them to be :)

Thanks again!

not2easy

6:30 pm on Dec 22, 2014 (gmt 0)

To have text shown on top of (on the face of, not above) an image, the image would be the background for the container of the text. If the text is appearing above the image, it is because they are both part of the contents of the container. The image should be part of the container element and not part of the container's contents.

For example you could use a

<div class="imagebkgd">

and your css would have something like:

div.imagebkgd {width: some-size; height: auto; background-image: url('/images/imagename.jpg') no-repeat; color: red; font-size: large;}

Your positioning, image size, font properties are set for that div, on your page you add the text you want to appear on the image.

lucy24

7:49 pm on Dec 22, 2014 (gmt 0)

because the text that I wanted on the image just won't display on it - it displays above

The likeliest explanation is the one not2easy gave: you've absent-mindedly used <img> content instead of "background-image". A less likely but also possible explanation is:

-- the div with the background image is set to some height that's more than the height of the image
and
-- the background image is centered (this is the default position) or bottom-aligned
and
-- the text and/or its containing div is top-aligned (also the default)

Starbucksamore

9:09 pm on Dec 22, 2014 (gmt 0)

Thanks for this information - it's very helpful.
I will try what you've suggested for sure.
Will keep you posted :)