3

I asked a question previously on getting 2 divs to sit inside another div bootstrap container (1 top left, and 1 bottom right) which has now been solved.

My next issue is, in the main div (with 2 divs sitting inside) I need a large background image, which is responsive, so brings the bottom right div upwards and inwards as the browser is made smaller.

Here is what I have so far:

<style>
#header {
background-image: url(/images/background-image.jpg);
position: relative;
}

#header .container {
height: 893px;
position: relative;
}

#header .div1 {
position: absolute;
top: 20px;
}

#header .div2 {
position: absolute;
bottom: 20px;
right: 20px;
}

<div id="header">
<div class="container">
    <div class="div1">
        Top left content
    </div>
    <div class="div2">
        Bottom right content
    </div>
</div>

Adding the background image to the CSS like how I have done above, does not make the image responsive, but if I add it to the HTML as an image I cannot get the divs to sit on top of the image.

What is the correct method of doing this?

vitr
  • 6,766
  • 8
  • 30
  • 50
user3642210
  • 111
  • 1
  • 1
  • 12

2 Answers2

2

With a few cross-browser vendor prefixes.

#header {
    display: block;
    position: relative;
    background: url('/images/background-image.jpg') 50% 0 no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
Steven Ventimiglia
  • 886
  • 1
  • 11
  • 19
  • Thanks for this... close, but not quite what I am after. Ideally, I want the content to pull up as the background-image is made smaller. Cheers though :) – user3642210 Aug 16 '16 at 08:03
  • Code edited above. Made the background position 50%/0 as opposed to 50%/50%. (Left or right / top or bottom - Where 50% would be shorthand for both to be centered and in the middle.) – Steven Ventimiglia Aug 16 '16 at 22:09
1

This may solve or at least get you in the right direction. Change you header styles to the following and it will force the background image to the top left and fill 100% of the div. It can be tricky to have "perfectly" responsive background images.

#header {
background-image: url(/images/background-image.jpg);
background-repeat:no-repeat;
background-size: 100%;
background-position:top left;
position: relative;
}

http://codepen.io/adamfollett/pen/OXdKyG

Adam F
  • 77
  • 1
  • 5