CODEWITHSUNDEEP
htmlcss
mdegges
mdegges

Reputation: 963

Positioning image in relation to background image

New to CSS styling. I have a responsive background image on my page, and I want to have a circular logo positioned at the bottom center of it. I want this image to stay in the same position (in relation to the bottom of the background image) no matter how small/big the view is.

I've been playing around with the images padding and positioning, but neither are responsive. When the screen is smaller, the image moves up. When it's bigger, the image moves down. I want it to stay in the same position.

Here's a quick fiddle of my most recent attempt:

https://jsfiddle.net/ybeuvn9m/

And the code:

    <div class="container-fluid">
  <div class="row">
    <div class="splash col-sm-12">
      <div class="photo">
        <img class="img-responsive img-circle logo" src="http://i.imgur.com/Dum5A8J.png">
      </div>
    </div>
  </div>
</div>

.logo {
  padding-top: 200px;
  width: 10%;
  margin: 0 auto;
  display: block;
}

.splash {
  background: url('http://s169923.gridserver.com/images/IntelligentsiaMocha.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  height: 50vh;
  background-color: rgba(0, 0, 0, 0.2);
  background-blend-mode: overlay;
}

Upvotes: 0

Views: 73

Answers (3)

user2320601
user2320601

Reputation: 162

.logo { 
        padding-top: 150px; 
        width: 110px;
        margin: 0 auto;
        display: block;
      }

Your logo should have the constant width of your logo.

Upvotes: 0

Clark Ozanne
Clark Ozanne

Reputation: 96

If I am understanding correctly you want an .photo to always be in the center of .splash. For this, you should use Flex-box.

add the following to your code:

.parentDiv{
  display: flex;
  justify-content: center;
  align-items: center:
}

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ... for reference.

Upvotes: 2

jameson
jameson

Reputation: 201

You probably want to absolutely position it inside the main image div. Here's a modified version of your JSFiddle: https://jsfiddle.net/jameson5555/ybeuvn9m/1/

Here are the updated .logo styles. You'll also need to add position: relative to your container to make the .logo's position be relative to it.

.logo {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 40px;
    margin-left: -20px;
    display: block;
}

Upvotes: 2

Related Questions