1

I have the following code for a background image on my site. 

#bg {
height: 200%;
left: -50%;
position: fixed;
top: -50%;
width: 200%;
}

  <div id="bg">
    <img alt="" src="sites/all/themes/marques/images/sponsors.png"  id="bg1">
</div>

Link is here:

http://dev-marquesogden.pantheon.io/sponsors

I'm trying to make the image (although very large, to fit within the background.

Any ideas?

fitnessCraze
  • 37
  • 1
  • 1
  • 10
  • That is not a background image. You are inserting an image into your #bg div. Where are you defining a background image. I dont see it in your code or page source – SG_Rowin Jan 28 '16 at 16:35
  • Here is the code for the bg img #bg img { position: absolute; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%; min-height: 50%; } – fitnessCraze Jan 28 '16 at 16:40
  • Are you trying to style a background image or a div which contains an image? Becuase your title says background image but your code says its an image inside a div? – SG_Rowin Jan 28 '16 at 16:43
  • the div should contain the image.but it should work as a background as well. make sense? – fitnessCraze Jan 28 '16 at 16:45
  • Does this answer your question? [Background images: how to fill whole div if image is small and vice versa](https://stackoverflow.com/questions/4779577/background-images-how-to-fill-whole-div-if-image-is-small-and-vice-versa) – Heretic Monkey Apr 21 '20 at 16:23

2 Answers2

2

This should do the work 

#bg {
    position: fixed;
    /* top: -50%; */
    top: 0;
    /* left: -50%; */
    width: 100%;
    height: 100%;
    background-size: cover;
    background-image: url(/sites/all/themes/marques/images/sponsors.png);
}

and remove img from #bg element:

<div id="bg"></div>

By the way this is not good image for this kind of background image purposes (to risky to cut heads).

Everettss
  • 15,475
  • 9
  • 72
  • 98
0
background-size: 100% auto;

will size the image to fit the viewport width, with the height reacting according aspect ratio. If you'd rather lead with height then it's:

background-size: auto 100%;

more info about background-size

Hayden Schiff
  • 3,280
  • 19
  • 41
Mitya
  • 33,629
  • 9
  • 60
  • 107