CSS Background Positioning - html

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!

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/

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

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

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;

Related

Header overlaps other text / images

I want that if people scroll over the page, the header will keep showing (logo + navigation bar). This is the css code I'm using:
#header_bar
{
margin: 0 auto;
width: 100%;
background-color: #1F1D1E;
height: 80px;
position: fixed;
top:0;
}
But this is what happens now: http://puu.sh/6FiXY.jpg
As you see the header now overlaps the image, how can I fix this? I've tried using margin-bottom / padding-bottom, but margin does nothing while padding makes the background box larger.
How can I fix this?
Supposing your HTML structure looks like
<div id="header_bar">...</div>
<div id="someOtherDiv">...</div>
Add margin-top to the next element after #header_bar
#someOtherDiv {
margin-top:80px; /* 80px because #header_bar is taking up 80px in height. */
}
demo
Since your header has a fixed position all your other elements will not take this into account. You could create a "wrapper" div for all the other content that is positioned 80px from the top. Just adding a margin or moving the element of the most top div might work too as long as it has relative (default) position.
You should be adding a margin to your content tags so that they are not instantly overlapped by the header.
See here: www.jsfiddle.net/cranavvo/5F8EP/

How can I make a white rectangle extend all the way down, on top of another background?

I'm a complete beginner. I tried my best to search for a solution, but part of the problem is that I don't even know what the technical term is for the thing I'm trying to do.
Essentially I want to have a tiled background repeating everywhere, but then also have a white rectangle that extends from the top of the page to the bottom, occupying roughly 50% of the horizontal screen space. How would I go about accomplishing this?
If I get it correctly, you might just want a repeated background of the page and then absolutely-positioned <div> with white background.
This is pretty basic stuff, I suggest you take a beginner's course in HTML and CSS before going too much further.
body {background: url(tile.png) left top repeat;}
content {background-color: #fff; margin: 0px auto; width: 50%;}
I hope this is what you wanted. It is a tiled, repeating background with a white strip, half the screen space, going down the middle. If you want a tiled background, you don't need to define anything in CSS, and CSS will do it for you, but I'm not sure with the browser compatibility so it might be safer to explicitly define repeat:.
First of all, to those complaining that height: 100% does not work, note that the div with height: 100% is only being the height: 100% of its parent element (the container that encloses the div, in the case of this JSFiddle, the #container). Therefore, if its parent has no content, the div with 100% height will become invisible.
Therefore, the html, body and container must all have height: 100% for the white strip to have 100% height here in this JSFiddle:
JSFiddle
After this you are free to add any content to the white strip, which will probably be your webpage! :D
Note: Here I have defined the strip as width: 50%; but sometimes it may be better to explicitly define the width (width: 1200px;) so that you can avoid problems with the text and divs going haywire when you zoom in, zoom out, etc.
Edit:
Also, since the height of the container increases as you add more content, such as divs, the problem with the white strip not reaching the bottom of the page is that you simply have nothing that fills it up. As you add more content the strip will naturally grow to fill the page. Good luck!
Solution 1
Here's a solution that uses only the background CSS property applied to document body, no extra elements needed. It's documented so you can understand whats going on.
body
{
/*
* This specifies two background images, separated by comma
* First parameter is just a white pixel
* For the second use any background pattern of your choice
*/
background-image:url("http://i.imgur.com/qdx0kzd.png"),
url("http://subtlepatterns.com/patterns/tasky_pattern.png");
/*Center background images, self-explanatory*/
background-position: center;
/*Repeat white background image on Y-axis (vertical) only*/
background-repeat: repeat-y, repeat;
/*Make white background size 50%. Adjust as needed*/
background-size: 50%, auto;
}
You can see an example in this fiddle: http://jsfiddle.net/dV2zZ/6/
Solution 2
This solution applies different backgrounds to different elements: the pattern to the document body, and the white background to a content container. Code is also documented for better understanding.
HTML
<div id="content">Content</div>
CSS
html, body
{
margin: 0;
/* Make document size extend to the bottom of the page */
height: 100%;
}
body
{
/*Patern background. Use a pattern of your choice*/
background-image: url("http://subtlepatterns.com/patterns/tasky_pattern.png");
}
#content
{
/*Make container background white*/
background-color: #FFFFFF;
/*Center container*/
margin: 0 auto;
/*Size 50%, adjust as needed*/
width: 50%;
/*Extend to the bottom*/
height: 100%;
}
See an example fiddle here: http://jsfiddle.net/jDRG3/1/

Aligning a picture to bottom right in browser window

Im trying to markup a picture to show on the bottom right corner of the webpage.
If i set the overall width of the page to 100%
and i set the picture to float right at the bottom it makes the trick perfectly but above
the mentioned picture is a bigger width picture which is around 1600px so when you open the the page in the small window browser then the floated picture is aligned but the scrollbar apears and scrolls to the full width of the page without the floated picture..
body{width:100%;}
thepicture{width: 1289px;
height: 446px;
position:relative;
float:right;}
So the second aproach: to make the body or a wrapper div fix width that is bigger than the upper picture mentioned:
body{min-width:1600px;}
Than looks great until somebody has a bigger screen than 1600px... the float ends at 1600px;
The firs solution needs to be tweaked but i cant figure it out how, some responsive floating would be great jquery maybe?
thanks in forwards
The problem is the pearl:)
Updated
May be this work:
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%
min-width: 1648px; /* the width of the longest element */
}
#bottomwrap {
/* replace with your background color */
background: url(path/to/picture) bottom right no-repeat;
width: 100%;
}
Rememer to reset body margin, padding to zero and set body height to 100%
Update:
I have update the solution for your case, modify the HTML structure, you can review here http://jsbin.com/ulatis/1/edit
It sounds like you need to use a background image here. Put the background on a 100% width div and set the background position to right bottom.
div.background{background: url('images/bg.png') no-repeat right bottom; width: 100%}
Try position: fixed; z-index: -1;, it does exactly what you're looking for. Example

