CODEWITHSUNDEEP
htmlcss
Alexander Ho
Alexander Ho

Reputation: 533

css image not showing up

i'm new to css and html. i had something like this and i don't get the background-image show up

...
<style type="text/css">
    #header_contain{
width:935px;
height: 135px;
background-image: url('bg.gif') repeat-x;
background-color:#E42323;
}
</style>

</head>
<body>
<div id="header_contain">
    <h4>haga</h4>
</div>
</body>
...

I checked the image location and it's alright. I put an image from google and it shows. Now it only shows the bg colour. How can i get the bg image show up?

Upvotes: 1

Views: 15973

Answers (4)

Dariush Jafari
Dariush Jafari

Reputation: 5443

In your browser right click on the element and choose inspect element .
In the open window find your element properties and find its background url.
If the url is not correct you will see a tooltip Failed to load the url.

firefox firebug

in the firefox browser, open the firebug plugin and change to console tab, reload the page.
You will see the http requests there. If the browser fail to open the Url, you will see an error at console.

Upvotes: 2

supersaiyan
supersaiyan

Reputation: 1730

You should write

background-image: url('bg.gif');
background-repeat: repeat-x;
background-color:#E42323;
background-position: left top;

You need to undstand all this things like

"background image" is the tag in which you can add image. "background-repeat" this is help you to repeat the image in x and y axis "background-color" is help you in fill the color "background-position" will help you in change the position of image in px , em etc. so over code can be in this way as wel "background: url('bg.gif') #fff left top repeat-x ;"

Upvotes: 1

Marat Tanalin
Marat Tanalin

Reputation: 14123

background-image property value should contain image URL only while you have repeat-x too.

Upvotes: 1

Josh
Josh

Reputation: 2895

Change your css to this:

#header_contain{
width:935px;
height: 135px;
background-image: url('bg.gif');
background-repeat: repeat-x;
background-color:#E42323;
}

Upvotes: 4

Related Questions