1

I have a full background image and I want to add another one on it, something like a logo. I have added that logo however I couldn't center it. Any suggestions for CSS?

This is the CSS for now:

.center-logo {
  position: absolute;  
  display: block;
}
Bernhard Barker
  • 54,589
  • 14
  • 104
  • 138
trvst
  • 9
  • 1

2 Answers2

0

You can modify the background-position for each image to position it to your requirement.

MDN Reference

The background-position CSS property sets the initial position, relative to the background position layer defined by background-origin for each defined background image.

Position value

It is one to four values representing a 2D position regarding the edges of the element's box. Relative or absolute offsets can be given. Note that the position can be set outside of the element's box.

body {
  background:  url(http://placehold.it/200x200/333), url(http://placehold.it/1200x1200);
  background-repeat: no-repeat, no-repeat;
  background-position: center top, center top;
}
m4n0
  • 29,823
  • 27
  • 76
  • 89
0

I achieved it with the following codes:

HTML:

<div class="center-main">
        <div class="center-in"><img class="centered-logo" src="images/logo.png" style="margin-top:-70px;" /></div>
        </div>

CSS:

.center-main {
    width:500px;
    height: 250px;
    display: table;
    position: relative; 
    overflow: hidden;
    text-align:center;
    margin:0 auto;  
}

.center-main .center-in {
    position: fixed; 
    top: 50%;
    left: 50%;
    display: table-cell; 
    vertical-align: middle;  
}

.center-main .center-in .centered-logo {
    max-width:300px;
    max-height:150px;
    position: relative; 
    top: -50%;
    left:-50%;  
}
trvst
  • 9
  • 1