CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Andrei P
Andrei P

Reputation: 309

Bootstrap image positioning on top of background

EDIT: I've added an example fiddle here: http://www.bootply.com/xhBIV2zSig - The two black pins should stay above the two houses in the middle when the browser is resizing.

I'm building a website with Bootstrap on which I have a background image with some buildings like so:

body {
  background: url(../img/backgroundLarge.jpg) no-repeat center center fixed;
  /* -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; */
  color: white;
  font-family: 'Open Sans', 'Nunito', sans-serif;
}

The background image is "getting cut" while I resize the browser window causing no scrolls which is the kind of effect I am trying to get.

I also have some pins over some of the buildings and I would like them to resize with the background image (keep the same position).

Any idea how to do that?

here's an image to explain things: Image positioning on top of background

Basically I want the red pins to stay in the same place on the background as it's resized.

Can this be done by CSS and or JavaScript / jQuery?

Upvotes: 2

Views: 162

Answers (1)

Suresh Karia
Suresh Karia

Reputation: 18218

Try Fiddle: FullscreenBVackwithPins

html

    <body>
    <div class="pin pin1"></div>
    <div class="pin pin2"></div>
    <div class="pin pin3"></div>
    </body>

css

    body {
  background: url("https://i.sstatic.net/LFkKU.jpg") no-repeat center center fixed;
  -webkit-background-size: 100% 100%;
  font-family: 'Open Sans', 'Nunito', sans-serif;
    top: 0;
  left: 0;
    position:relative;
}

.pin{
    position:absolute;
    height:20px;
    width:20px;
    -webkit-border-radius:20px;
    background:#FFF;
    cursor:pointer;
    transition:all 1s ease;
    border:1px solid #f00;
}
.pin:hover{
    background:#F00;
    border:1px solid #fff;
}

.pin1{
    left:50%;
}

.pin2{
    left:20%;
}

.pin3{
    left:90%;
}

JavaScript

 $(function() {
  h = $(window).height();
  w = $(window).width();
  $(body).style('background','url(phpthumb.php?src=bg.jpg&w='+w+'&h='+h);
});

Upvotes: 1

Related Questions