I am creating an web-application using node-webkit, which bases on googles chrome browser.
When embedding a pdf file on a site, using the embed tag, ich get a white line on the top of the embeded part (picture attached). My first thought was, that it is a kind of border, but setting border = 0 dont resolves the problem.
My suggestion is, that this white line is part of the background of the embed part and adobes pdf plugin doesnt covers the whole embed area.
Edit
If my suggestion is true, then it would already help me if i could switch the background of the embed area to an other color. But setting background-color doesnt works too.
Margin and padding has to be set to 0 on the html/body.
If you add:
body {
margin:0;
padding:0;
}
That should sort your problem out.
try to use <iframe></iframe> tag. set the source of your file in src atribute. you can set the height or width of iframe tag as you set your embed tag.
example : <iframe src="http://example.example/file.pdf" width="500" height="400"></iframe>
or you can set the application to open the file you attached to your website
might it help! :D
Related
First time posting here, so treat me gently. :)
I have an SVG image on my site which has a transparent background -
<img class="img-responsive center-block" src="images/pritchservices.svg" alt="Pritch Services Logo" />
Works beautifully on my site. However, due to the transparency, when that image loads in google image search results, due to the transparency, looks terrible.
I have an alternative image (using for fb Open Graph crawler) which is here -
Pritch Services Full Logo
In my crazy mind, this is what I had as a plan:
Redo the SVG in Illustrator to include the background color (as per the fb OPen Graph image) - this would then mean the image result in Google would be as expected
Have some CSS within my site to set the background color of the SVG to transparent, so it displays nicely (as it currently does on the site)
I am assuming I can't just put the SVG markup inline, as although this would give me what I wanted on the page, it wouldn't load the image AT ALL on google image search results?
Is this the way to go, if so, any suggestions on how to implement please; or is there an alternative solution I haven't thought of? Or am I just being too picky?!
Thanks in advance everyone...
You can't include an SVG via <img> and style it with CSS in your parent document.
You can't style the contents of an <img>, even if it is an SVG
CSS doesn't apply across document boundaries
You have a few options.
Include the version with a background in your page. And then hide it and replace it with the transparent-background version via CSS.
<div class="logo">
<img src="logo-with-background.svg" ... />
</div>
.logo img {
display: none;
}
.logo {
background-image: url(logo-without-background.svg);
}
Include the background version using <object> then use the DOM to find the background element and hide it.
var object = document.getElementById("myObject");
var svgDoc = myObject.contentDocument;
svgDoc.getElementById("bg").setAttribute("display", "none");
Apply a clipping path to the backgrounded version as #Obink suggests. It would work, but it is not the easiest solution though. And it won't work on older browsers that don't support clip paths.
I'm relatively new to HTML and CSS so with a bit of luck there is an easy fix to my problem.
I have a few images for my site, 1 as a background image and 2 which are just sitting in the body. In safari everything displays flawlessly however in Chrome, Firefox and Opera only 1 of the images in the body displays.
I've tried searching for answers, the only suggestion that I can find is to disable ad-block which resulted in no-change.
I've also tried disabling the stylesheet but the problem still persists.
<div class="photocontainer" id="homepage"><h4 id="phototext">A Guide to Quality Web Development</h4></div>
<div class="Body">
<h2>We're here to <Span>help.</Span></h2>
<img id="plan" src="./images/plan.jpg" alt="plan">
<img id="flowchart" src="./images/flowchart.jpg" alt="flowchart"/>
The above code contains the 3 images. The second of which is the only one that works.
I should mention that the photocontainer div has a background-image specified by the stylesheet.
Option 1:
I suggest changing you src codes.
From src="./images/plan.jpg"
To src="plan.jpg"
Option 2:
Add width and height codes to your <img> tags.
Option 3:
Try removing the id from one of the <img> tags.
I hope one of these work. Try to mix them around. Like removing the id and adding the width and height too.
Found the problem!
The images themselves had trouble opening. Opened them in photoshop and then saved for web. Not it works.
Link to website:
http://www.ideagang.co/home.php
Is it possible to set the background to black when click from 1 page to another?
Right now the website load perfectly with the black background, it's just that when I navigate from one page to another the page flickr for a second.....
Is there anyway to resolve this by setting the background to black when loading page internally?
Not using only CSS. The browser's default color for the background is white, so the flicker you see is the default coming through for a split second before it has a chance to read the CSS rule to make it black.
The only way I can think of to get around this would be to load the first page, and then switch from page to page via javascript, loading them in to the exiting page. No reloads means no flicker. In my opinion, that is a ton of overhead for very little value, so I would suggest just living with it.
I very much doubt this would be possible with CSS.
Have you tried using
<body background="#000">
It is long deprecated but may help. I think you will still get a white flash but it may be for less time.
You could also try putting a small block of CSS as the first thing in the header after your title.
the html5 method of doing this via CSS is now:
<body style="background-color:#000">
also tried putting this CSS styling as the first thing in the <head> :
<style type="text/css">
body{background-color:#000}
</style>
...but on my application it still resulted in a momentary white flash
While this is a pretty old question, hopefully this can help someone else who stumbles along (like me):
Using some javascript seems to have worked for me (only tested on Firefox 84.0 - Ubuntu):
index.html:
<script src='script.js'></script>
script.js:
onload = function() {
document.body.style.backgroundColor = 'black';
}
I believe the most efficient way to accomplish this is to place the background color in the html tag itself in the main document file. Such that
<html lang="en" style="background-color: #111">
With this you can set any background color you want and it should work.
I have a background image that I want to repeat across (repeat-x) however when I try to view the page, nothing shows up. I'm also using javascript to use a different CSS file for different times of the day, however I am sure that is not the problem because firebug shows that the CSS file was added to the head.
Edit: The problem is that the browser cannot find the file, however when I attempt to link to it, it still cannot find the file.
You can download the archive of the site here:
http://cdn.duffcraft.net.adam543i.net/sitebkp-1845.zip
Its only 200 or so kb. Nothing massive.
As there is no text in your header the div will not get displayed.Try following css
#header {
background-image:url(img/night/night-time-tile.png);
background-repeat:repeat-x;
position:absolute;
height:100px; // Adjust height according to your image height
top:0;
left:0;
}
And you are sure the path to your image file is correct? Does Firebug load the image?
Your file structure is probably like this
index.html
css/
style.css
img/
night/
night-tile.png
Now, from your style.css you have to use a relative path to your image file. So not img/night/night-tile.png but ../img/night/night-tile.png. In your path it is looking for the image within the css directory, which is wrong.
==Update==
After downloading your code I found 2 more errors.
The first is that you forgot to add rel=stylesheet to the <link> element in which you link to your stylesheet. This way, browsers will not know it's a stylesheet.
The second is that you forgot to add a ; at the end of your first rule in your night.css, resulting in a parse error which causes the background rule not to be rendered.
Good luck fixing these issues!
If you have the Chrome browser, inspect the element where the background image should appear.
Hover over the background-image declaration in the firebug window
background-image:url(img/night/night-time-tile.png);
and you will see the full path of the image.
In the screenshot you can see the equivalent for the stackoverflow logo at the top of the page.
You can then click on the css declaration and change the url until you find the correct path for your image.
The element has no height (either explicit or from content).
This means there are no visible pixels of the element to see the image across.
I'm working on a site at the moment, and an image that is used as the background for a submit button (current the button is normal HTML button, but will be changed to an asp:Button when developed).
Another developer pointed out that this button seems to have a white background. Thinking the image wasn't saved correctly, I opened it up in Fireworks and the PNG image had a transparent background. I exporting the image again, saving it as a PNG-32 image, and overwrit the original image with the new one. The image still appears the same.
Bizarrely, this occurs in Chrome, Firefox and IE 7/8, and the other images on the page don't have white backgrounds either.
Also, I have checked the CSS and there are no styles that contain a white background colour element.
Any one got any ideas?
Many thanks!
Due to the site being built in ASP.NET, changing the button to be an linked image and using JavaScript on it then isn't an option.
However, on the developed ASP.NET site, this issue is also occurring. But I've managed to fix it in ASP.NET by doing the following:
When calling the button, I've typed this out to begin with:
<asp:Button ID="GoBtn" runat="server" CssClass="searchbutton" />
Adding the parameter "BackColor="Transparent" removes the white background from the button. So the tag now reads as:
<asp:Button ID="GoBtn" runat="server" CssClass="searchbutton" BackColor="Transparent" />
This removes the white background in ASP.NET. At a total loss to explain why the button has a white background on it. Although I have read that using a GIF could solve the problem, but I haven't had time to see if this is true or not.
EDIT (24/01/2010)
I found out how to fix this issue in the HTML document, by pure accident!
What you need to do, in the CSS you have to call the following:
background-color: transparent;
border: none;
This removes the grey/white background on the back of the button, and it also removes the border of the button.
try adding
border: none;
to your button style.
I think if you have already tried setting:
submit{background:none;}
and such. Then you should try changing the submit to be just a link with an image instead and calling it via a javascript, I'm thinking it's the button type that does it.
Edit (20th Jan):
I expected that some ASP would solve it (I can't really stand when something like ASP has to interfer with the layout of anything).
If you want to solve this for your HTML version I think you should provide a link or copy it into a fiddle, because it's probably easy to find out what's causing it. My bet is on some inherited style you can't overwrite. Sure you're not using !important or such anywhere in some generic styling?
It's kinda weird :D
check this fiddle out ..You could try to set to that input background the url of your image and just see what happens (if it's public..or you can upload it on imageshack), so we can exclude that there's a prob with that particular image