CODEWITHSUNDEEP
htmlcssimagebackground
James
James

Reputation: 39

Why won't background-image display in css?

I have a header to which I'm trying to apply a background texture via image file. The html, css and image files are all in the same directory. This is the html:

<body>
<div id=header>
  <div id=picture>
    <img=src=picture.jpeg alt="Profile" align="right" width="180" height="180"/>
  </div>
  <div id=caption>
    <h1>BannerText</h1>
  </div>
</div>
</body>

and this is the external style sheet code:

#header
{
  background= url('texture.png');
  width:98%;
}

The texture image does not appear. If I use it with the background attribute of the original body tag, that is,

<body background="texture.png">

that does work. That tells me it isn't a problem with the url, and all three files are in the same folder so the relative paths are the same in both the html and css files. Why isn't the texture image showing up as the background to the header div?

Upvotes: 0

Views: 1641

Answers (2)

Stanley Amos
Stanley Amos

Reputation: 232

You should change <img=src=picture.jpeg alt="Profile" align="right" width="180" height="180"/> to <img=src=picture.jpeg alt="Profile" align="right" width="180" height="180"/> and in your css should be {background: url('urimageurl.jpg');. Make sure the path/ route (e.g http://yourcsspath.come/css/it.css is not going to correspond with ../yourimg.png because it's not the path of route domain!) . Thanks

Upvotes: 0

Ivanka Todorova
Ivanka Todorova

Reputation: 10219

It's background: url('texture.png');, not background= url('texture.png');.

Also

<img src="picture.jpeg" alt="Profile" align="right" width="180" height="180"/>

Not

<img=src=picture.jpeg alt="Profile" align="right" width="180" height="180"/>

And it's better to wrap attributes values in quotes. Right - <div id="picture">,

bad - <div id=picture>

Upvotes: 3

Related Questions