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.
Related
I'm putting this in a widget in WordPress:
<div style="background-image: url('http://www.domain.net/img/subscribe.png');
background-repeat: no-repeat;"> </div>
But the result is this:
When I want the result to be this:
So it's barely showing the top of the background image I want. How can I achieve getting the full image -- but of course I don't want it to repeat x, or repeat y? And should I be using div tags, or something else? Any guidance in this regard would be appreciated!
Set that div's width/height to the same size as the background image. I would recommend something like this:
HTML
<div class="newsletter-subscribe">
<!-- any additional content can go here, like a <form> for example -->
</div>
CSS
.newsletter-subscribe {
background-image: url('http://www.domain.net/img/subscribe.png');
background-repeat: no-repeat;
background-position: top left;
width: 400px; /* whatever the picture width is */
height: 300px; /* whatever the picture height is */
}
The reason why you'd put this in a stylesheet, instead of inline, is so that you can more easily apply other styles to your container (ie div.newsletter-subscribe), as well as make changes in your stylesheet - instead of in template and/or partial files. Styles are much easier to maintain in a stylesheet than inline.
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/
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.
Just finishing up my college project and I want to place a background image as the div background. The div is on the right hand side, the 'main content' area.
Where can I find a notebook type background image to simulate that the forms are in a textbook? Also, how can I account for variable height of the forms? Just stretch the image?
Any tutorials?
u can try css background-repeat property and make sure to create an image which can be repeated...
Actually you need two image, one image will repeat and make the background, the second image will stay on the right side or left or top or bottom whereever you like it...........to make it work you will need two divs, one outer and one inner..... here is the css for that to work
.blueout{width:650px;
margin-left:0;
margin-top:10px;
background:#fff url(images/repeated-background.gif) repeat-y left top;
padding-left:20px;
}
.bluein{
background:#fff url(images/corner1.jpg) right top no-repeat;
padding:1em 1em 1em 0;
}
and here is the html for it....
<div class="blueout">
<div class="bluein">
<p>some text here</p>
</div>
</div>
repeat-y means it will repeat towards y-axis (vertically) you can change it to horizontal it depends on your slice for background.....
Hope this helps....
What I am trying to accomplish is a navigation bar that is center-aligned, padded on both sides with a left and right padding div.
The actual navigation bar is currently an inline-block div containing my tags for links and a left and right transition image, which will lead into the background of the navigation bar to take up the remaining space.
Normally, I would center the navigation bar in a 100% width div and use that wide div as the background, but since I am using semi-transparent .png files, I can't overlap like that.
The layout I would like:
(Click image to view full size.)
I updated this question to include an actual image of what I am working with. Currently I set the three <div>s (Technically, the center is a <UL>) to fixed widths, but I would like to add the flexibility of adding/removing links, and it will expand and shrink the <div>s accordingly. As I said earlier, I cannot center-align the center links and overlap them on the background because I am using semitransparent .png files for the images.
Fact is, you do not need the padding <div>. All you need to do is specify an auto horizontal margin, which will automatically expand to grab all the space available (thus centering your content as a side-effect).
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#header-nav {
width: 100%;
}
#header-nav-items {
margin: 0 auto; /* auto centers */
}
#header-nav-items a {
display: block;
width: 200px;
text-align: center;
background: #f00;
}
</style>
</head>
<body>
<div id="header-nav">
<div id="header-nav-items">
We are centered!
</div>
</div>
</body>
</html>
Ok, I completed the layout using a 3-column table instead. I did not specify a width for the left and right cells and I specified the center cell's width as 0. The center cell stretches to fill the content, and pushes the right two cells away.
Anybody know of any problems with this?