How to add background in Drupal 8 views-view-fields.html.twig' files.
I try like this but it's don't work. Using views I just output image paht.
<div class="cover-img" style="background:url('{{ field_image_1 }}');">
</div>
Thank you
you are best to do that in your css file by doing this:
.cover-img { background: url('/sites/all/themes/....); }
if you have to put it in your twig file, first make sure its even outputting the correct img url by putting that field_image_1 into an empty div element.
Related
I am trying to display a specific background image on a div in style or class by using Tailwind CSS but the image in not appearing. I cannot put it as a image since i want it to repeat throughout the div.
`
<div style="background-image: url('/wave.svg');" class="block bg-repeat-x bg-contain bg-center" >
**code**
</div>
`
I have tried to put the url as "../public.wave.svg" but the terminal outputs:
files in the public directory are served at the root path.
Instead of /public/wave.svg, use /wave.svg.
I have also tried it within a class in the div but cannot seem to find the problem to why my image is not showing up. When i put it as a img src it appears but i cannot manipulate it like that.
if you want to find here that simple real problem...
first go tailwind 'output.css' and add here a standart css class like '.addtest{}' with include your background.svg !
add it to your div, and is it works ?
is it don't work ? (find your real problem..)
ok, is it solved for standart css ?
now go and and take that css to your inner tailwind css or direct inline-css to html with 'style'.
are you try "./folder/image.svg"
not "../folder/image.svg"
not "/folder/image.svg"
I have attached the link to the site files(zip), I just want to attach the css to the html so that I will not have a call for a file that wastes my time and slows the site down. Thanks in advance!
You have a broken css style syntax at this line( #370)
input[type='checkbox']:checked{
....
background-image: url(...)
}
Here i see a nested style tag which is causing the problem, where an svg file using as background contains a style tag.
All error is in the code:
background-image: url('data:image/svg+xml .................
There are three of them, remove them from your code then it will work.
Download the index.html file code: https://send.firefox.com/download/db2db4d53aa9f186/#yK1lwyKPBiwOrPwt73fzwQ
i have little issue with repeating background image using bootstrap framework, but i'm quite beginner. I tried many ways already and nothing works.
Can u help me with that please ? I've tried for example that :
<style>
html, body {
background: url("img/bg-pattern.png") repeat;}
</style>
Your path is probably incorrect. As far as I can see, bootstrap has a different folder structure than what your code suggests. Try this:
body {
margin: 0;
background: url("../img/bg-pattern.png") repeat;
}
I'm unable to reproduce your issue on JSFiddle. For this reason I can only presume your image path is invalid.
In specifying img/bg-pattern.png, you're pointing to the bg-pattern.png file contained within the img folder contained within the same folder as your CSS. This assumes a folder structure of:
img
myHtml.html // Where your style element is included
Make sure your "img/bg-pattern.png" is present in the same folder where your file is present
else give the absolute path of the image.
Try using FireBug, maybe you'll see that the <body> tag is much smaller ( in height ) than you think.
I've moved my background: ... from the <body> tag to the actual <div> that contains the entire content ( which grow dynamically vs the <body> ) and the background is repeatable there ...
So I am working on a website and I'm trying to set the background of empty div with a set size and I can't figure out why it isn't working. Anyone see something I don't? Thanks, Tim.
Code:
.headerbg{
width:100%;
background-image:url('bg.jpg');
height:500px;
margin-bottom:25px;
}
<div class="headerbg">
</div>
To prevent such errors, you should define your urls relative to the document root. For instance, if your image is at http://example.com/path/to/image.jpg then you should use url('/path/to/image.jpg'). This removes any possible ambiguity.
There is nothing wrong with your code, when I try it with a different image, it works fine:
background-image:url('http://placekitten.com/100/100');
http://jsfiddle.net/Guffa/bWKBB/
So, the reason for the problem is that the browser can't find the image. There can be several reasons for that, like:
The image doesn't exist
The image exists in a different folder
If you have the CSS code in a style tag in the page, the URL for the image is relative to the location of the page. If you have the CSS code in a style sheet, the URL for the image is relative to the location of the style sheet file.
I create CHM help file.
For decorate it I use css and option 'background'.
All my images saved in img.
My css setting for header like this:
.data{
width:100%;
height:80px;
display:inline-block;
background:#fff url(/img/bg_fill.png) repeat-x;
}
HTML code:
<div class="data">Hello world</div>
In HTML everything is OK, but when I make CHM file background does not have background.
Why? Maybe path is wrong? Somebody have simular problem?
That's problem with the img path. I suspect img folder is in the same directory where your css and html files are located. If so, try to remove first slash in image url: url(img/...
Well, I resolve my problem in my self.
During in experement I saw next sequence, when I add image in tag img and ny header is show.
I think whem CHM maked program does't add image into CHM file and all path is wrong. When I add images in div which hide - all resources is add and show my header.
Just simple solution is we just need to provide full path like where the image is located like C:\Documents and Settings\User\Desktop\Images...