Has anyone ever experienced something like this before? I don't even know what you would call it.
When editing in jsfiddle, its fine
image: [everything is fine]
But when I view it on my website there is some type of arch.
[strange dark line]
Has anyone ever experienced this before?
It's likely jsfiddle applies a default margin/padding that helps hide the background image (the arc) in question. Or, simpler, there is no CSS on jsfiddle.
Check if there is any sort of background image (perhaps from CSS) being used on your website.
Related
I need a bit of help with my background image. The issue is that it appears to "reset" (not really sure how to describe it) with each element in my HTML code, so the page looks very choppy. Is there anyway to smooth it out? I have tried this in both Chrome and Firefox and get the same result. The background is on my About Me page, below is a link to it. Thank you in advance for your assistance.
First Project
Thank you to anyone that may have read this already, but I finally found the answer to my question here: W3 Schools Backgrounds
Hopefully this will help anyone else that might be having issues with their background.
This is super, duper weird from my perspective.
I'm setting up a website where I have a banner. I set the background image using the background-image property.
My challenge is: when I have two images with same dimensions, it doesn't work when I load using own domain, but works on external domain.
MY CHALLENGE:
I have this banner on my page:
Background is set like this:
Now this is kinda weird, since the image actually works on this URL and instead I get a black background (no image):
If I use a different image from a third party URL that has exactly same dimensions:
And I replace this in the CSS:
Then everything is fine and the background works!
So my question is:
What on earth is going on? I obviously assume I've went crazy and need to go home and sleep since there must be something super obvious going on, but I need your help to tell me what's wrong with me.
The overlay effect hides your background image.
Kindly change the css
.overlay::after{
background: rgba(0,0,0,.5)
}
I hope this helps you
I´ve recently started to program all my layouts in tableless CSS, but still prefering the old tables style. Much faster. Anyway, I´m stuck in this layout that is almoust finished, but I need help to one minor detais, which I can´t manage to fix.
Here is the test address:
http://www.syncsystem.com.br/
As you can see, the design and background are almoust complete. Later I´m gonna put the rest of the stuff in, like links and so on. The problem is at the bottom. The ideia behind this is that the background texture stay fixed, as is is. But there´s a white space at the bottom which I can´t get rid of...can anyone help or give a hint?
Thanks,
I'm not sure if that's what you are talking about, but the footer's background image itself has some space in it below the black part.
And the footer has the same height as it's background image, so the whole image is being shown.
Next time use some web development tool such as Firebug, or use a native one pressing F12 in Firefox or Chrome. It will help you quickly analyze the page element's properties
I just noticed something weird, when creating a menu for a website. Take a look at this Fiddle which illustrates the problem.
Notice the small orange spot, to the right of the last letter when you hover on the menu-item.
Why is this occurring?
I can tone down the "orange effect" by lowering the contrast between the foreground and background color, but it does not solve the actual problem. Is this a bug, or is there a clever way to fix this?
I'm using Chrome on a Mac btw. I've noticed it doesn't occur in Firefox, so it's a browser-related issue.
Update
Thanks for the answers and suggestions on how to fix it! I accepted Marcel's answer as this seemed to be the most correct answer as to why it is occurring. I don't know if this is the case, but it seems to be a Webkit problem. If you notice the bug in any non-webkit browser, please say so, and I'll update this.
It seems to be a subpixel rendering artifact. Adding opacity:.9999; to the CSS rules for li a seems to resolve the issue.
If you add padding-right: 1px; to the li a, the orange dot will go away and let you keep the font.
As far as why it's occurring, the only thing I could think of was that the couple edge pixels of the T were extending past the edge of the anchor's box. Adding the padding expanded the box a little, but it seems rather hackish.
If you add a background colour to anchor, you can see the edge of the T is outside the background.
I am working on a dutch site and i am having a problem with the logo of it.
I saved the logo as PNG24 sothat the characters "hvb" in the logo will be transparent.
for some odd reason, it shows the characters in plain old white.
Could somebody please tell me how this is possible.
By the way: it is not caused by the h1 tag it is wrapped around.
http://www.luukratief-design.nl/wp/
Help would be appreciated
EDIT:
I have never seen this befor, but you guys where right! The image HAS indeed have white letters!
The odd part about it is that the layers were hidden, so they look transparent in photoshop. Once i used save for web and exported it to png, all of a sudden they are white. Take a look at the screeny:
The solution:
As stupid as it sounds, i deleted the white layers (which werent even visible), and exported it again. As you can see it works now.
I can only choose 1 right answer, so i will choose the first guy who pointed this out. Thanks guys. Still strange, but thanks!
The letters are white in the image file.
The logo appears to have transparency for me. I am using Chrome.
Also transparency with PNGs does not work in IE6 or older without some javascript fiddling.
See: http://code.google.com/p/ie7-js/
I made the simple change for you and made the letters transparent. You can use it all you like. No charge! ;)
EDIT: Obviously you can do a much better job if you take a bit of time, but editing in image editing software is the only way for them to be transparent.
Seeing as the "h" of hvb has a nice flick at the end, surely its not meant to be transparent?!
When I change background to black, letters are white. There is no problem with implementation to site, I think problem is in image file.
I had difficulty with comprehension questions, second option:
Also if you using IE, and you have problems with transparent image corners and edges, use js code to fix it.
And if you want that letters be transparent, u need to edit image file with Adobe Ilustrator, or Photoshop or with somethnig else, what you using.
Link: IE Transparency