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.
Related
Few days ago i've noticed, that if a website have a background and if you overlap transparent PNG image on the div, the divs background disappears... Maybe it's only my computer rendering glitch, so I'll attach Screenshot too.
JSbin for index and css
Try:
body{
background:url('image') no-repeat top left;
}
You should not use 'background' in HTML tag!!!!!
html{
background:url('image') no-repeat top left;
}
Are you sure you don't have two images on top of each other? it seems like you have a colour image with a grey-scale image underneath.
If so, remove the bottom image.
EDIT: sorry, it seems to be an image change problem when you hover. Look at changing what the image switches to
I'm working on a website, and no matter what I do, I can't seem to get the side navigation bar to repeat. Because the bar is floating, I've created an image and told it to repeat. But it won't. Am I missing a step?
Here is the code for the bar:
#leftColumn {
margin-top:0;
padding-top:30px;
background:url(http://www.cnam.ca/uploads/images/left-column2.png);
background-repeat: repeat-y;
}
You can check out the problem at this website http://www.cnam.ca/annual-workshop
Looking at the #leftColumn element in Chrome developer tools, I see that the issue is with the height of the div, not the background-image. Your div height is only as tall as it requires to contain all the content. Adding height: 600px to that element confirms this, as the background image repeats.
You should look into faux-columns to achieve the result you're looking for.
http://alistapart.com/article/fauxcolumns
I have a background image inserted into my page, using this code.
<style>
#bodypage
{
background-image:url('image');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:bottom right;
}
</style>
However, the image is cut off by a div, upon scrolling to the bottom of the page
Ideally, the bottom of the image should stop right at that line, (which is a new div), instead of scrolling underneath it.
How can I accomplish this?
For further clarification
I would like that image to remain stopped at the line, without getting cut off, rather than have that line cut it off, as shown here.
try it background: #000000 url(../path/to/images/img.jpg) no-repeat bottom 0;
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....
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.