In CSS, we have always been able to utilize the idea of block models to create the whole 'top-middle (tile)-bottom' effect for things like borders, rounded corners, etc. For example..
#top { background-image: url('some-top-image.jpeg'); }
#middle { background-image: url('some-middle-image-that-tiles.jpeg') repeat-y; }
#bottom { background-image: url('some-bottom-image.jpeg'); }
<div id="top"></div>
<div id="middle"><!-- tons of content here --></div>
<div id="bottom"></div>
Not exactly valid code, but it illustrates the concept anyway.
I was wondering if there is a way to encapsulate this kind of logic into CSS3's new ability to do multiple background images in a single style. Such that ..
.content {
background:
// top image - top positioning
// middle image - tiling, offset from top
// bottom image - bottom positioning
}
<div class="content"><!-- Lots of Content --></div>
I have attempted to just type in the estimated values, but it does not seem to come out like I expect. I was wondering if someone with more experience could enlighten me on whether or not this could even be done, and if there are any known examples of it.
Specify the top and bottom images and their positions, then the middle one:
.content {
background: url('some-top-image.jpeg') top no-repeat,
url('some-bottom-image.jpeg') bottom no-repeat,
url('some-middle-image-that-tiles.jpeg') repeat-y;
}
The middle tiling image is declared last so that the top and bottom images will be layered on top of it. Layering of multiple background images is done from the top down. See ยง3.1 Layering multiple background images of the Backgrounds and Borders module for more.
Related
I am using Bootstrap in conjunction with css and java script.
It is really hard for me to draw this background in css without affecting to the front code. In many questions people set width and height to 0%. But i cannot use this method of styling because of my navbar. And i am quite keen on to know how to attach my logo as my brand name in a transparent view. This image below clearly shows what i am trying to do:
Simply use gradient:
.header {
height:80px;
background:linear-gradient(to bottom left,blue 49%,transparent 51%);
}
<div class="header">
</div>
I'm creating a website designed by a print-designer. The background concists of two images:
one gradient that is repeteated along the y-axis and aligned with the bottom of the page
one image that is aligned with the bottom of the page and centered.(the circle)
demo:
The circle-part is pretty big and has most of the pages content on it. (~900px by ~750px).
If the page is to small I need to add scrolls. If the page is to big. I need the first image(vertical) and background-color(horizontal) to fill out the area for me. I would like to use multiple backgrounds, but the site needs IE8-support.
Cut a 1px strip for the gradient and repeat it horizontally on the body. Set the attachment to fixed.
Cut out the circle and place it as the background image of your content container. This will likely be a png with transparency to allow the previous gradient to show through.
CSS
body {
background: url('bg.jpg') center bottom repeat-x fixed;
}
.container {
background: url('circle.png') no-repeat center bottom;
margin: 0 auto;
min-height: 750px;
width: 900px;
}
HTML
<body>
<div class="container">
content here
</div>
</body>
Alternatively, you can use CSS3 to place the gradient and avoid the image altogether. Some older browsers won't support it, but it's a little more flexible than using a static gradient image.
Check out this handy generator - just select the colors and style and it will give you the code: http://www.colorzilla.com/gradient-editor/
If you scroll to the bottom of this page - http://dev.socialadr.com/get/begin06 - you'll see that the white background w/ drop shadow stops near the end.
This is the image file that I want to repeat vertically:
http://dev.socialadr.com/mod/theme_simplebluewhite/graphics/theme_contentback.gif
The CSS file being used is:
http://dev.socialadr.com/_css/css.php
And I believe it's this #page_wrapper id that needs to be modified:
#page_wrapper {
width:1014px;
margin:0 auto;
padding:0;
min-height: 300px;
background: url(http://dev.socialadr.com/mod/theme_simplebluewhite/graphics/theme_contentback.gif) repeat-y center top;
height:100%;
}
I've tried tons of different things, read a bunch of other StackOverflow posts about similar issues but for the life of me I can't get it to work.
Any ideas?
Thanks!
Kane
Try placing quotes around the URL:
background: url('http://dev.socialadr.com/mod/theme_simplebluewhite/graphics/theme_contentback.gif') repeat-y center top;
Your live CSS does not include the repeat-y property given in your pasted code.
Additionally, your image file is very large. Since the image is meant to be tiled, the image height should be the height of one tiling.
You should also break the image up into two pieces and set them as backgrounds on two different elements. Tiling the current image will include the top part of the box with the corners, which is not what you want. Set the corners-only image as the background on one element, then the tile image on another element with repeat-y.
CSS is not one of my strong points! I'm trying to find a tutorial or something that will give me a premade div and css arrangement if I have a repeating top, left,bottom, right and corners graphic. I feel like I'm getting just close enough but then something breaks horribly. I don't want to use the new css3 implementation.
edit: SOrry for being unclear. I just want to use an image as a border. I have a graphic for the topleft,topright,bottomleft,bottom right, and repeating left and right and top and bottom graphics. I thought that HTML tables were deprecated so I stayed away from them, but I still have problems aligning the border correctly. I'll either have little gaps inbetween somehow, and/or I can't force the border to repeat only every X pixels so the corner graphics line up with the top/bottom and left/right graphics.
Edit: I got pretty close, but there are still ugly problems with the repeating graphic not starting or ending in the right place, and getting the background of the inside to be a solid color behind the png transparency. I'll post what I have.
<div id="box">
<div id="tl"><div id="tr"><div id="top"></div></div></div>
<div id="left"><div id="right"><div id="content">
test text
</div>
</div></div>
<div id="bl"><div id="br"><div id="bottom"></div></div></div>
</div>
my css:
#top {background: url(top.png) repeat-x; width:79%}
#bottom {background: url(bottom.png) repeat-x;height:58px;width:auto;margin-left:auto;margin-right:auto;width:79%;}
#left {background: url(left.png) repeat-y}
#right {background: url(right.png) repeat-y 100% 100%}
#bl {background: url(corner4.png) 0 100% no-repeat;height:55px;margin-left:-6px;}
#br {background: url(corner3.png) 100% 100% no-repeat;height:55px;}
#tl {background: url(corner1.png) 0 0 no-repeat;height:55px;}
#tr {background: url(corner2.png) 100% 0 no-repeat;height:55px; }
Ok... got it. Well, does your container have fixed width? If yes....
Create one image for the top which extends across the entire container. Put that image as a normal image inside your container in the HTML, as the first element.
Create another image for the bottom which extends across the entire container. Put this image as a normal image inside your container in the HTML, as the last element.
Create a horizontal background image (1 pixel high) which extends across the entire container and use CSS repeat-y. This gives you the sides for any height container.
... What you'll end up with is something like:
<div with background image>
<top image>
<your content>
<bottom image>
</div>
I want to have my page to have two background images: one at the top, and one at the bottom. I don't want them static, though. How would I do this?
Make two nested layers with zero margin and padding, like so:
<div class="outer">
<div class="inner">
<!-- Page goes here. -->
</div>
</div>
Then have a separate background-image for outer and inner, one fixed to the top, one fixed to the bottom:
.outer {
background-position: bottom;
// ...
}
.inner {
background-position: top;
// ...
}
It really depends on what you need the page to look like and what the background images are. If you want a solution you need to post more detail preferably with a composite image of whatthe page should look like and an example of the images by themselves.
that said one way might be:
html {backgoround: trasnparent url(/path/to/image) scroll no-repeat top center;}
body {backgoround: trasnparent url(/path/to/other-image) scroll no-repeat bottom center;}
Use divs with background images and place them appropriately either using your layout or with the positioning attributes. You could take the one for the top, put it in a div that is absolutely positioned and z-indexed to be underneath your regular page. Then the other one could be put in the body style and positioned at the bottom.