Adding a background image using CSS

HTML & CSS
1

I am trying to add a background image to a CSS grid element but it is not working. Here is my code.

.item-header-1 {
	background: #F0EE90 url(111.jpg) repeat-x;
}

I have also tried the following:
background: #F0EE90 url('111.jpg') repeat-x; and
background: #F0EE90 url("111.jpg") repeat-x;

The image file is in the same directory as the html page.

Can anybody help?

SJF

2

Hi there doctorfennell,

and a warm welcome to these forums. :winky:

There is nothing wrong with this,

.item-header-1 {
    background: #F0EE90 url(111.jpg) repeat-x;
}

…so there must be something else in your
CSS that is the cause of your woes. :wonky:

Do you have a link that could help us to
pinpoint the real cause of the problem?

coothead

3

Are you sure the path to the image is correct? The image is in the same directory as your HTML file, not in an “images” folder? And the file name is correct: 111.jpg, not 111.JPG, 111.JPEG or any other variation?

1 Like
4

…and where is the css file located? Or is this inline CSS?

1 Like
5

Thank you to everybody who replied.

Here is a link to the document on the server www.stmichaelsgorey.ie

In playing around with this I have found that it works fine when the CSS is in the head of the document but fails to load the image when I link to the CSS.
The paths to the image file and the CSS file are correct.

SJF

6

There is a background image showing when I view your site.

7

The path to the image will be the path from where the external css file is located.

As your example doesn’t have a linked CSS file we can’t tell whether you have set the path correctly. If your css was in a folder called css in the current directory then your path would be relative to that location (e.g. url(../111.jpg)).

Note that it’s good practice to put your images in an images folder so that they aren’t spread out all over the place anyway.

1 Like
8

Thank you again to everybody who responded to my question. And especially PaulOB for giving me the correct answer.
Once I changed my url to url(…/images/111.jpg) it worked fine.

3 Likes
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.