CODEWITHSUNDEEP
htmlcss
James Carter
James Carter

Reputation: 387

CSS Background Positioning

I am trying to have an image ontop of another image. For instance, a lot of sites have a main background, I would assume used in the html tag and another background, like a simple color used for the body tag. But they make it 75% of the screen and have it centered so part of the html background is showing. I am stuck on how to center and make the body tag 75% of the screen. Thank you in advance!

Upvotes: 0

Views: 67

Answers (4)

btevfik
btevfik

Reputation: 3431

you want to use margin:0px auto; and position:absolute on the div that you want to be centered.

first one 0px tells it that top and bottom portions do not have any margin. second property tells it that make right-left margin auto. so that the div is centered.

to make this working the div needs to have a width and be absolute positioned.

demo (bonus header): http://jsfiddle.net/btevfik/GPpeD/

Upvotes: 1

rahul dagli
rahul dagli

Reputation: 1628

You can try assigning css background image property to the body and create a new div then assign another background onto it. And set the width of the container to 75%. Or else if you are planning to use img tag then you can give z-index property to it. For positioning the div container to center give margin: auto;

Upvotes: 0

Mou
Mou

Reputation: 491

You can use a wrapper div and give it a 75% width and apply whatever background you would like then set it's position to center it will gives you the desired output. 

<html>
<head>
<style>
.wrapper{
width:75%;
height: 100%;
background-color:red;
background-position:center;
margin: 0 auto;
}
</style>
</head>

<body style="background-color:black;">
<div class="wrapper">this is a 75% width wrapper</div>
</body>
</html>

The auto just tells the browser to split up the available space evenly between the left and right side of the element

Upvotes: 1

Siddhartha
Siddhartha

Reputation: 236

background: 
   url(backgroundOne.png) 60px 10px no-repeat,  /* On top,    like z-index: 4; */
   url(backgroundTwo.png) 10px 10px no-repeat,   /*            like z-index: 3; */
   url(backGroundThree.png);                      /* On bottom, like z-index: 1; */

Try above code in CSS

Upvotes: 0

Related Questions