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;
Related
I'm trying to align a image to position at the bottom of the website, however, it aligns at the bottom of the browser and therefore leaves a gap when scrolling down.
Here's current code:
.pbg{
background: #e1feff url("http://d.cjshort.co.uk/img/mountains.png") no-repeat;
background-position: center bottom;
}
Thanks in advance.
By default browsers apply margin to the tag, that might be causing the gap you're seeing at the bottom of the page. You can do something like body { margin: 0; } or use a full-fledge css reset.
But like others have said, it's not super clear exactly what the problem you're having is.
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 have table row class named logo with attributes
.logo
{
background: url("img/logo.png") no-repeat left top !important;
}
Now I do get an image on top left on every row, but what I am trying to accomplish here is to move image out of table row such that half of the image is in `table and half of it outside the table.
I changed the my class to
.logo
{
background: url("img/logo.png") no-repeat -12px top !important;
}
and get half of the image in table row but the part of image outside the table disappears (cant see it).
I have tried using z-index, position properties but nothing works. Can someone guide me in right direction on how i can get required behaviour?
NB: testing it in Firefix 20.0.1
Thanks
I think you can achieve this with this trick: you will never see the background because it don't have space to show... Solution naturally pass to set a padding in the <tr> to make that padding show the background image. But, <tr> only gain padding if you set the display to display:block;.
I finally use this code:
.logo {
background:url(whatever.jpg) no-repeat -12px top;
display:block;
padding-left:12px;
}
Here's a working fiddle.
Hope this helps!
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.
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.