i have a background in the body, in my web page when it loads,but when it loads
it comes like a white flash behind the background.I know there was a way to fix that with the dreamweaver but i dont know hot to fix it from css or direct in the html page.
but still the white flash comes when it loads.
how to fix it ?
thanks
It sounds like you should set a background-color which would be shown before the image is loaded.
In Dreamweaver, you should see it next to the Background Image option
In CSS, that would be: (note black is #000000)
background-color: #000000;
background-image: url("path/to/image.jpg");
Or, in shorthand form:
background: #000000 url("path/to/image.jpg");
I would recommend using an image editor/color picker to get the main color used in your image.
This question may also help: Changing the colour of background behind image css
Related
Slightly baffled by this one - I'm working on a tiny static site with a large background image, which is rendering with a 1px black top border in Firefox. There's no border in the image and it doesn't render in any other browser. I haven't managed to find any references to this happening with a background image anywhere and am not quite sure how to fix it!
This seems to be fixed in the latest build of Firefox (not sure whether to post this as an answer to my own question or as part of the question?)
You should make sure you have resets for all css, like normalize.css. This way all browsers act the same.
img { border:0; }
I am working on a hybrid HTML5, Jquery Mobile application using phonegap. I am currently having an issue with a background image I set using CSS. I have a CSS class (bPage) that sets the background image and color and all that and it seems to work right. The issue is when you navigate to a page that requires scrolling. Because the image is set to be in the center it moves to the center of the page, which is great. The problem is that the page loads with the image in the spot of the previous page and then it jumps to the middle. I want to make it move the image before the rest of the page loads so that it doens't look like the background jumps last in the page loading. Both pages have the class bPage on them and it is working correctly, except for the jumping. I assume that there is a way to force this to load earlier or something but have not been able to find a way.
Here is my bPage CSS code:
.bPage{
background-color: #6c6d6f;
background-image: url(../img/Backgrounds/Background.jpg);
background-repeat:no-repeat;
background-attachment:scroll;
background-position:center;
}
Thanks in advance!
Sorry about the vague title and I hope it's okay to ask questions about free Joomla3 templates here.
I am working with this template Joomlage0056 - DesignCanvas - and I would like to change the color of the Facebook link in the menu bar so that it appears blue, preferably a white font on a blue background, but if that's not possible then a black font on a blue background.
I have (despite my limited CSS knowledge) managed to figure out that this Facebook link is .nav_facebook a. And I have added this to my template (in a special field made for custom CSS)
ul#navigation .nav_facebook a {
background-color:#3B5998;
}
This however makes a blue square behind the white circle, so it's not working as it should.
Any idea how I can achieve this task?
Thanks in advance :)
Well this is something that you cannot change in this template. What you are looking at is not a css style but a background image being positioned to the right icon. You can see the image here:
http://demos.joomlage.com/joomlage_0056/templates/joomlage0056-designcanvas/images/sm_icons.png
What you can do is edit this file in photoshop and change the color to what you want it over the icon you want and replace the original file.
I would like to put a reflection over the entire page. I have a transparent png that fades from white to transparent and I would like it to fill the browser and be displayed above everything else but allow the user to click on everything behind it, not be able to be dragged, and work in all browsers. Is this possible?
You can use pointer-events: none, which works everywhere except IE10 and older.
A blog post with more information:
http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/
Why not make the content backgrounds transparent, or with transparent png's?
Or set the opacity for the content as if it's faded into the background. Not sure what you're trying to achieve though I'm sure you can get a similar effect if you try a new approach. From a design point of view I can't imagine how a div over the main content could create an effect not achievable via other methods.
I have a transparent .png image file which I have attached it on my site, however the file has some background colour (grey) which I have no understanding why it is there. It's sure in transparent mode when I open it in any image editor or view, it has transparent background. Why when I link it, and when displaying on my site it isn't transparent ?
This is the method I'm using http://book.cakephp.org/#!/view/1441/image
I've tried embedding the image in CSS but find it a bit troublesome because I need the image to be clickable that links to my homepage.
Anyone can suggest any way to achieve the result I mentioned? ..perhaps some links or scripts that would work..I appreciate that.
:-)
It's possible there's some reprocessing going on. Do you have a link to the image, or better yet a link where we can see the markup / CSS as well?
I found a way to solve this not sure if it's the best but it works.
http://xavisys.com/css-trick-turning-a-background-image-into-a-clickable-link/
If you're using IE6, the grey background will be there because IE6 does not support alpha-transparency in images (without using behaviours or hacks).
This might help:
http://24ways.org/2007/supersleight-transparent-png-in-ie6