float gif over png

  • i have a png logo in the header of the the page.

    I have a small gif, i want to put this gif on top of the png.

    not above, but float over it like as if it was another layer.

    im using a modified piano black theme.

    i dont even know where to start. someone get me on the right track and i can figure the rest out

    thanks for your help guys.

Viewing 15 replies - 1 through 15 (of 22 total)

  • i dont even know where to start.

    with the basics (?):

    https://www.w3schools.com/css/css_positioning.asp

    Thread Starter mrhodesit

    (@mrhodesit)

    ok where do i put this? the style.css file? i want the image in the header. so do i put one portion of this in the style.css, and one in the header? i cant get it to work right, what am i doing wrong.

    <html>
<head>
<style type="text/css">
img
{
position:absolute;
left:0px;
top:0px;
z-index:1;
}
</style>
</head>
    Thread Starter mrhodesit

    (@mrhodesit)

    this is the second part
    `<body>
    <h1>This is a heading</h1>
    <img src=”heart3.gif” width=”100″ height=”140″ />
    <p>Because the image has a z-index of -1, it will be placed behind the text.</p>
    </body>
    </html>’

    Thread Starter mrhodesit

    (@mrhodesit)

    do i put it all in the same file, which file? someone please elaborate

    instructions for these basic css applications are examples only, to show the general working. they are not meant to be ‘copy/paste’ codes.

    it is easier to discuss your css issue with a link to your site.
    otherwise any help will be guesswork and difficult to apply.

    the image tag has to go into header.php, into the same div as the png;
    it further also depends if the png is a background image.

    Thread Starter mrhodesit

    (@mrhodesit)

    the png is a background image

    i wish there was a way i could talk to you alchymyth in an instant messenger

    i am not allowed to post the link on a forum, im doing this for someone else

    Thread Starter mrhodesit

    (@mrhodesit)

    i cant find the png in the header.php

    im using “firebug” so i know which div the png background image is in, but it does not actually say the name of the file i dont see the background.png “img src”

    It probably wont be an img src but it will be applied via css with the background property.
    https://www.w3schools.com/css/css_background.asp

    Thread Starter mrhodesit

    (@mrhodesit)

    ok thank you so much im almost there i think i got it, how do i go about shrinking the size and making it clickable, you know like a link to another page.

    Thread Starter mrhodesit

    (@mrhodesit)

    ok i got it, i can do it with img src. i can resize it,and make it float on top, but im having trouble with posisitioning

    You really shouldn’t try to resize images in the browser as it will distort the image, you should resize using a image editor then reupload the image. It depends on how your inserting the gif, with and img tag or with css with the background, etc.
    Like alchymyth it’s hard to really give any definite answers without being able to see the site.

    Thread Starter mrhodesit

    (@mrhodesit)

    i can only move it to 2 different posistions. i want complete controll of where it goes

    Thread Starter mrhodesit

    (@mrhodesit)

    my email is [email protected]

    if either of you want to shoot me an email that would be great, we can discuss in real time. out of respect for the forum i will post results and how we did it once i get it figured out

    Thread Starter mrhodesit

    (@mrhodesit)

    i have noticed that the other images that move the way i want this image to are connected to the stylesheet. so when i move it slightly to the left or to the right or up and down i am modifying the stylesheet. how do i link the image atributes to the stylesheet?

    Thread Starter mrhodesit

    (@mrhodesit)

    ok i got it guys

    <IMG STYLE=”position:absolute; TOP:35px; LEFT:170px; WIDTH:50px; HEIGHT:50px” SRC=”circle.gif”>

    i just used this code in the header, instead of img src

    real simple fix, you can modify size and position. one pixel at a time

Viewing 15 replies - 1 through 15 (of 22 total)
  • The topic ‘float gif over png’ is closed to new replies.