CODEWITHSUNDEEP
cssbackground-imagecss-position
fitnessCraze
fitnessCraze

Reputation: 37

CSS Background Image Too Large

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?

Upvotes: 1

Views: 12977

Answers (2)

Everettss
Everettss

Reputation: 16069

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).

Upvotes: 2

Mitya
Mitya

Reputation: 34628

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

Upvotes: 0

Related Questions