I am trying to create a full width background image that aligns vertically with a centered div. Should I create a wrapper around all the content, or is there another way to do this (without absolute positioning)? Thanks.
alt text http://img229.imageshack.us/img229/7391/99479284.png
EDIT: Sorry if I didn't explain this very well. I've changed the image.
Background images do not display outside of their containing elements. That doesn't mean that all or part of a background image cannot be positioned outside its element, just that the parts that are outside the element boundary won't be displayed when the page is rendered.
So in short, yes. You'll have to use a wrapper div.
Yes, you want to use a wrapper:
CSS:
#wrapper { width: 100%; background: url(yourimage.png) left center repeat-x; }
#content { width: 960px; margin: 0 auto; }
HTML:
<div id="wrapper">
<div id="content">
My content
</div>
</div>
Related
I have the following html structure:
<div class="parent">
<img src="image.png" class="child"/>
</div>
<div class="container">Page goes here.</div>
And the following css:
.container, .parent{
position: relative;
}
.child{
display: block;
max-width: 100%;
height: auto;
position: fixed;
}
Because the image is fixed the parent's height is probably 0. Therefore the container is placed over the image. However I want to have the image fixed and the container to be placed after the image, while keeping it responsive.
Any help would be appreciated!
UPDATE: I'm trying to get the scrolling behavior shown in this JSFiddle, but to make the container always be at the bottom of the image, even if the screen width is (let's say) under 300px.
In your Fiddle, I was able to achieve the desired behavior by changing the .container property from
margin-top: 300px to margin-top:50%
You'll likely not see a change if you add a position class to the image. That's used on div tags. Try adding that class to a new div tag with which you surround your image.
Alternatively, you could add a display: block to your image, but that makes things more complicated.
I think this is what you're asking, but I'm still a bit confused.
I have a banner that's width is set to 100%.
I then have another div set at 30px nested within the main div placed at the end of the first div. This close-ban div has the background image of a close icon and the javascript is set so when a user hits the div the entire banner hides.
I want to position this close-bar div immediately after the text inside of the div labeled banner.
This is what it should look like
[this is a banner it has text inside of it [X]]
<div id="banner">this is a banner it has text inside of it<div id="close-ban"></div></div>
You can set float left for banner and float right for close-ban. Like this:
#banner {
width: 100%;
float: left;
}
#close-ban {
float: right;
}
<div id="banner">this is a banner it has text inside of it<div id="close-ban">close</div></div>
or create a container with 100% width and put inside it banner and close-ban divs, like this:
#container {
width: 100%;
}
#banner {
float: left;
}
#close-ban {
float: right;
}
<div id="container">
<div id="banner">this is a banner it has text inside of it <div id="close-ban">close</div></div>
</div>
You could consider making the close-ban a span element rather than a div element. That way it will be placed inline with your other HTML:
http://www.w3schools.com/css/css_inline-block.asp
(The span tag is formatted the same as an inline-block. You could alternatively add display:inline-block in the CSS for your close-ban)
Keep in mind that if your text takes up the width of your top ban, it will push the close-ban to the next line with the method above. To avoid this, you could alternatively look into positioning the close-ban relative to the screen or the banner: http://www.w3schools.com/cssref/pr_class_position.asp
I've got a <div> with an image on the left side and some text on the right side.
How can I achieve that the image always fills the vertical space?
This is how its supposed to look:
The parent's height will change in 3 steps using media queries.
This should make all images in your div reach from the top to the bottom.
<div id="content">
<img src="source.jpg">
Other div contents...
</div
#content img {
height: 100%;
}
I'm trying to implement an image that has an image overlayed on it. Since I need to tell that this image has a video content on it. Now from some post here I've encountered this code (pardon me I lost the link) which actually works but problem is it also overlay the text content below the images. For reference of what exactly I'm trying to achieve I have this code here. I just hardcoded on what I wanted to see and here's the code anyways:
<div class="container">
<div class="imageOne image"></div>
<div class="imageTwo image"></div>
</div>
<div><br /><br /><br /><br /><br /><br />Text should be below the image</div>
I just need to fix the part where images overlaps on my text as well. Thanks!
Fixed version in jsfiddlehttp://jsfiddle.net/uS7nw/270/
Just a few tweaks needed. Specifically using
position:relative
on .container and .imageOne
and
top:0
on .image
Currently your divs overlap because you have the parent container set to a fixed position, therefore it will be anchored to (0,0) of its parent, any other elements are then drawn to the default (0,0) coords of there parent (body in this case).
In order to fix this, make the .container elements position relative, the text div will now have its position drawn at (0,100) as container has a height of 100px relative to the body.
This also makes sense for the case that you want your .image to overlap in .container, both .image divs have their position set to absolute meaning they will be drawn at (0,0) within their parent (.container in this case).
Updated css would look like this:
.container {
position: relative;
width: 100px;
height: 100px;
}
.image {
position: absolute;
width: inherit;
height: inherit;
border: 1px solid red;
}
Please note that the parent div now contains information of the width and height, the children images now inherit this information from the parent, however you could make them smaller. Hope this helps :)
JSFiddle Solution
I want to make an HTML, CSS page where the layout is as:
<div id="content">
<div id="left">
.....
</div>
<div id="right">
.....
</div>
</div>
The content div has a background image which should be repeated in y-direction. Also the left and right div should be side by side over the same background image.I am able to accomplish it but by keeping the height of the content fixed but I don't want to make the content's height fixed. Please help me folks.
Thanks in Advance :)
without seeing your code... my guess is you're floating the left and right DIVs... but you're not floating the content DIV...
your CSS should look similar to this to make it work:
#content {
float:left;
background-image:url('whatever.png');
background-repeat:repeat-y;
}
#left {
float:left;
}
#right {
float:left;
}
I am able to accomplish it but by
keeping the height of the content
fixed but I don't want to make the
content's height fixed.
If you are able to repeat the background image in the Y direction then it shouldn't matter how heigh the #content div is, as your background will just fill the remaining space - correct?
If your content div is not expanding to the height of the child div's then clearly #content must be outside of the normal flow of the page, in which case you should float it and not set a height for the container div.
It's quite hard to understand what you're trying to do, but I think what you want to do is add overflow: auto to your content div, so that it becomes the same height as the left and right divs:
#content {
overflow: auto;
background: [bg code]
}
#left, #right {
float: left;
}