[CSS] Background Image not behind text

  • Resolved nast0

    (@nast0)


    15 years, 9 months ago

    Can’t figure this one out, as I’m still learning CSS a little.

    I have a class called “decay” which puts an image behind any text called with that class. i.e.

    <h1 class="decay">Hello World!</h1>

    However, sometimes the image doesn’t show behind the words… it shows about 120px higher up the screen, miles away from the text itself.

    Here’s the CSS for decay;

    .decay {
	background: url('img/decay.gif') no-repeat left center;
	color: #000;
	font: normal 2em Impact,sans-serif;
	letter-spacing: 1px;
	padding: 0 0 12px 22px;
}

    Does anything there look out of place/missing? I can’t fathom why it puts the text in the exact right spot, but the image elsewhere.

    Thank you,
    n

Viewing 3 replies - 1 through 3 (of 3 total)

  • try to add to decay class:

    display:block

    Thread Starter nast0

    (@nast0)

    That made the image disappear altogether… it only seems to happen in certain situations. Trouble is i can’t figure out why. For example 4 bits of text are called in a page with the decay class… and 3 of them work fine. The one at the top, with is under a big 600×300 div is the one that’s causing the problem…

    It’s probably in my code, but I can’t see anything wrong with how I’ve called a VERY simple text class.

    Thread Starter nast0

    (@nast0)

    Seems it was related to having another div above the class. When i put a;

    <div class="clearer"><span></span></div>

    after the first div, and before the text, everything fell right into place.

    Thanks all,
    n

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘[CSS] Background Image not behind text’ is closed to new replies.