align image to center over another image

Navigation
0

I'm developing a website as a portifolio, I'm using wordpress and bootstrap, I created a div and inside it I put an img tag with the background image of this div, but now I want to put an image of my logo superimposed on the background, using some properties from css until I can put it superimposed but I can not align it to the center

My code looks like this: 

<div class="img-fundo">
    <img class="img-logo" src="<?php bloginfo('template_directory') ?>/assets/images/logo.jpg" alt="">
    <img class="img-fundo img-responsive" src="<?php bloginfo('template_directory') ?>/assets/images/header.jpg" alt="">
</div>

css looks like this: 

.img-fundo{
    display: block;
}

.img-logo{
    position: absolute;
    magin-left: auto;
    margin-right: auto;
}

It overlaps but does not line the center. how should I proceed?

    
asked by anonymous 11.02.2017 / 00:08

3 answers

0

One of the ways to center an element with CSS, with the absolute position, uses left with 50% and margin-left with negative half of element width, this ensures that it will always be in the center. p>

To align the logo to the center, find the width width of this image and change the class in the CSS to something like this: 

.img-logo{
    position: absolute;
    left: 50%;
    magin-left: -50px; //-50px se a logo tiver largura de 100px
}
    
11.02.2017 / 02:12
0

Have you ever tried to put a div inside the "img-background" and in it you have the image of your logo? I think it could work, using CSS to center it and even a class.

    
11.02.2017 / 00:49
0

You can do this using jquery: 

    <div class="img-fundo">
        <img id ="imgFundo" class="img-fundo img-responsive" src="..." alt="">
        <img id ="imgLogo" class="img-logo" src="..." alt="">

    <script>
        var fundo = $( "#imgFundo" );
        var logo = $( "#imgLogo" );

        logo.css("padding-top", fundo.height()/2 - logo.height()/2);
        logo.css("padding-left", fundo.width()/2 - logo.width()/2);
    </script>
</div>
    
11.02.2017 / 00:53
Error to get last ID Jboss Multiple context-root pointing same war