For the life of me, I cannot get a simple background image to show up using CSS. I have a dead simple HTML page:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>My Website</title>
<LINK href="./css/styles.css" rel=StyleSheet type="text/css">
</head>
<body>
<p>foo</p>
</body>
</html>
And the following CSS page:
body {
background:url('./images/myBackground.jpg');
}
Yet the image never shows. I've Googled this and many people seem to have encountered this same problem, but none of the solutions have worked. I've tried every combination of CSS syntax I can think of (background, background-image, no quotes, single quotes, double quotes, slash, no slash, etc.) -- no luck. I've tried putting the image in the same directory as the HTML page -- no luck. I've tried making a square div and setting its background to this image -- no luck. I've tried setting a fixed height and width -- no luck.
There's no spelling errors and I know there's nothing wrong with the image because it works using an inline image tag in the HTML. The HTML and CSS page are linked because I can do something like
p {
color: blue;
}
and that works. Am I missing something incredibly obvious here? I can do it inline, but I'd really prefer to use CSS and now I just want to do it out of stubbornness and principal.
You need to put an extra "." in front of the url.
You are now linking to /css/images/mybackground.
If you put an extra "." in front of it, like ../images/myBackground
(and add the extension like mentioned)
It should work. (At least it does in my reproduction of your situation.)
You have to use the extension .png, .jpg, .gif etc
background:url('../images/myBackground.png');
background:url('../images/myBackground.jpg');
Related
I've wondered this before, but never gotten an answer. Then just today I came across another site: http://ruralcoz.com/ with no html in the source code. Only a minified script. Does anyone know how the developer built this site, and why they chose to replace all the html with javascript? What's the benefit of this? How is this done?
Thanks!
That's a React app. React uses JavaScript to create everything on the page and then loads it into the one root div on the page.
There are advantages to doing it this way and you can read more about it here
That site does have HTML in the source code, specifically:
<!doctype html>
<html lang="en">
<head>
<title>Four Points Funding</title>
<link href="/static/css/main.d6132581.css" rel="stylesheet">
...
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript" src="/static/js/main.0673017f.js"></script>
</body>
</html>
All of the above is HTML markup, and pages must have HTML to be rendered as HTML pages. There's no way around that.
What this site is lacking is content in the <body>, which might seem a bit odd, but is very doable. Javascript can be used to create elements and to insert them into the HTML, which is happening here. For example:
<script>
const div = document.createElement('div');
div.textContent = 'Body content!';
document.body.appendChild(div);
</script>
Hello amazing people in here!
My Goal: Display a Bunch of images neatly on
http://1110kd.blogspot.in/
using Justified image gallery by Miro (http://miromannino.github.io/Justified-Gallery/)
Progress till now:
step 1: Pasted JS files in head section
step-2: tried to post images in a post, also tried to use a HTML widget to imbed the images
Now I tried to paste the remaining code at various locations in the template as well as widget, but no success :(
Now looking around for a fix. I am okay with any solution by which I can showcase a responsive image gallery on my blog (Only gallery, nothing else).
[due to inability of self hosting due to various reasons, I am basically trying to convert the blogger in a single page image gallery]
Thank you so much in advance.
Firstly Down load "justifiedGallery.min.css" and "jquery.justifiedGallery.min.js" then follow this URLhttps://jsfiddle.net/AwadheshVerma/uy0d41f2/
First, when I try your link, the first thing I see is the following image.
You have to fix this before trying to do something else.
A possible solution will be to use a CDN instead.
So to resume, here's a possible template:
<!DOCTYPE html>
<html>
<head>
GooglebaseData goes here ...
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.6.3/css/justifiedGallery.min.css" />
</head>
<body>
All your content
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.6.3/js/jquery.justifiedGallery.min.js"></script>
<script type="text/javascript">
$("#basicExample").justifiedGallery();
</script>
</html>
With blogger, you have to put all your scripts like jquery and script which need it to be between </body> and </html>
First of all, i'm kinda beginnner.
I've got similar problem to this:
jquery lightbox does not load images
Lightbox working, but somehow it cannot load the image (on the server).
I need second pair of eyes on it:
head part:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>...</title>
<style type="text/css" media="all">
#import "something.css";
</style>
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/lightbox-2.6.min.js" type="text/javascript"></script>
<link href="css/lightbox.css" rel="stylesheet" />
somewhere in the body:
<img class="HoverBorder" alt="something" src="images/photo2.jpg" id="rightImg" />
This works when I'm launching website from my drive. When I'm loading to my server it stucks at loading parts.
I tried to switch body part to direct links on my server, but also doesnt work.
Do You guys need something more?
I just solved this problem after like a week of googling the h*ll out of it.
My problem was identical to yours - when running on my HDD, lightbox loaded images without any problem, but when I uploaded the web to the server and tried to load the image in lightbox from there, I got stuck with the loading animation.
I tried literally every possible solution I found on the internet, but nothing worked. So I sucked it up and started working on another problem involving image loading failure (background image linked via css file) and found out, that the server I use sees a difference between *.jpg and *.JPG, which is a thing my computer does not do.
So, if your file paths are all right, try to play with your files' suffixes. That could help you.
Hope you solve this annoying bug soon.
Take care and good luck.
I have an issue thats causing me some headaches. I'm trying to print a report and format it correctly with a print.css but it completely ignores my css everytime. Has anyone had this issue before? I made sure the CSS file is in the correct directory, etc but still no luck.
Here is my template:
Note: I use javascript to control the print button and inside the javascript is where I have included the CSS link. I have also tried putting it just on the HTML page but that didn't help.
...
<script type="text/javascript">
function printContent(id){
str=document.getElementById(id).innerHTML
newwin=window.open('','printwin','left=100,top=100,'+
'width=900,height=400, scrollbars=1')
newwin.document.write('<HTML>\n<HEAD>\n')
newwin.document.write('<TITLE>Print Page</TITLE>\n')
newwin.document.write('<link rel="stylesheet" type="text/css" '+
'href="/media/css/print.css" media="print"/>\n')
newwin.document.write('<script>\n')
...
Now for this project I am using Ubuntu 10.10, and Firefox 7. If that helps at all.
Edit
I installed the web developer toolbar for firefox. It allows you to view the page as different medias. Now when I click print, it shows all my style changes, but when I print, it doesn't follow them.
<html>
<head>
<title>your website title</title>
<link rel="stylesheet" media="screen" href="/media/css/mainStyle.css" type="text/css">
<link rel="stylesheet" media="print" href="/media/css/print.css" type="text/css">
</head>
<body>
<input type="button" value="Print" onClick="javascript:window.print();" />
</body>
</html>
Maybe you might wanna give above HTML template a go, and see if that works for you or suits your needs.
In my opinion, your proposed function is actually better to be written on the server side rather than the client side with javascript, as you are trying to dynamically generate html page in there. You can output that page as print.html or something, and once it gets sent to the client, you then apply the print.css style and do the printing. Anyway, just a few ideas here, hopefully it helps a bit in your case. Cheers.
Not sure if this helps, but the #media print{} is supposed to encapsulate all styles during a print job.
<style type="text/css">
#media print{
/* Make the HR tag have 50 px spacing above and below */
hr{ padding: 50px 0px; }
}
</style>
This is SUPPOSED to handle this type of styling. The script could still be responsible for including the css file, but the #media print{} would tell all styles embedded in it to apply only to print jobs.
I can't seem to get modernizr to work on my website. I have added the javascript files into a folder and called to them. I've also added no-js to the html but still nothing.
When I view source, it doesn't populate the html like it should.
I'm not using it for css3 elements yet so I don't need any fallback styles, I just want to be able to use the more semantic tags like header, nav, footer etc...
This is my document code:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset=utf-8>
<title></title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<script type="text/javascript" src="/js/modernizr-1.7.min.js"></script>
Ran into this problem myself. Make sure you view the page during run-time. When you view the page source, js calls are not executed and it will not replace the no-js. If you are using Chrome then use their element inspector.
It is most likely a path issue. Try temporally replacing
<script type="text/javascript" src="/js/modernizr-1.7.min.js"></script>
With
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/modernizr/1.7/modernizr-1.7.min.js"></script>
Or it could be working, but it's not obvious. Keep in mind you don't see the Modernizr classes when you view the source, you need a tool like Firebug on FF or the Developer Tools on Chrome to actually inspect the post-javascript code.
An additional test would be doing something like...
.borderradius body {
background: #c00;
}
And if the background is red, then Modernizr is running.
You don't have any styles here but maybe you haven't defined your HTML5 elements as display: block? Modernizr doesn't do that by itself and so you still won't get the results you expect if you don't add that into your CSS.
For the record I had this issue too. After a long time testing I found that removing the 'Add CSS Classes' option from the custom build was causing it for me.