Bootstrap breadcrumbs over top of the image

Question

Good morning, I creat front-end our website portfolio and i need a little help (in the head does not fit =) )

The problem is: I need develop header with a breadcrumbs and image

I know parent class on the image must be have position: relative and childrens (breadcrumb) position: absolute but doesn't help :(

my code: http://codepen.io/Yummy9522/pen/aBMKea

P.S. Breadcrumb must be into the container like as 'like' and 'views'

score 3 · Accepted Answer · answered Dec 21 '16 at 07:03

i have remove some styles and add new properties change your css like this way , you have to set bottom:0; to this .ag_portfolio_inform_2 class and width:100%;

.ag_portfolio_logo {
 position: relative;
}
.ag_portfolio_logo img {
 width: 100%;
 height: auto;
}
.ag_portfolio_inform_2 {
 position: absolute;
 bottom: 0;
 left: 0;
 width:100%;
}
.ag_portfolio_inform_2 > .container {
 position: relative;
}
.ag_portfolio_inform {

}
.ag_portfolio_inform .breadcrumb {
 padding: 8px 15px 8px 0;
 border-radius: 0;
 background-color: transparent;

}
.ag_portfolio_inform .breadcrumb li a {
 font-size: 15px;
 color: #000;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="ag_portfolio_logo">
        <img src="http://www.picshare.ru/uploads/161221/M8B1HBQEdS.jpg" alt="">
        <div class="ag_portfolio_inform_2">
          <div class="container">
            <div class="ag_portfolio_inform">
              <ol class="breadcrumb">
                <li><a href="#">Home</a></li>
                <li><a href="#">Portfolio</a></li>
                <li class="active">Globuz</li>
              </ol>
            </div>
          </div>
        </div>
      </div>

thats because the container class need to be centerd, you have set the parent class position absolute the parent class have no width , thats why the container not center align — Jishnu V S, Dec 21 '16 at 07:22
when you set width 100% to the parent class , container will be center align , because container got fixed width and margin:0 auto; — Jishnu V S, Dec 21 '16 at 07:23

score 1 · Answer 2 · edited May 23 '17 at 12:13

IMO - you aren't going about this in the smartest way.

There are times you should use absolute positioning, but I don't think this is one of them. You are trying to use an image element as a background image. This answer should give you some insight - specifically #6 of when to use CSS in your case.

While what you're doing is one way of doing it, it makes more sense to use a regular div with a background image as a CSS attribute. You can then align the breadcrumbs inside just like you would anywhere else and don't have to worry about the absolute positioning which can always mess things up down the road.

Try something like this:

HTML

<div class="background-image">
    <div class="container">
        <ol class="breadcrumb">
            <li><a href="#">Home</a></li>
            <li><a href="#">Portfolio</a></li>
            <li class="active">Globuz</li>
        </ol>
    </div>
</div>

CSS

.background-image {
    background-image: url("http://www.picshare.ru/uploads/161221/M8B1HBQEdS.jpg");
    background-size: cover;
    background-position: center;
}
.breadcrumb {
    border-radius: 0;
    background-color: transparent;
    padding: 15px 0 10% 0;

}
.breadcrumb li a {
    font-size: 15px;
    color: white;
}

not a perfect solution, as the site will then be in the CMS and then it will be not easy to change a static picture — TriSTaR, Dec 21 '16 at 09:10
I'm not sure your CMS but you can normally change the background of a section/.container/div. In Wordpress you're able to set the background image. If you're customly creating html templates for your site you can pass in values through PHP (or whatever other language you're using) to the HTML like so: `
` — domdambrogia, Dec 21 '16 at 16:45

score 0 · Answer 3 · edited Dec 21 '16 at 08:41

try with this css

.ag_portfolio_inform {
    position: absolute;
    top: 165px !important; /* give custom height */
    left: 100px;
}
.ag_portfolio_inform_2{
  width: 100%;
  }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="ag_portfolio_logo">
        <img src="http://www.picshare.ru/uploads/161221/M8B1HBQEdS.jpg" alt="">
        <div class="ag_portfolio_inform_2">
          <div class="container">
            <div class="ag_portfolio_inform">
              <ol class="breadcrumb">
                <li><a href="#">Home</a></li>
                <li><a href="#">Portfolio</a></li>
                <li class="active">Globuz</li>
              </ol>
            </div>
          </div>
        </div>
      </div>

Aslam · Answer 4 · 2016-12-21T07:47:58.170

0

REASON FOR NOT WORKING

Let me clarify why your code is not working. You are using .ag_portfolio_inform and .ag_portfolio_inform2 which are currently linked. You need remove absolute from the .ag_portfolio_inform and use the values on .ag_portfolio_inform2 or vice versa.

Just remove the absolute positioning from the .ag_portfolio_inform2 and then you can use the properties of .ag_portfolio_inform the way you like.

Hope this helps.

edited Dec 21 '16 at 07:47

answered Dec 21 '16 at 07:18

Aslam

6,791
3
30
46

thanks for the reply ) but maybe you can explain why i need add style `width:100%` it helps, but why ? – TriSTaR Dec 21 '16 at 07:23
It will make it fit the area of the image. If you remove it then it will use the actual width of the image, which might be larger or smaller then the area where you have placed it. Try removing it and you will see the difference. You will see a horizontal scrollbar in the browser when the width of your browser is smaller then the width of the image. :) – Aslam Dec 21 '16 at 07:46

Bootstrap breadcrumbs over top of the image

4 Answers4

HTML

CSS