CODEWITHSUNDEEP
csshtmlresponsive-design
Sackling
Sackling

Reputation: 1820

positioning a div responsively over a background "cover"

I am trying to position a div with an image in it responsively.

I am using a background image that maintains its aspect ratio if the browser is resized.

I have positioned the div using %ages but when the window gets to small the div eventually moves over while the image just begins to get cut off instead.

Here is my example: http://jsfiddle.net/bbLTD/1/

My goal is to have the dive with the small image stay in the same place in relation to the background image.

Am I going about it the wrong way?

Here is the HTML/CSS:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>laPINA</title>
    <style type="text/css">
        html { 
        background: url(http://www.freegreatpicture.com/files/146/26189-abstract-color-background.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;

        }

    </style>

</head>
<body>

    <div style="position: absolute; bottom: 50%; right: 10%;">
        <img src="http://www.friesens.com/wp-content/uploads/2011/10/Contact-UsHeader940x260.jpg"  width="50" height="50" alt="contact_logo" />
    </div>
</body>
</html>

Upvotes: 0

Views: 1810

Answers (1)

imbecile
imbecile

Reputation: 468

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>laPINA</title>
    <style type="text/css">
        html { 
        background: url(http://www.freegreatpicture.com/files/146/26189-abstract-color-background.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;

        }
        ***img{
           width: 100%;
 max-width: 50px;
            height:100%;
        max-height:50px;
        }***

    </style>

</head>
<body>

    <div style="position: absolute; bottom: 50%; right: 10%;">
        ***<img src="http://www.friesens.com/wp-content/uploads/2011/10/Contact-UsHeader940x260.jpg" alt="contact_logo" />***
    </div>
</body>
</html>

The changes that I've made are bold-italicized. You can specify the height and width of the image in terms of percentage relative to the image's container, and specify the max-height and max-width that you would want it to be.

I have shifted the height/width of the image to the css internal stylesheet, as it is considered a better practice to keep the css out of the html, unless it is in a specific style tag as you have done with the div's style="position: absolute; bottom: 50%; right: 10%;".

Hope this helps.

Upvotes: 1

Related Questions