CODEWITHSUNDEEP
htmlcss
user2840682
user2840682

Reputation: 381

How do I get my backgroun image to display behind the text in my header using CSS3?

I tried checking everything I could to ensure that the image is referenced properly so it can display in my banner but nothing seems to work.

Here is my HTML:

 <header id="header">
     <h1> Most Loved Place on Earth</h1>
  </header>

My CSS3:

  header {font-family: journalregular;
  font-size: 250%;
  text-align: center;
   color:#B22222;
   **background-image: url("images/cover.jpg");}**

The image is in the right folder, and I am using the right extension. I tried the URL without the quotes as well. Help!

Upvotes: 0

Views: 61

Answers (1)

xzegga
xzegga

Reputation: 3139

First, the image path have to be refered in relation of you css path, in your code example, image is located on image folder and shared the same root of css file.

If your css is locadte for example:

rootfolder/css/nameofcssfile.css

and your images is located in:

rootfoder/images/backgroundfile.jpg

So the reference have to be:

background-image: url(../images/cover.jpg);

image path with or without quotes, I prefer without quotes

Upvotes: 2

Related Questions