CODEWITHSUNDEEP
htmlcssbackground-image
DCR
DCR

Reputation: 15700

unable to position background image correctly

I'm trying to position a background image so it stays proportional/adaptive to screen size and not float into the nav bar. The css I'm using is:

#apology{
background-image:url('http://i.imgur.com/jkXf9IE.png');
width:50%;
margin:0 auto;


background-position:50% 50%;
background-size:cover;


position:fixed;
left:10%;
top:10%;
right:10%;
bottom:10%; 

}

Here's a fiddle background-image

Upvotes: 2

Views: 85

Answers (3)

Tacud
Tacud

Reputation: 639

Something like this?

#apology{
    background-image:url('http://i.imgur.com/jkXf9IE.png');
    margin:0 auto;
    background-position:50% 50%;
    background-size:cover;
    position:fixed;
    top:50px;
    bottom: 0;
    left: 15px;
    right: 15px;
}

If you want the badge to be fully visible in all cases. Even when the browser window is really narrow, then you will have to change the image. Create a png image only with the badge on a transparent background and add the blue as the background color in css.

Upvotes: 1

Johannes
Johannes

Reputation: 67798

1.) the width and margin contradict the fixed position and its top/left/right/bottom parameters. That for the element itself.

2.) The background position contradicts the cover size. background-position:50% 50%; places the left upper corner of the background image at the center of the container, which can't be what you want. Just erase that and only use background-size: cover;and background-attachment: fixed

Upvotes: 1

Gaurav Kumar Singh
Gaurav Kumar Singh

Reputation: 1570

update css of top, fixed it with pixel not with percentage 

#apology {
    background-image: url(http://i.imgur.com/jkXf9IE.png);
    width: 50%;
    margin: 0 auto;
    background-position: 50% 50%;
    background-size: cover;
    position: fixed;
    left: 10%;
    top: 52px; //update this
    right: 10%;
    bottom: 10%;
}

working jsfiddle

Upvotes: 2

Related Questions