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
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.
I want to make a background like this except using an image instead of the blue background: http://gakeyclub.org/
Notice that resizing the window of the browser does not disturb the background. What do I need for this?
According to your comment, what you are asking is to have your background center on your page. To do so use background-position this will tell the browser where to position the background according to its container.
background-position:50% 50%;
You might like to add some other background attributes such as background-repeat:no-repeat to make sure the picture does not repeat on huge resolutions.
this is how your css should be looking for a fixed image as background:
body
{
background-image:url('image.png');
background-repeat:no-repeat;
background-attachment:fixed;
}
Why do you want to use an image. It will just increase the size of the page. Use this code:-
background: none repeat scroll 0 0 #002f5f;
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;
I basically made a header image for my site and the sides of it have black on it. I want to extend the header so it goes for the width of the user's web browser with black "bars" as if the header extends for their whole browser.
I've tried a few things, but I cant figure this out.
Here's an example of what I have now:
#header {
background: url('img/header.png') no-repeat top center;
height: 131px;
}
#headerbg {
height: 131px;
width:4000px;
background-color:#000;
}
And in the html I just have both in divs and within each other in the html.
Here's a jsFiddle that shows you how to layer the two div's and use background-size property to expand the image so it fits just the same as the background color's width. UPDATE: New jsFiddle above is replaced to include better method for that type of look.
Edit: Here is a different jsFiddle that has places the image inside and centers it, allowing any excess background color from the parent container to show through.
Edit 2: Using the Edit fiddle above, you can apply CSS3/IE gradient effect as shown in this jsFiddle
Status: The solution was to use center center for background-position combined with setting both width and height to 100% for the image used.
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.