CODEWITHSUNDEEP
cssbackgroundbackground-image
Mr. Holland
Mr. Holland

Reputation: 5

Background Image behind Text

I am attempting to display an image behind the day of the week of each paragraph, but only part of the background image is displaying. I've tried padding previously but could use some assistance as I am a novice with aspects of css.

The html is:

    <section id="top">
    ...
    <p><span>Mon</span><span>Open</span></p>
    <p><span>Tues</span><span>6:30 pm</span>Bible Study</p>...

The css is:

    #top p span:nth-child(1){
    font-family: 'Quintessential', cursive;
    font-size:25px;
    font-weight:normal;
    color:#fff;
    line-height: 59px;
    background-image:url('img/ribbon.png');
    background-repeat:no-repeat;
    }

Upvotes: 0

Views: 2811

Answers (1)

Aaron Smith
Aaron Smith

Reputation: 71

The SPAN is being displayed DISPLAY: INLINE; by default.

Try setting to DISPLAY: INLINE-BLOCK;

Here is some more info on why they work this way: http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

Upvotes: 1

Related Questions