I am building simple scroller and admin should paste the link to the image in the admin panel and that image should output as a background of slide div. I have set up the options for this, and links are being saved to the database I just don't know how to add it to the style rules.
I have included the following code to the <head></head>
<style type="text/css">
<![CDATA[]]>
#slide_1 {
background-image: url('<?php echo get_option('slide_1'); ?>');
background-repeat: no-repeat;
}
]]></style>
In firebug the url is being displayed in the <head></head> but the style is not applied, and #slide_1 doesn't have any rules applied to it.
Is there any other way of doing this?
Many thanks in advance
May be there is a CSS background rule is being applied forcefully. You can try using inline style. Like.
<div id="slide_1" style="background: url('<?php echo get_option("slide_1");?>') no-repeat;">
.....
</div>
Another thing I have noticed that in css rule background-image: url('<?php echo get_option('slide_1'); ?>'); you are using single quotes in php and also in css. This is producing a conflict. Try using background-image: url('<?php echo get_option("slide_1"); ?>'); double quotes.
Try removing the [CDATA]. If your page is getting parsed as HTML instead of XHTML it probably won't recongize the styles.
For further reading, wikipedia states:
CDATA sections in XHTML documents are liable to be parsed differently
by web browsers if they render the document as HTML, since HTML
parsers do not recognise the CDATA start and end markers, nor do they
recognise HTML entity references such as < within tags.
just removed <![CDATA[]]> and works fine
Related
Is it correct to use the <style> tag outside of the <head> element ?
Like this:
<html>
<head>
<style> some style </style>
</head>
<body> some text </body>
<style> some more style </style>
<body> some more text </body>
</html>
I want to do this because: my cgi sources other files with their own style.
The cgi file contains:
#!/bin/bash
echo "content-type: text/html"
echo ""
echo "<html><head><style>"
echo "h1 {color: red;}"
echo "</style>"
echo "<body>"
echo "<h1> some text here </h1>"
echo "</body>"
source ./data.sh
echo "</html>"
And the source file contains:
echo "<style>"
echo "h2 {color: blue;}"
echo "</style>"
echo "<body>"
echo "<h2> and some other text here </h2>"
echo "</body>"
This seems to work fine. But is it correct ?
At w3schools it says:
Each HTML document can contain multiple <style> tags.
But is it done this way ?
style is supposed to be included only on the head of the document.
Besides the validation point, one caveat that might interest you when using style on the body is the flash of unstyled content. The browser would get elements that would be styled after they are displayed, making them shift on size/shape/font and/or flicker. It is generally a sign of bad craftsmanship. Generally you can get away with putting style anywhere you want, but try to avoid it whenever it is possible.
HTML 5 introduced a scoped attribute that allowed style tags to be included everywhere in the body, but then they removed it again.
According to the W3 specs, <link> tags are only supposed to go in the <head> section:
References
For HTML 4.01: http://www.w3.org/TR/html401/struct/links.html#edef-LINK
For HTML5: http://www.w3.org/TR/html5/document-metadata.html#the-link-element
Validation Issues
If you put a tag within the body of the HTML document, it will not validate using validate.w3.org
<style> tags can be anywhere in the HTML Document. However, it is best to have it inside the <head>.
From my personal experience, its best to just make a separate stylesheet to put all the CSS in.
According to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style :
"<style>-element can be included inside the <head> or <body> of the document, and the styles will still be applied, however it is recommended that you include your styles in the <head> for organizational purposes"
I think the key-phrase here is "for organizational purposes". So it's not a technical requirement but advise which purports to make your html-source more readable.
The above linked-to page is
"Last modified: Jun 4, 2019, by MDN contributors"
According to W3 standards, it is necessary to put style tag inside the head element of the document. If you put your style tag inside the body element then the style to your web page will be effected after whole DOM is loaded, due to which we can see blank page for some time before the CSS comes into effect and certainly that would cause impact on better UI experience. Mostly the recommended way to implement CSS in a document is to create a saperate stylesheet and providing link to the document wherever needed.
It really depends on the website and how it loads. CSS files which are loaded in the header block your website from rendering so you can inline CSS in the header or the body. This is because the CSS file must be fetched (through the network or locally) which can impact performance. In a perfect world you only have one css file but the world is not perfect.
A new feature available on most major browsers..
Stylesheets activated after the body is started do not block paint
[https://www.chromestatus.com/feature/5696805480169472][1]
<body class="gorgias-loaded">
<p>This page includes an image, followed by an external css file that is appended to the document by js (async) followed by another image.
The css file changes the page background color black when it has been applied.</p>
<p>Optimally what you will see would be:</p>
<ol>
<li>A blank white page with this text and the title for both images.</li>
<li>Immediately after, the second image.</li>
<li>One second later the first image.</li>
<li>Four seconds later the background color should change to black.</li>
</ol>
<h2>First Image (1 second delay)</h2>
<img width="300" height="365" src="slowimage.php">
<h2>External CSS injected by JS (5 second delay)</h2>
<script>
var attach = document.getElementsByTagName('script')[0];
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'slowcss.php';
link.media = 'all';
attach.appendChild(link);
<link rel="stylesheet" type="text/css" href="slowcss.php" media="all"></script>
<h2>Second Image (no delay)</h2>
<img width="300" height="365" src="slowimage.php?delay=0">
</div></body>
I am currently developing a rails application. I am trying to show an image on background in html.erb file yet I cannot do this. I use following up code:
<header class="intro-header" style="background-image: <%= asset_path('home-bg.jpg') %>">
What's the mistake I did? Can anyone explain this?
Thanks,
Bartu
Make sure to wrap your background image in a url:
style="background-image: url(<%= asset_path('home-bg.jpg') %>)"
Links to background images must be wrapped in url(), otherwise your browser will not know where to go to get the image.
You forgot to put the url declaration in your background-image property. It should look like
<header class="intro-header" style="background-image: url(<%= asset_path('home-bg.jpg') %>)">
Otherwise, you're just including a raw url as the property.
In Joomla how can I add a style to a article like this?
I try to edit the html in the editor but the editor deletes everything inside style
<style>
span{
color: #0099ff;
}
img{
float: right;
}
</style>
<div>
<h3>
<span>
<strong>
<em>Water Innovation through Dissemination & Exploitation of Smart Technologies</em>
</strong>
</span>
</h3>
<img src="/images/home/ict4water_projects_logos.png" alt="ICT4Water projects logos" width="400" height="225"/>
</div>
You can temporarily turn OFF the editor at the global settings to save an article or setup allowed tags list at the editor settings.
It's better to avoid embedded CSS whenever possible. Have you tried adding your custom CSS to your template's template.css file (or a custom.css file if it has one)?
In lieu of that, what Victor Yuoshev suggested will work HOWEVER any future updates to that particular article will always have to be done with the editor turned off, otherwise when you go to save it your embedded CSS will just get stripped out again.
I am able to get an svg to show just fine when I use
<img src="../images/jte.svg" alt="Logo">
however, when I try and display via css using the following:
html
<div class="logo2">
</div>
css
.logo2 {
background-image: url(jte.svg);
}
Nothing is being displayed. Any idea why this is happening? I have tried multiple different path options "('../images/jte.svg') ('jte.svg) no avail though.
Use a defined width and height for the element in question, or simply attach it to the body. For example:
body { background-image: url('https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg')
I have a CSS class where I added a background image like this:
.my-class{
background-image: url(images/my-bg.png);
}
this applies fine and works properly in browsers, but when I see it in the iPad, the background image is not visible.
What could be the reason?
Without further information (i.e. how you're applying this class, and to which element), I can't help further. I can tell you however, that this snippet works just fine on desktop, iPhone and iPad:
<!DOCTYPE>
<html>
<head>
<style type="text/css">
.my-class{background-image: url(images/my-bg.png);}
</style>
</head>
<body class="my-class">
<p>Some content</p>
</body>
</html>
I've had the same problem and have managed to get a working solution using jQuery
$(document).ready(function () {
var buttonsFilename = '<%=ResolveUrl("~/Content/Images/Buttons.png") %>';
$('.commands .command').css({
background: 'url(' + buttonsFilename + ')',
width: '55px',
height: '55px',
display: 'inline-block'
});
});
I'm using this within an ASP.NET MVC website, hence the <% %> tag.
I could only get it to work using the background shortcut css property. I couldn't get any of the following to work ...
background-image
backgroundImage
'background-image'
... when using the object notation. Unfortunately that wipes out any other background settings you may have. But I got around that by using another piece of jQuery to set my background-position property.
I had this issue and finally after hours of apple bashing and toiling I made a div tag with an ID around my entire site. The iPad loves it :)
Problem solved.
CSS
<style type="text/css">
#bodybackground {
background:#999 url('http://mywebsite.com/images/background.jpg')
}
</style>
HTML
<div id="bodybackground">
entire site here
</div>
Add this meta tag to your page
<meta name = "viewport" content = "width = device-width, height = device-height"/>
I found that I was having the same problem, (ie: no background image shown on iPad specifically), the problem was the use of quotes, or lack thereof, when apostrophes were needed...
Problem (no apostrophes)
.my-class{background-image: url(images/my-bg.png);}
Fix (apostrophes added)
.my-class{background-image: url('images/my-bg.png');}
If you're saving the .png from photoshop, make sure you save it via 'save for web and devices' and select PNG24.