In the inferno design (SMF 2.0), the red background of the main_body div shows up half on the left and half on the right, how is this done? http://demo.dzinerstudio.com/
You just need a background image on the body element that is aligned top and tiled horizontally.
body {
background: url(/myimage.png) center top repeat-x
}
then just need the image to be the right height for the look your going for...
It's just because the div.wrapper is on top of the div.main_body. To get the half effect on the main_body div, they just have a background color and a gradient image tiled on the x axis.
Is that not you question?
Related
I've got a Bootstrap page where some rows have background images. Is there a way (preferably css) to scale such a background image, so that it's always centered and fills the div 100%?
So I don't mean a fullscreen background image for the entire page (like this), it just needs to fill the div (typically a row in my bootstrap container).
I mean like so:
So no matter the display resolution and the actual screen size of the div, its background image should scale accordingly so it entirely fills the div. The image should not be stretched out of proportions, which means that part of the image will typically fall outside the div, either up/down or left/right (unless the div just so happens to have the exact same aspect ratio as the image).
Also the image should be centered, i.e. the middle of the background image should be in the middle of the div.
I've tried all sorts of things with background-size:100% auto or auto 100% which seems to work OK in one direction, but I can't seem to find a generic solution that works in all cases.
sure, you could apply the same idea to any element:
yourdiv {
background: url(images/bg.jpg) no-repeat center center fixed;
/* and one of these: */
background-size:contain;
background-size:cover;
}
I know how to align my background image as well as my #wrapper div tag, but I am unable to get them to line up the way I want. Here is the example:
http://www.marathoneindhoven.nl/
The blue runner stays locked to the main div tag when resizing the window. If I add a large #container around the whole #wrapper, when I resize the browser I have a big space on the left side of the screen because the overall width of the #container is still trying to center itself. I have tried using the css property overflow but can not seem to get that to work either.
How can I possibly get this to work??
If you want the blue runner to move with the page then change your css to this:
#wrapper {
background: url(/images/bg-runner.png) right 0 top 150px no-repeat;
}
I have an PNG image with a transparent area. It is a bit like a torn of checkout receipt with a zig-zag edge. It will sit at the bottom of a div with a white background to simulate a till receipt. I have tried this as follows.
background: #ffffff url("../images/zigzag.png") bottom right no-repeat;
But the background white fills right to the edge of the image
Aside from creating another div is there a way to stop the background colour going under the image?
Adding another div is probably the cleanest solution.
However, if the height of your div is limited, you can instead make the background of the div transparent and extend the top of the "ragged-edge" image with white pixels until it's tall enough that it always provides a white background to the main part of the div.
make background-color transparent:
#foo {
background: transparent url(yourzig-zagImage) no-repeat 0 0;
}
I have a background image that's centered vertically and horizontally using CSS. It looks great and is working as long as the window is large enough to display the background image.
The problem I have occurs when the window is resized to be smaller than the bg image. When this happens, the bg image continues to be centered, but I instead need to maintain a minimum margin around the top and left of the bg image. The BG image is 900px x 700px, and the code I've used is:
#main_wrapper {
background-image: url(../images/background.jpg);
position:relative;
width:900px;
height:700px;
left:50%;
top:50%;
margin-left:-450px;
margin-top:-350px;
}
Any solution would need to continue to center the bg image horizontally and vertically when the window is large enough to allow it, but would have a minimum margin at the top when the window is shorter than the bg image, and a minimum margin at the left when the window is narrower than the bg image. Any help would be greatly appreciated. Thanks.
If this is in your <body>, I'd add two extra divs right at the beginning of the body, positioned absolute, and having a background-color of white, to make sure that in that area, the background image isn't seen.
Then wrap the rest of what you had in the body in a <div> and have it be position: relative.
I think this should result in what you want.
There are a lot of questions regarding side-by-side divs. I didn't miss those. But I need something that spans the whole width of the screen. This is the situation:
I need three divs positioned side-by-side. The left, middle, and right divs we'll call them. The middle div holds the header contents of the site and is a fixed width (800px). I want the left and right div to span the rest of the screen width on either side. So..
<-LEFT-> | MIDDLE | <- RIGHT ->
The reason I want to do it this way is because the middle (content holding) div has a backgrond that is a gradient. Let's say the left side of the gradient is white and the right side is black. I need the Left div to be white so it is a continuation and the Right div to be black. This way it looks like one fluid heading that spans the whole width of the screen.
Thanks.
A solution for this problem I once implemented was using 2 div elements, absolutely positioned, with the center div as an overlay. I have a working example here:
jsFiddle solution
This way, it doesn't matter how wide the screen is: The div's span 50% of your screen, and the middle part is behind the centered div.
Note that you might have to use a javascript workaround for the height-issues.
Do you want content in the left or right divs? If not, Simply stick with your one center div, give it a width and position it using margin: 0 auto; in your css. You can then set the background image of the body tag with an image (say 1px by 2400px) that is half white and half black.
If you want that effect just behind your header, then you could create a div the same height as the heading and give it the following css properties:
position: absolute;
width: 100%;
z-index: -1;
that way it should sit behind your container (middle) div.
You should consider having just one centered div and on the body put a background-image of 1px height and large enough width and centered. That image will have the left half white and the right one black.
Hope this helps, Alin
...WWWWW| DIV |BBBBB...
Anyway I don't think it's possible without using a table.
Usually floatting div are size-fixed and center div is fluid.