CODEWITHSUNDEEP
cssimagehtmlbackground
user2962713
user2962713

Reputation: 15

background image in css div tag

This has been driving me mad for hours. Please someone explain to me why no image is appearing at all. I'm using XHTML 1.0 strict. Many thanks.

CSS:

#flags {
    position: relative;
    background-image:url(example.png);
    background-repeat: no-repeat;
    float: right;
    margin-left: 18px;
    width:400px;
    height:400px;
}

HTML:

<div id="flags">
   <p>text
     <br />
       text
     <br/>
   </p>

   <ul>
       <li>list1</li>
       <li>list2</li>
       <li>list3</li>
   </ul>
</div>

Upvotes: 0

Views: 8193

Answers (7)

Boopathi Rajan
Boopathi Rajan

Reputation: 1210

try this

#flags {
position: relative;
background-image:url("example.png");
background-repeat: no-repeat;
background-position: bottom right;
float: right;
}

Upvotes: 0

Kheema Pandey
Kheema Pandey

Reputation: 10285

when you calling image using background-image please make sure to define the width and height property.

this is your CSS code and I added height and width

#flags {
position: relative;
background-image:url(http://lorempixel.com/200/200);
background-repeat: no-repeat;
background-position: bottom right;
float: left;
width:100%; //width:200px; /* added the width 100% is good for responsive */ 
height:auto; //height:200px; /* added the height For Responsive*/ 
}

Here is the working Demo. http://jsbin.com/lonarezu/1/edit

Upvotes: 2

Iqbal Kabir
Iqbal Kabir

Reputation: 1630

I am sure that either your image path or extension is not correct. Check image extension and place the image in the same folder of html file.

Upvotes: 0

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15827

try url in single quotes

.test{
    width:100%;
    height:415px;
    background-image:url('http://static.fkids.ru/photo/2011/07/2380/Diana-Pentovich5461568.jpg');
    background-repeat:no-repeat;
    }

WORKING DEMO

Upvotes: 1

Ahsan Khurshid
Ahsan Khurshid

Reputation: 9469

The problem is you didn't set any dimensions for #flags div while your div element is floated. So you need to set either height and width of a #flag div or give a css property overflow:hidden to it's parent like given below. Then it will work perfectly fine.

Code:

<div style="overflow: hidden">

    <div id="flags">
        <p>text</p>
        <ul>
            <li>list1</li>
            <li>list2</li>
            <li>list3</li>
        </ul>
    </div>

</div>

Hopefully it will be your answer.

DEMO

Upvotes: 0

Omar
Omar

Reputation: 3050

The problem is with your image address... It works when i put my own image in

    #flags {
    position: relative;
    background-image:url('http://th00.deviantart.net/fs71/PRE/i/2012/193/2/9/agua_png_by_eross_666-d56zr6u.png');
    background-repeat: no-repeat;
    background-position: bottom right;
    float: right;
    }

http://jsfiddle.net/Kq48W/1/

Upvotes: 0

user3352495
user3352495

Reputation: 391

Try putting double quotes around image url like so

background-image:url("https://example.png");

Upvotes: 0

Related Questions