CSS: Inserting a background image into a Header

Question

I was trying to insert a background image to act as a backdrop for my Header. It went well if I were to use background color to act as the backdrop for the Header

h2 {
    background-color: red;
    font-family: "Comic Sans MS", cursive, sans-serif;
    font-size: 1.5em ;
    text-transform: uppercase;
} 

However, it does not went well for the background Image....

Code:

h2 {
    background-image: url("gear.png");
    font-family: "Comic Sans MS", cursive, sans-serif;
    font-size: 1.5em ;
    text-transform: uppercase;
} 

Can someone please guide me towards the solution? I highly appreciate your help. Thx

Answer 1

I think the best way would be to wrap your h2 in a div. It would look and be styled a lot better.

<div style="padding:15px;background-image:url('gear.png');background-repeat:no-repeat;">
<h2>This is your header</h2>
</div>

Also make sure that the image is in the same folder as your HTML file

Answer 2

See background-position and background-repeat.

h2 {
    background-image: url("gear.png");
    background-repeat: no-repeat;
    background-position: 0 0;
    font-family: "Comic Sans MS", cursive, sans-serif;
    font-size: 1.5em;
    text-transform: uppercase;
}

Answer 3

You have 2 options:

You can add background as h2 background:

h2 {
    background-image: url("http://www.pawelkaim.com/img/videoEditingIreland.png");
    background-repeat:no-repeat;
    background-position: 0 0;
    font-family: "Comic Sans MS", cursive, sans-serif;
    font-size: 1.5em ;
    text-transform: uppercase;

} 

But this may not be the best solution.

I recommend you to create extra div and put a h2 tag inside:

<div class="bg"> <h1> Hello world</h1></div>

.bg{
    background-image: url("http://www.pawelkaim.com/img/videoEditingIreland.png");
    background-repeat:no-repeat;
    width: 300px;
    height:200px;
}

In this case you can adjust width and height values of your div to achieve best look. Also you can position your heading with Css.

h1{
padding-left: 50px;
padding-top:50px;
}

Here is a fiddle