CODEWITHSUNDEEP
htmlcss
Shahin
Shahin

Reputation: 12861

Position element center of background Image

I've a picture that I putted it background of my web page. 

body
{
    background-image: url('../Image/Background.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

I have a DIV that I want to put it center of the background Image.
Should I set padding left and top to 50% ?

Upvotes: 0

Views: 212

Answers (2)

Tiago Moutinho
Tiago Moutinho

Reputation: 1372

<html>
<head>
    <style type="text/css">
        body {
        background-color: blue; 
        background-repeat: no-repeat;
        }
        .div {
            position:absolute;
            width:100%;
            text-align:center;
            height: 100px;
            top: 100px;
        }
</style>
</head>
<body>
    <div class ="div">
        <p>ahgdsgdhuagh</p>
        <p>ahgdsgdhuagh</p>
        <p>ahgdsgdhuagh</p>
        <p>ahgdsgdhuagh</p>
        <p>ahgdsgdhuagh</p>
        <p>ahgdsgdhuagh</p>
    <div>
</body>
</html>

This sould do the trick.

Upvotes: 2

Joseph Marikle
Joseph Marikle

Reputation: 78570

If it's fixed width (say 500px by 300px) Then you can do something like this:

#myDiv
{
    position:fixed;
    width:500px;
    height:300px;
    left:50%;
    top:50%;
    margin-left:-250px; /*half the width*/
    margin-top:-150px; /*half the height*/
}

Upvotes: 1

Related Questions