Moving a Background Image from the top with CSS

Basically..
I want to move the the background image that is for main div 200px from the top and then repeat on the y axis. So I don't want it to start for 200px; Can I do that through CSS? The only way I can think of is below, but it is not working.
I know I am doing somethign wrong, but what is it?
Here is the DIV:
<div class="main">
<p> Content Content </p>
</div>
Here is the CSS:
.main {
background: url('/wp-content/themes/blue-and-grey/images/addedimages/main-bg.png');
background-repeat:repeat-y;
background-position: 200px 0px 0px 0px;
}
You want the background-origin property (but note limited browser support).
i would try to move the div down with positiv margin and the p up to a negative margin. maybe you need some postion: relative, or so.
background-position only accepts to parameters: offset left, offset top...
background: url('image.url') 0px 200px repeat-y;
so you're not completely wrong with your solution, if you wanted to cut 200px of the first picture, (and than repeat the whole picture).

Background image help

thanks for help, ended up with this
html{
position:relative;
min-width:950px;
height:100%;
background:black url(images/GrassBG.png) repeat-y top center;
font:13px "Lucida Grande",Helvetica,Arial,sans-serif;
}
body.main{
width:950px;
margin:0 auto;
position:relative;
}
is there any way when using a div for a background image- to limit the height to only the content displayed?
im putting the background image in a div because i want it centered via position:relative but the image doesnt show up unless i put a height on the div, and thats not what i want because i dont want to be able to just scroll down to the bottom of the image where theres no content
ive tried putting the background image on the body css but if the browser is less than the width of the image, it just throws it over to the left and you can only see half of it- is there no way to make the background position:relative on the body?
sorry if that doesnt make sense ><
thanks
why can you not use Position:relative; on the body?
You can set your div's height to 100% and set it with no-repeat to keep it from propogating throughout the div. Make sure all of its parent elements contain a 100% height though (all the way up to body). It won't force itself, then, to be a certain height. It will just fill the page.
This is all assuming, of course, that you don't care to interact with what's underneath the div in question.
<style>
body,
#parent {
height: 100%;
}
#the_one_with_the_background {
background: url('background.png') no-repeat top center;
height: 100%;
width: blahpx /* You're still going to have to define a width of some sort */
}
</style>
<body>
<div id="parent">
<div id="the_one_with_the_background">
</div>
</div>
</body>