i use body background image different page different background image
Example
<body class="home">
<body class="contact">
but w3 validator error:
"Start tag body seen but an element of the same type was already open." , "Cannot recover after last error. Any further errors will be ignored."
i can use with Jquery
<script>
$('body').addClass("home");
</script>
<script>
$('body').addClass("contact");
</script>
But i want use Html Css no Jquery please help me
All right, you open one element body and then want to open another. One html page must contain one body element. It's a standart.
You are wanting a different background image for EACH page home.html, and contact.html.
home should look like this.
<body class="home">
contact
<body class="contact">
then put the appropriate css with each for different backgrounds
Related
I've been using W3Schools' Javascript library to handle HTML includes onto other HTML pages. Everything has been going good, except I'm running into some formatting issues. When the include processes, it puts the HTML into the body tag when I'd prefer it into a different tag. I don't want my body tag formatting to impact the HTML content that's imported. I'm open to any solutions, but I'd prefer something that allows me to specify a specific tag in the HTML document to be imported into.
I've tried putting the Javascript call into the head or outside of the body tag but haven't had any luck.
Here's the code used by W3Schools: https://www.w3schools.com/howto/howto_html_include.asp
<script src="https://www.w3schools.com/lib/w3.js"></script>
<!-- import header -->
<div w3-include-HTML="./includes/header.html"></div>
<!-- import navigation bar -->
<div w3-include-HTML="./includes/navbar.html"></div>
<!-- Script to Handle W3Schools HTML Includes -->
<script>
w3.includeHTML();
</script>
Thanks for the help! I'm hoping there's a good way to do this, otherwise I guess I can format my text outside of the body tag... That's far from ideal though.
Did you try to replace <script> w3.includeHTML(); </script> by <script>includeHTML(); </script> ?
I need to be able to embed HTML snippets (nested elements and CSS) fetched from a remote api inside my document, in a way that their CSS won't affect on my whole document.
I need to fetch (random) gmail messages HTMLs and embed them in my website. The thing is that most messages have their CSS tags to style the message html. The problem is that some of these CSS mess up with my own document CSS. How can I embed an html snippet with CSS, in a way that it will have its own scope and not interact with what's outside of it?
<html>
<body>
<h1>Your gmail messages</h1>
<div id="gmail-message">
<!-- Here to be injected automatically. Changing classes, etc is not possible -->
<h1>This a gmail message</h1>
<style type="text/css">
h1 {
color: red;
}
</style>
</div>
</body>
</html>
The h1 tag outside the gmail-message div is also affected and is therefore red.
What do I need to do to get around this?
One solution would be to use an iframe.
Another solution would be to extract all css and html, then add an attribute (example: scope) to every html tag inside of gmail-messag.
Then modifiy the css and add an attribut selector.
Example:
<html>
<body>
<h1>Your gmail messages</h1>
<div id="gmail-message">
<!-- Here to be injected automatically. Changing classes, etc is not possible -->
<h1 scoped>This a gmail message</h1>
<style type="text/css">
h1[scoped] {
color: red;
}
</style>
</div>
</body>
</html>
But propably using an ifram is a more easy solution.
Easiest way is to use iframe / object / embed tag (tested on firefox).
If you can use Javascript and HTML5 you can also use shadow DOM or make custom element that uses slot tag (also in shadowRoot).
You might want to look into using The Shadow DOM
An important aspect of web components is encapsulation — being able to
keep the markup structure, style, and behavior hidden and separate
from other code on the page so that different parts do not clash, and
the code can be kept nice and clean. The Shadow DOM API is a key part
of this, providing a way to attach a hidden separated DOM to an
element.
However, be aware this is new tech and, as always, Microsoft browsers don't handle it.
I've found my solution.
First, insert an empty iframe tag somewhere.
<iframe id="iframeTag" src="about:blank"></iframe>
Second, load the html snippet into that iframe, the following way:
var doc = document.getElementById('iframeTag').contentWindow.document;
doc.open();
doc.write(<html_snippet>);
doc.close();
This way the <html_snippet>'s css won't mix up with the outer document's.
Use the srcdoc attribute on iframe to scope your HTML and CSS.
<iframe srcdoc="<p>Hello world!</p>"></iframe>
It's supported on all major browsers: https://caniuse.com/iframe-srcdoc
why do not you set the background image?
There no such attribute for background. You should add it in inline css style. Try inline style like this:
<body style='background-image: url("sfondo.jpg");'>
------
</body>
Refer this for more background options https://www.w3schools.com/cssref/css3_pr_background.asp
Error in line 7:
You need to use <body style="background-image: url('sfondo.jpg')">.
Do remember image location should be on same folder.
You didn't ask the question properly but I think you asking about java web application development related question from eclipse so I want to share some experience with you. If you are using .jsp(index.jsp) file you can use JSTL or without JSTL to set background as below.
<body background="<c:url value='/resources/images/sfondo.jpg' />">
or
<body background="${pageContext.request.contextPath}/resources/images/sfondo.jpg">
note: I used "resources/images/sfondo.jpg" path you can change it as you need
First you should refer about proper project structure(eg. how to organize images, web files, java files etc...). If you are doing java dynamic web application development you can keep image files under WebContent folder. If you are using maven, structure it is difference.
If you are using .html(index.html) file you can use css code inside html file to control background image
<html>
<head>
<style>
body {
background-image: url("sfondo.jpg");
}
</style>
</head>
<body>
or you can use inside body tag too, but I think in some cases it is not working properly.
don't see the image. How can fix error?
enter image description here
Cannot resolve file 'img.jpg'.
This inspection checks unresolved file references in HTML
for inline css you used attribute style in open t
used this code:
<body style="background:url(img.jpg)">
If you are defining the background image with inline styles, it would be written like this:
<body style="background: url(img.jpg);">
Or more specifically, if you only want to change the background image and not unset all other background properties:
<body style="background-image: url(img.jpg);">
I have a background color of #efefef (greyish), color loads just fine in every browser.
Problem is that when I copy the whole file from the browser and paste it in an e-mail, then the background color changes to white.
How do I keep it the same color?
<body bgcolor="#efefef" link="#ff6633" alink="#ff6633" vlink="#ff6633">
Try
<div style="background-color:#EFEFEF">
<p>EMAIL TEXT</p>
</div>
in your email.
You can not use <body> tags in html email. All email clients will strip out any <body> <head> tags etc.
You need to rebuild the email using tables and use inline styles to style the elements.
HTML emails are notoriously difficult to code. The way you are trying to do it simply will not work i'm afraid.
Here is a brief introduction to coding html email: http://www.sitepoint.com/code-html-email-newsletters/