I would like to set a background-image to my HTML page rendered with Jade.
Does anyone know how to achieve this?
Thanks
You can set the style attribute like this:
div(style='background-image: url(/myImage.jpg);')
However, you should avoid using inline style. Separate your content from design - keep html and css in separate files.
Read more about attributes in jade here.
The background image is set in the CSS of the page. And that has almost nothing to do with Jade.
So, in your page CSS:
body {
background-image: url(/images/img1.jpg);
}
Or using a class that you then assign to one of the elements in your jade template:
.bkimg {
background-image: url(/images/img1.jpg);
}
and the jade:
body.bkimg
p this is a fine body
The same applies for any element type.
Related
I currently have this, but it is not setting the background as expected:
<body style: background-image url()>
Also I need it to be a file not a link
Looks like #Sverre beat me to the suggestion of moving your CSS style to a separate file. If you prefer to leave it directly in the tags, you will have to reformat it a bit like so:
<body style="background-image: url('https://yourdomain.com/some-image.png')">
I'd recommend doing this in your CSS file. This page goes in depth on CSS backgrounds and shows you how to style them as well.
You can do it in the body tag as follows:
body {
background-image: url("example.jpg");
}
I know how to do this in regular HTML, I can add a class to the body tag and modify that tag in css, but I am using Jade so I don't have a body tag to play with. My Jade file which looks like this.
index.jade (the only page that I want to have a background image in)
extends layout
block main
.container
h1 Hello world
I tried doing
body.index {
background: url(images/background.jpg);
background-size: cover;
z-index: -1;
}
This does not work. I also tried adding a backgroundimage class to the container class and make its width and height 100% like below but it is not optimal because there is another div that comes before it in layout.jade (the file index extends) which gives an awkward spacing on this page.
extends layout
block main
.container.backgroundimage
h1 Hello world
I tried doing this as suggested in the comments below and set my body_class = index in index.jade. And tried to style .index in css but this is not working also.
So is there a way I can accomplish this?
I have accepted the above answer but I ended up just creating a separate style sheet that customized the page. Seems to be a much more simple solution.
Either you need to add the index class to your document body, using something like this (or an equivalent after the page is loaded).
extends layout
block main
- document.getElementByTagName("body").classList.add("index")
.container.backgroundimage
h1 Hello world
Or you could simply apply the .index class to the container element on your index page, and make sure that container spans the entire page background. (This may or may not make sense depending on the contents of your layout).
Is it possible to add a line to my CSS like this:
.custom_bg {
background-image:url(http://domain.tld/img.ext);
background-repeat:no-repeat;
background-color:#000;
}
And then on that certain page, call this some how so that the page 'knows' to listen to this line... is that possible?
Any help is appreciated. I'm fairly new to CSS.
Thanks
What you can do is make a class with a background-image(I guess you are already having that), and than use that class on the body element of that page, so for example
.custom_bg {
background: url('URL_HERE');
}
And say you want to change the background of the contact page, you can make your HTML like this
<body class="custom_bg">
Note: Call this class on the element you want to over ride the
background image, here I am assuming that you want to over ride the
background image for the body tag.
This will over ride the default styling, I guess you must be using a general element selector in your stylesheet like
body {
background: url('URL_HERE');
}
So when you define the class, CSS will pick the image from the class thus by over riding the default background image
You could add a class to the body of that single page: <body class="custom_bg">. The rest of the pages will be unaffected by that style.
as well as I understand all you should do is add this class to the tag or any other container like this:
<body class="custom_bg">
...
</body>
Hi If you want to specify background for a particular page only in your application then do
<body class="custom_bg">
...
</body>
while the css will be
.custom_bg
{
background: url('URL_HERE');
}
and if you want the background for all pages then try the following CSS
body {
background: url('URL_HERE');
}
I need to basically set the content of something with HTML from CSS. I'm currently doing the following:
.myclass {
content "<img src=\"hello.png\"/>";
}
However, instead of the image, I see the literal text:
<img src="hello.png"/>
How can I inject arbitrary HTML using CSS?
HTML stores the data, and is the Model
CSS stores the styles, and is the View
JS stores the interactions, and is the Controller
If you're trying to add data to the page, it should be done via HTML. If you're simply trying to add an image as a style, use the background-image property. You don't need to inject an <img> element in the page to do that.
Don't ever do this, ever
As far as being able to inject HTML into the page via CSS, it's not directly possible, however it's possible to add JavaScript into the page using CSS, which can then add HTML to the page.
I can't emphasize enough how wrong that approach would be.
Unless there is some strange hack that I am not aware of, this cannot be done with pure CSS.
The content property is only able to insert text; if you try to put in HTML, it will be escaped.
That said, you can do something like this with pure CSS:
This is the CSS that can perform that effect:
.myClass:before {
display: inline-block;
width: 32px;
height: 32px;
content: "";
background-image: url("img.gif");
}
You can see this in action on this jsFiddle page.
In this particular case, you can use a pseudo-class (eg ::before), background-image, display:block and a fixed width and height to show the image.
Also, make sure that the colon : is added between content and its value.
A relatively new concept at the horizon is the element() value for backgrounds. This will display HTML as if it were an image: See also -moz-element.
This can be done. For example with Firefox
css
#hlinks
{
-moz-binding: url(stackexchange.xml#hlinks);
}
stackexchange.xml
<bindings xmlns="http://www.mozilla.org/xbl"
xmlns:html="http://www.w3.org/1999/xhtml">
<binding id="hlinks">
<content>
<children/>
<html:a href="/privileges">privileges</html:a>
<html:span class="lsep"> | </html:span>
<html:a href="/users/logout">log out</html:a>
</content>
</binding>
</bindings>
ref 1
ref 2
You can't. It's not what it's for. The CSS is for the presentation layer while the HTML is the data layer.
Actually, you can, but just for characters, not HTML. You can use the content property. With some CSS selectors like :before, you can do nice stuff like adding your own character as a bullet for your list. But not much more.
I am using the following code, but it is having no effect!! Can this be done?
html {
background: #d9dbdc url('images/repeat-x.png') repeat-x;
}
This will work if you actually have an image at the specified location, although it's usually applied to the body element. It could be that the body element has a background colour that is covering the image.
Note that paths are relative to the style sheet file, not the HTML file embedding it, so a path pointing to images/repeat-x.png in /css/styles.css would result in /css/images/repeat-x.png.
Yes, it can be done, but it needs to be on the <body> tag.
Your image might not exist, or you might have a different background covering it.
If you are trying to set the background of the entire page I'd recommend:
body {
background: #d9dbdc url('images/repeat-x.png') repeat-x;
}
make sure the url is correct, you can use browser debug tool like Firebug in firefox to inspect the html