CODEWITHSUNDEEP
htmlcss
Vaibhav Luthra
Vaibhav Luthra

Reputation: 55

Background Image not working CSS

I have created 5 spans in one div and want to keep one background image for that div.

enter image description here

Background image is not coming properly, below is my code:

JSFiddle link

HTML

<body>
    <div class="mainDiv">
        <span id="intro">Introduction<br>to APO MF</span>
        <span id="apo">APO<br>Diagnostic</span>
        <span id="result">Result of<br>CMP and<br>Maturity</span>
        <span id="discussion">Discussion<br>with CSL</span>
        <span id="annual">Annual<br>improvement<br>plan</span>
    </div>
</body>

CSS

div{
    width: 80%;
    background-image:url("http://author.confirmit.com/isa/EXMRFPJVOQHBOHMKEYPPDKDXOPCQIXPY/APO%20Diagnostic%20survey-VL/background.PNG");
}
span{
    display: inline-block;
    padding: 20px;
    color: #ffffff;
    border-radius: 10px;
    vertical-align:top;
    height:80px;
    text-align:center;
    width:100px;
    padding-top:30px;
    font-size: 18px;
}
#intro{
    background-color: #C0504D;
}
#apo{
    background-color: #9BBB59;
}
#result{
    background-color: #8064A2;
}
#discussion{
    background-color: #4BACC6;
}
#annual{
    background-color: #F79646;
}

Upvotes: 0

Views: 69

Answers (3)

Finrod
Finrod

Reputation: 2550

You can add background-size: cover; to your div style, your image width will fit your div width.

Add also background-repeat: no-repeat; and background-position: center; to center and avoid repeat:

div{
    width: 80%;
    background-image: url("http://author.confirmit.com/isa/EXMRFPJVOQHBOHMKEYPPDKDXOPCQIXPY/APO%20Diagnostic%20survey-VL/background.PNG");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

DEMO

Hope this is what you expect.

Upvotes: 1

Rahul Pal
Rahul Pal

Reputation: 488

change the css for div tag to 


    div {
    width: 80%;
    overflow: hidden;
    background-image:url("http://author.confirmit.com/isa/EXMRFPJVOQHBOHMKEYPPDKDXOPCQIXPY/APO%20Diagnostic%20survey-VL/background.PNG");
    background-size: 100% 100%;
}

Upvotes: 0

Fameless
Fameless

Reputation: 345

You can try it like this background-image: url("../http://author.confirmit.com/isa/EXMRFPJVOQHBOHMKEYPPDKDXOPCQIXPY/APO%20Diagnostic%20survey-VL/background.PNG");

or background-image: url("./http://author.confirmit.com/isa/EXMRFPJVOQHBOHMKEYPPDKDXOPCQIXPY/APO%20Diagnostic%20survey-VL/background.PNG");

Upvotes: 0

Related Questions