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....
Related
I'm attempting to add a bookmarklet to my wop website. The issue is that I would like to have the bookmarklet (highlighted in red in the picture below) centered as if it did not have the arrow sticking out the side. If I change the width of the bgimage in the css, to be the same as the below indented box thingies, it centers how I would like it to. But, it cuts off a bit of the arrow. So, my question is, how can I center the bookmarklet as if it had the width of the other indented box thingies.
bookmarklet CSS:
#bookmarklet {
background-image:url('images/bookmarklet.png');
width:425px;
height:175px;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
padding-bottom:8px;
}
I want the bookmarklet to be centered as if it were(without cutting out the side of the arrow):
#resultbg {
background-image:url('images/resultbg.png');
width:404px;
height:347px;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
padding-top:8px;
}
Any help is greatly appreciated!
Thank you(:
measure the amount of pixels the arrow 'sticks out' from the box, divide it by two and make it your left margin
That's the first thing that came into my mind. However, you are using the left margin to center the image in the first place. Maybe have a container div, center this div with margin-left: auto and margin-right: auto, and then play with the margins of the image inside this div. That should work
Just add
background-position:center;
To the background which should be centered
A few options:
Reduce the width of the image and pad the side with some blank space that way it wont get cut off.
Wrap the image in a div and set the width so the backgroung image is positioned as needed using some padding or margins.
I need to couple top border image to top border body as you can see in the left side.
I need to cupole the "NEXT PICTURE :" to right.
Thanks.
You know something strange happens images switch in chrom slowly and stop in firefox there is no problem with velocity
my site.
you can use the background properties in css
body {
background-image: url(someimage.png);
background-position: top left;
background-repeat:repeat-x; (or no-repeat if you only want it once)
background-attachment:fixed;
}
this will tile an image along the top of your page (use background-attachment:fixed; if you want it to always be at the top of the screen)
Tutorial
You could put your next image in a div:
<div style="text-align:right">
NEXT PICTURE :<img id="scroll_me" alt="NEXT PICTURE :" src="img/next.jpg">
</div>
this would align your image with the right hand edge of the browser window.
Try that and see how you get on, there are other things you can do, but let me know how you on.
Move your <p>NEXT PICTURE..</p> to below (outside) your "container" div, and remove the two <br> at the top.
That will do the trick.
http://we-live.in/the_sierra - Towards the bottom of the page I have a div which contains an image of grass. How can I get the grass image to be centered horizontally on the page?
ok i got it centered
now i need to move it lower down on the page
thanks
In your CSS, add the following
background-position:center top;
to the following:
#title{
width:940;
height:145px;
display:block;
background-image:url(images/header.jpg)
}
Additionally, you can also add the following
margin:auto;
But that may not be necessary if you are simply wanting the background image (the grass image) to be centered.
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.