WordPress.org

Support

Support » Themes and Templates » float gif over png

float gif over png

  • mrhodesit
    Member

    @mrhodesit

    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)
  • Michael
    Forum Moderator

    @alchymyth

    i dont even know where to start.

    with the basics (?):

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

    mrhodesit
    Member

    @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>
    mrhodesit
    Member

    @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>’

    mrhodesit
    Member

    @mrhodesit

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

    Michael
    Forum Moderator

    @alchymyth

    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.

    mrhodesit
    Member

    @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

    mrhodesit
    Member

    @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”

    Jeremy Clark
    Member

    @jeremyclark13

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

    mrhodesit
    Member

    @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.

    mrhodesit
    Member

    @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

    Jeremy Clark
    Member

    @jeremyclark13

    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.

    mrhodesit
    Member

    @mrhodesit

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

    mrhodesit
    Member

    @mrhodesit

    my email is mrhodesit@optonline.net

    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

    mrhodesit
    Member

    @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?

    mrhodesit
    Member

    @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.