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>
Related
I have banner that needs to have an image aligned to the left and full height from top to bottom. To the right of the Image is an H1 with a Tab-selection Div, and below that is Text/Content Div. The Image is set to the height and width I want through WordPress.
Here's an image of what i'm going for:
I can somewhat get what I want by floating left on the image to get the Div Text to go to the right.
But my biggest problem is that I can't get my image to align top left of the banner properly. I had to use -142px margin left and -281px margin-top just to get it to look like it was, but on bigger screens I want that image to always stay left and consistent. It doesn't stay left on bigger screen sizes.
Here's what it looks like:
Here's the code for the Image Div:
(image dimensions set on WordPress as 641 width x 716 height)
margin-left: -142px;
margin-top: -281px;
float:left;
max-width:103%;
left:0;
display:inline-block;
top:0;
position:relative;
The damn image just stays at the bottom. I made sure that the H1 element wasn't displayed as Block in case it was blocking the Image from moving up.
There is a wrapper around the Div Image and Div Text that I used this code:
display: inline-block;
position:relative;
width: 100%;
When I look through Chrome inspector, the width of the Image and Text wrapper doesn't go across the Banner section all the way either. Is this wrapper just my problem? Or is it how I'm targeting the image?
Also just to clarify: I'm trying to code this banner on WordPress so there is pretty limited HTML changes that I can make.
Thanks!! I've been looking everywhere on SO and Google and can't seem to find what I'm looking for. Maybe my problem is too specific? I'd really appreciate the help. I'd also be happy to give more examples / post more code if it helps.
give css to <img>
img{
height:100%;
max-height:100%;
width:auto;
}
may be this should work or if not then just post your html css i can help more from that
Here is a short example of what I did that may help you out some. There's no need to use the float property for this. Just specify the width property to whatever size you want it to be based on screen size.
* {
margin: 0;
}
header {
background: url(https://placeimg.com/1000/500/any);
width: 100%;
height: 500px;
background-size: cover;
}
header .header_img_left {
background: url(https://placeimg.com/640/480/any);
width: 35%;
height: 100%;
background-size: cover;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<header>
<div class="header_img_left">
</div>
</header>
</body>
</html>
I currently have a dynamic header image that resizes to the size of the browser. (exactly like this: http://www.theadventurists.com/ ) But currently it overlaps my other content. What I actually want is the image to take up the screen and scroll down to see the content.
The website I linked, how do they do this without overlapping content? Is there JS involved? The closest I have gotten to replicating it is having the div below have margin-top 100%. But that is a bad fix due to the margin becoming too large when the browser is certain sizes.
<div id="test_bg">
</div>
<div id="page">
<p>This is the content</p>
</div>
#test_bg{
background-color:blue;
position:absolute;
background-size: cover;
background-repeat: no-repeat;
top: 0;
left: 0;
bottom:0;
right:0;
}
#page{
background-color:red;
margin-top:100%;
}
http://jsfiddle.net/9Trb2/9/ blue being the image, red being content.
You're right on with setting margin-top 100% as not the best way to go about it. There were a couple of issues with your JSFiddle - the background URL was pointing to an imgur page and not the actual JPG, so I changed that. Also, you had the css selector page which instead needed to be #page to correctly target the div.
My approach for solving your issue was to change the #test_bg height to 100% and remove absolute positioning. By taking away absolute positioning, #test_bg becomes part of the document flow and the next div will automatically be positioned right below it, which is what you wanted. The other thing you need to do in order to be able to set that div to 100% height is to also set the body and html height to 100% - otherwise you'd see that setting #test_bg to height=100% wouldn't do anything. Here's the JSFiddle.
#test_bg{
background-image:url(http://i.imgur.com/GgfpgA3.jpg);
background-size: cover;
background-repeat: no-repeat;
height: 100%;
}
html,body{
height: 100%;
}
#page{
height:400px;
width:400px;
background-color:red;
}
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;
So the story is this:
I'm making a website in which the homepage content is consisted of a menu and the clients logo.
But the way I've design it, the content needs to be in the center of the browser window... So across the board, because everyone has different screen heights, everyone who views the website either has too much white space under the footer, or part of the content is cut off.
This is the website: http://thinkinternational.co/
So my idea to fix it was this:
I created a buffer zone above the body, as you can see in the code below, but the problem I've discovered with having a percentage as a div height is that the parent div needs to have a specific height in the first place. Unfortunately, I'm not omniscient, and I can't predict every size of screen for every person who views this website, so I can't give it a specific height, otherwise I might as well have just left it as is in the first place.
Also, at the same time, I need the background to shift down with the body. Just to shake things up.
Any solutions for this issue ??
<div id="main">
<div id="TopBuffer"></div>
<div id="body" class="clearfix">
Content Here
</div>
</div>
body {
background:#0b0b0b url(images/Slices/BackgroundHome.jpg) no-repeat center -150px fixed;
-moz-background-size: inherit;
-o-background-size: inherit;
-webkit-background-size: inherit;
background-size: inherit;
height: 100%; }
main { color:#000; font-family:Arial,Geneva,sans-serif; margin:15px 0;height: 100%; }
TopBuffer { width:100%; height:25%; }
Like you said, to make a height with percentage work, you will need the parent to have a specific height.
So height:100% on body will work once you put it on html too.
(I would also remove the margin and padding from html)
html{
margin: 0;
padding: 0;
height: 100%;
}
And to make your background stretch all the way down, you will need make changes in this line of the CSS:
body{
background:#0b0b0b url(images/Slices/BackgroundHome.jpg) no-repeat center -150px fixed;
}
change the center -150px to center center, to center top or to center bottom depending on which you prefer so you can show the whole image on larger resolutions.
First center is the horizontal position of background, and second one is vertical position.
As for centering your content vertically this is a nice article:
Vertical Centering With CSS
If you can use javascript then use window.outerHeight to get the browser height and set the buffer according to that using javascript or jquery
I need to set the image height everytime I'm using background: url('images/something.jpg')[..];
Fe.
HTML:
<div class="someImage"></div>
CSS:
.someImage {
background: url('images/something.jpg') no-repeat top;
}
The above example should work... but image won't display until I add an image height attribute to the CSS style class:
.someImage {
background: url('images/something.jpg') no-repeat top;
height: 25px;
}
And then my image appear on the website...
Why does it happend?
Because without content, a div has no height, background image or not.
Since your div is empty it has no height..
The image you use is applied as a background, so it does not affect the size.. it just fits whatever space is available at the div.
When you explicitly set the height, you create room for the image to appear..