I have an HTML page to which I am applying background image using CSS properties.
The problem is, I want this background image to appear at bottom of the relatively longer page, i.e. the page is to be scrolled to bottom to view the background image.
I applied following:
body {
background: url("images/bg_homepage.png") no-repeat scroll right bottom transparent;
}
This works fine for Firefox and Internet Explorer, but doesn't work for Chrome and Safari browsers. Chrome and Safari needs the background-attachment property to be set to "fixed", but that is exactly I don't want.
Please guide.
Thanks
If you dont want it in your body, you could create an div with and id bg for example :)
and then do something like this
#bg {
background: url("/bg.gif") no-repeat scroll left bottom #FFFFFF;
bottom: 100px;
height: 396px;
position: fixed;
width: 288px;
z-index: -1;
}
if you dont want to use fixed anywhere on the page, it won't work in the major browsers :(
I've done that with
body {
width: 100%; height: 100%;
position: absolute;
background-image: url(img/strand_402.jpg);
}
Works in all browsers (including IE).
Related
I have a background image of a paper airplane on the body tag of this page: http://cogo.goodfolk.co.nz. The very tip of it is being cut off - if you resize the browser window the full image pops back in.
It's only happening in Chrome, and isn't consistent, if you refresh sometimes, or even hover over sometimes it's fine. If I remove all the background styles (background position and no-repeat) then the whole image is there - but of course isn't positioned correctly. It's also happening on other pages of my website (eg http://cogo.goodfolk.co.nz/online-surveying).
After days of debugging/searching I can't find anything that refers to this issue and/or fixes it - is it possibly a Chrome bug with background-position?
Any ideas or workarounds? Thank you!
//EDITED//
The relevant code is pasted below, although obviously this is pretty standard so it must be something else in the site that's causing the problem:
.home {
background: url("../img/airplane.jpg") no-repeat center;
background-size: 70%;
background-position: 10% 98%;
}
The background image is set to center, so this is expected behaviour, depending on window size. You could change this CSS declaration from:
.home {
background: url("../img/airplane.jpg") no-repeat center;
background-size: 70%;
}
To:
.home {
background: url("../img/airplane.jpg") no-repeat center top;
background-size: 70%;
}
This would anchor the image to the top of the screen, meaning it would not clip, but this may not be the behaviour you are looking for.
To complicate matters, you also have this, which is probably contributing to the problem. I would suggest removing it entirely:
#media (min-width: 1200px)
.home {
background-position: 20% -10%;
}
Yay thanks to everyone who left suggestions, fortunately I've figured out a workaround! I managed to pretty much keep the background styles the same, and just placed everything in a :before pseudo element on the body tag. You can check out the updated code at cogo.goodfolk.co.nz if you're interested, or it's pasted here:
.home {
position: relative;
min-height: 860px;
}
.home:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: url("../img/airplane.jpg") no-repeat center;
background-size: 70%;
background-position: 50% 15%;
}
Set the display to "inline-table".
I have just finished the reading this great post, but it did not help me.
This is the website I am building: http://82.230.210.84. If you rezise Google Chrome down to trigger the responsive design, and then scroll down, you will see that the menu passes below the images, instead of remaining over them, as it does in Firefox.
In the code, all z-index properties come with a position property set to relative/absolute/fixed, and obviously the higher value (50) is set to the menu.
Any suggestion about why the menu does not stay on top on the images on WebKit browsers?
Any potentiel fix/workaround is most welcome!
I was able to fix it by adding -1 z-index.
Like this
.formation_domains a.formation_domain > div {
position: relative;
width: 200px;
height: 125px;
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
z-index: -1;
}
Hope this helps.
I have a navigation menu in one div and there's a background image in other div which is set to absolute because it has to be in some a bit different position of the website. Now that image is transparent PNG and it blocks clicking the last link in the navigation because that image is technically on top of that link (visually not).
So I set z-index: 1 to menu and that fixed the problem only on Firefox, the link becomes clickable. It doesn't work on Chrome, Opera and IE though.
What could be the problem?
There's a screenshot, as you can see that girl image is transparent and when selected it shows that it technically is over that Contact us link and it somehow blocks it:
http://i.stack.imgur.com/O4rEV.jpg
The menu and the image are not in the same parent div.
#the-menu {
margin: 17px 0 0 17px;
z-index: 1;
}
#the-img {
background: url("../images/img-girl.png") no-repeat scroll center 0 transparent;
height: 351px;
position: absolute;
right: 50px;
top: -52px;
width: 381px;
z-index: 0;
}
#the-menu should have relative position in order for the z-index to work.
I have this property with multiple background images and their respective positions:
#my_div {
background-image:url("..."), url("..."), url("...");
background-position:right bottom, right bottom, right 15px top 17px;
}
The positioning for the third image works fine on FF, IE10, Chrome.. but unfortunately not on Safari Mobile. It renders the right and top thing but not the offsets (15px for right and 17px for top).. I couldn't find any reference on this. How would you deal with this? I'd avoid having to modify the image manually adding transparent borders to make the offset.
Mobile Safari (as well as the Android browser) doesn't support the four-value syntax yet. (see the MDN article on background-position).
One possible workaround would be to extract the background image which should have the offset and put it in a pseudo element that has the corresponding offsets.
#my_div:before{
content: '';
display: block;
position: absolute;
z-index: -1;
height: 50px; /* Height of your image / parent div */
width: 50px; /* Width of your image / parent div */
/* Your offset */
top: 17px;
right: 15px;
background-image: url("...");
background-position: right top;
}
For easier understanding I created a jsFiddle: http://jsfiddle.net/pKWvp/1/
You could also try using the css calc function: http://briantree.se/quick-tip-02-use-css-calc-properly-position-background-images/
It's might be easier/cleaner than using pseudo elements.
Very strange behavior that I haven't seen before.
I have a fixed position div that has a transparent png background image. The z-index is set to -1 so that content can scroll over the fixed image with the scrollbars.
I have it positioned with the bottom and right at 0px, but the image overlaps the scrollbars (on FF and Safari, anyway.)
Here's the link:
http://adamjcas.www59.a2hosting.com/pg/show/id/4
CSS:
#plants /*for the cut paper plants in the background*/
{
background: transparent url(../background_images/plants.png) no-repeat;
bottom:0px;
right:0px;
z-index: -1;
position:fixed;
height:691px;
width:475px;
}
One hack I used was to use
right: 16px;
Which worked fine, as there is always (probably) a right scrollbar. But the bottom scroll is only sometimes there. Is this a simple CSS issue?
That was a strange issue. But I figured out that the scroll bar was not from the browser but instead from the parent div which had overflow: auto.
This is how I fixed that. Change the style for div id="rightpanel" to remove the overflow: auto;.
Then update the #rightcontent styles as follows:
#rightcontent {
left: 445px;
padding-top: 127px;
position: relative;
width: 650px;
}
Hopefully that should fix the issue for all browsers. Besides that I also found the browsers complaining about not finding Cufon.js. You might want to look into that as well.