Background image is not working with h1 element

HTML & CSS
1

hi there,

I am trying to use background image with h1 element and it’s not working.

Please, see HTML, CSS, JPEG files attached.

Thank you.

2

The most likely problem is that the path to the image is wrong.

images/header-bg.jpg

This assumes that your images folder is in the same folder as the CSS file. Is that the case?

3

I guess, no. In my css folder there’s only one file which is css file - all my images are in the images folder. Both folders - css and images- are inside ‘site’ folder where I keep web page files.

4

OK, change your code to this then:

url(../images/header-bg.jpg)

That means go up one folder, find the /images/ folder, and the image inside there. Or, if this is online, a better method (IMHO) is to use a root-relative path:

url(/images/header-bg.jpg)

but that won’t work on your local testing site (that is, on your own computer while you are testing) unless you’re using a local server environment like XAMPP or MAMP, so be aware of that. :slight_smile:

5

I did - still not working. I am wondering if this can be related to any conflicting rules in CSS coz the other link on the page itself

<img src=“images/image_2_neonglow.jpg” class=“image” width=“800” height=“600” alt=“”/>
works.

6

A link from the page itself will have a different path from the a path in the CSS file. Perhaps indicate the structure of your site and the location of the css file in relation to the images folder again. Or post a live link.

7

It’s working now, you were correct regarding incorrect path. I also came across below link on the web which pretty much explains what you told me,ralph.m

http://www.codestore.net/store.nsf/unid/BLOG-20081219

pretty basic stuff. sorry for the confusion and thanks again,ralph.m

8

You’re welcome. Glad we cold help. :slight_smile: