Cant see image when source written in CSS

Question

I can't see this image when the page is viewed in my browser.

my CSS code is;

#bar { background:url("/Users/Macbook/Desktop/test website/images/bar.png"); }

and the div section is;

<div id="bar"> </div>

Can you see why i would see nothing in my browser, have i made a error.

Thankyou

Well, if that is all of the code, I'd say it is because the height of the div is 0. Add some padding or a specific height. — crush
– crush, Commented Jan 24, 2014 at 22:05

DaniP · Accepted Answer · 2014-01-24 22:10:14Z

5

You need to put a size on the div. It's size is non-existent since it has no content... it doesn't use the background to determine the size since it's capable of repeating, etc.

You can set height on the element with this:

#bar { background:url("/Users/Macbook/Desktop/test website/images/bar.png"); height:300px; /*Use the value you want can be the height of the background image*/ }

edited Jan 24, 2014 at 22:10

DaniP

38.3k9 gold badges68 silver badges74 bronze badges

answered Jan 24, 2014 at 22:05

CashIsClay

2,34019 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

bjbear123 Over a year ago

sorry i am new to this, how would i do this?

CashIsClay Over a year ago

In your #bar CSS style, add width and height properties that match the dimensions you want. jsfiddle.net/BC9YB

DaniP Over a year ago

width isn't necessary just height.

user1467267 Over a year ago

#bar:grabRightBorder::pullHardRight(800px); cssEngine::sipCoffee()

bjbear123 Over a year ago

Okay thanks this worked, would you know if it is possible to stretch a bar/image whilst keeping its height the same, so the height is fixed but the width changes when the browser scaled? Thankyou for your help

Inversus · Accepted Answer · 2014-01-24 22:13:51Z

Try this:

Set your width and height to arbitrary values in your css, let's say:

#bar { background:url("/Users/Macbook/Desktop/test website/images/bar.png") width: 600px; height: 800px; }

Also, in your html, add something to the div, such as a non-breaking space  

<div id="bar">&nbsp;</div>

Collectives™ on Stack Overflow

Cant see image when source written in CSS

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related