background image in css div tag

Question

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>

Yes, without a doubt. It ends in .png and when copy/pasted into he browser bring me to it. — user2962713, Mar 05 '14 at 05:32
Just to be clear, I have an actual image in there, its just part of a coursework assignment and I dont want paste a link to the university severs. And yes, I have another https image working fine. — user2962713, Mar 05 '14 at 05:33
@ralph.m Just on the university's website. We were given the link. — user2962713, Mar 05 '14 at 05:37
Can you change your page to include a standard image link to test that the page handles the image at all. Can you hit f12 and see if there are issues in the console or network tab (chrome) — mplungjan, Mar 05 '14 at 05:39
@mplungjan It shows no reference to this image. Is that strange? — user2962713, Mar 05 '14 at 05:47
@user2962713: see my [answer](http://stackoverflow.com/a/22189494/1516616) given below — Ahsan Khurshid, Mar 05 '14 at 05:49
Have you check the image in the browser. that is, have you open the url of the image (https://example.png) in browser? — Gunaseelan, Mar 05 '14 at 05:50
@gunaseelan Yes I have opened it and it works fine. When I press F12 there is no reference to this image however. — user2962713, Mar 05 '14 at 05:55

score 2 · Answer 1 · edited Mar 05 '14 at 07:58

2

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

edited Mar 05 '14 at 07:58

Gunaseelan

2,494
5
36
43

answered Mar 05 '14 at 05:39

Kheema Pandey

9,977
4
25
26

are you using other CSS code as well, might be possible collapsing somewhere. – Kheema Pandey Mar 05 '14 at 05:47
it would be good if you make a jsbin Demo link with actual image path.. then we can find actual problem – Kheema Pandey Mar 05 '14 at 05:53
just checked.. you update the question.. but since you using secure server it asked for login details – Kheema Pandey Mar 05 '14 at 06:05

Sajad Karuthedath · Answer 2 · 2014-03-05T06:04:07.200

1

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

edited Mar 05 '14 at 06:04

answered Mar 05 '14 at 05:52

Sajad Karuthedath

14,987
4
32
49

Quotes are not necessary, Sajad. – Ahsan Khurshid Mar 05 '14 at 05:53

Boopathi Rajan · Answer 3 · 2014-03-15T06:22:31.873

0

try this

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

edited Mar 15 '14 at 06:22

answered Mar 05 '14 at 05:33

Boopathi Rajan

1,212
15
38

No luck. Tried with and without quotes :( – user2962713 Mar 05 '14 at 05:35

score 0 · Answer 4 · answered Mar 05 '14 at 05:33

0

Try putting double quotes around image url like so

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

answered Mar 05 '14 at 05:33

user3352495

374
3
11

1

Not necessary, unless there a special chars in the URL http://stackoverflow.com/questions/851724/css-background-image-what-is-the-correct-usage – mplungjan Mar 05 '14 at 05:34

Ahsan Khurshid · Answer 5 · 2014-03-05T05:48:11.063

0

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

edited Mar 05 '14 at 05:48

answered Mar 05 '14 at 05:39

Ahsan Khurshid

9,383
1
33
51

1

Will you please share your code with actual URL of an image? – Ahsan Khurshid Mar 05 '14 at 05:52
is `example.png` the same image you want to show? What is the location of image and css file? – Ahsan Khurshid Mar 05 '14 at 05:59

score 0 · Answer 6 · answered Mar 05 '14 at 05:40

0

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/

answered Mar 05 '14 at 05:40

Omar

2,726
2
32
65

Tried 3 images and your link. Nothing at all :( – user2962713 Mar 05 '14 at 05:44

score 0 · Answer 7 · answered Mar 05 '14 at 06:17

0

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.

answered Mar 05 '14 at 06:17

Iqbal Kabir

1,518
10
16

background image in css div tag

7 Answers7