2

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

2
  • 4
    Your div has no dimensions. Commented Jan 24, 2014 at 22:05
  • 1
    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. Commented Jan 24, 2014 at 22:05

2 Answers 2

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*/ } 
Sign up to request clarification or add additional context in comments.

5 Comments

sorry i am new to this, how would i do this?
In your #bar CSS style, add width and height properties that match the dimensions you want. jsfiddle.net/BC9YB
width isn't necessary just height.
#bar:grabRightBorder::pullHardRight(800px); cssEngine::sipCoffee()
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
0

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 &nbsp;

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

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.