how I style H1 with an image

Asked

Viewed 1,237 times

-2

I have the following problem, I have a h1 and I need to put an image in it, then the original image of 833 x 56, well I put right through the h1 with the following code <img src="images/h1.png"/>, worked however I could not put a text on it, unless I already put the text together the image, and that is not what I wish, then I made another code that is the following but I did not succeed, the intention with this code was to stay like this !https://i.imgur.com/gt1glYf.png but it was like this !https://i.imgur.com/Qnbgusm.png what I’m doing wrong ?

<div id="left">
            <h1>séries</h1>
            <div class="center_left"></div>
        </div>
<style type="text/css">
h1 {
    position: absolute;
    top: 35px;
    left: 0;
    text-align: center;
    width: 833px;
    height: 56px;
z-index: 9999;
    background: url(../images/h1.png) no-repeat;
}
#left {
            position: relative;
            float: left;
            margin: 0 20px 0 0;
            width: 833px;
        }
.center_left {
            margin: 0 auto;
            width: 703px;
            height: 700px;
            border: 15px solid #d4d4d4;
            background-color: #ebebeb;
        }
</style>
html css
  • 3

    Must be another HTML element in the page that is covering your image, in the test that I made your code is normal, details.

  • I guarantee you don’t, because I’ve done this test, it decreases the image size and gives the same thing, I also put the z-index: 9999

  • look at the question above, the code is that, and I guarantee that there’s nothing "on top of the picture" because she’s with position:absolute and z-index:9999

  • I will edit the question with more code details

  • I tested here and it worked too, funny on my site does not work, finally I will redo my whole site because apparently I can not detect the problem!

  • how so more details ? can I pass you the link of my site ai you see the source code ?

  • Tb tested and worked normal. Are you using any Normalizer or Reset css? Or are you including any other . CSS? By Chrome developer tool you have to see which styles are affecting your element by the Computer Tab

  • then Hugo, my reset is as follows margin: 0; padding: 0; box-sizing: box-sizing; and css other css I pull two that are from awesomefonts, but I think this is not affecting

  • It can be your website link or create an example in jsfiddle that causes the same error as your website would also serve.

  • the link is this Guilherme Nascimento http://www.scrashfilmes.rf.gd/

  • Mayron in Firefox and Chrome loaded normally

  • 1

    I managed to solve friend, I used the beta Chrome, then I changed gave it right

Show 7 more comments

1 answer

1


The author problem was a BUG in Chrome Beta, as himself commented:

I managed to solve friend, I used the beta Chrome, then I changed gave it right

The image in other browsers worked perfectly, but on Chrome Beta looked like this:

chrome beta

Soon it was a problem in the browser version same and nay in the code.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.