0

This may be a question already asked before, but I couldn't find anything on it, and it's a tad strange, so I thought I'd ask it here.

My question is this: is it possible to use a div as a background image for another object, in this case a dt tag in a definition list?

I'll explain it a little more. I have a definition list that organizes to-dos on my page, with the dt being the title of the task and the dd being the description of the task. I also have a div floating to the left of the dt styled to look like a blue circle, which I use as an unread indicator. This works fine on the first dt and dd pair in the list, but afterwards causes the other pairs to get all smashed together underneath it.

I also know that using divs inside of a list is frowned upon, so my ideal solution would be to use the div as a background image for the list, sort of like what Chris Coyier did here: http://css-tricks.com/utilizing-the-underused-but-semantically-awesome-definition-list/ with images. If not, an image would be fine too, I just wanted to know if there was any way to use a div as a background image for another element. Any and all help is greatly appreciated!

Cody Capella
  • 142
  • 1
  • 1
  • 12

1 Answers1

1

It might be possible to use an absolutely positioned div, with a fixed size, and a low z-index to place it behind the dt.

However, I'm sort of confused as to why you would do this and not just add a background image to the definition tag directly.

General_Twyckenham
  • 2,161
  • 2
  • 21
  • 36
  • I ended up doing just that, as I couldn't find a way around it. My main goal was to make the page without images so it can be used across displays with different sizes/resolutions easier, hence me wanting to use css to make shapes using divs (it's also easier for me to change appearances right in the css than having to go back and export images again and again). – Cody Capella Jul 04 '13 at 17:49