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"
Related
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.
On the homepage of my developing ecommerce store just below the carousel, there is an image under the H1 "I Wish I Were Knitting..." that has a paragraph sort of wrapped to it.
I have applied a float class to the img tag which is located within the p tag. I have one line of text floating correctly by removing the bootstrap img-responsive class from the img tag.
Why won't the full paragraph wrap? I would put markup and CSS in this text here but because this code in question is part of a huge .asp system, I wonder if folks would please check out the markup and CSS with the Inspect Element on the page itself where you can see the other code and CSS around it.
I see you added class="floatleft" but you need to add the css float: left;. Tested using Chrome Dev Tools and it works :).
You can always add the class to your css using the following :
.floatleft {
float: left;
}
Then you will only need to change the CSS and not your HTML. Good luck!
I found my main error. It's an understandable error given the state of my development. Turns out I was editing the wrong css file. When I put my css in the correct file, everything worked. I'll examine your kind ideas and observations with appreciation. Yes, padding will help.
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 have placed images on wordpress page templates without any inline style attribute but its seem wordpress automatically add style tag with width and height set to zero.
<img src="wp-content/themes/ecoblog/images/hiw-image-1.png" style="width: 0px; height: 0px;">
Sometimes height is set to its original dimentsions and sometimes after complete refresh its values are zero.
What is causing this?
Please help me out. Thanks in advance.
Maybe it is caused by incorrect CSS. Zero values should not have dimensions, like px or pt. Like this:
<img src="wp-content/themes/ecoblog/images/hiw-image-1.png" style="width:0; height:0;">
this is because of template CSS styles are override your image style properties ..,the easy way is to wrap your image content and give div id and put your style code in template CCS file
inside(style.css)
it works as:
.class{
width:20px !important;
height:20px !important;
}
or if you want to remove Inline CSS completely , This inline css may be in .php files or in.js files.
You can search style in whole project , it is easier to search if you are using netbeans code editor.
Hope it may resolve.
I'm struggling with a property that is defined in 3 stylesheets:
Joomla.css
My Site's Template.css
Content extension using K2.css
The problem is that I need to align a toolbar to the right. The property text-align is correctly defined in the K2.css but is ignored and rather the one in the joomla.css is loaded.
I attached a screen shot that shows the issue.
Any idea what am i doing wrong and how could I override this property just for one container?
Thanks in advance.
Eyal
For such special cases I used to define an style with !important and use it where ever I have to override.
CSS
.text-align_right {
text-align: right !important;
}
HTML
<div class="itemToolbar text-align_right">
..
Also, if you view the source of the page, you'll see the order in which the style sheets get added. Evidently joomla.css is further down the source than k2.css
If there are a large number of these cases, you might like to edit your template html and put joomla.css right at the start of the head section. If that is added dynamically, though, look at the nonumber extension 'Rereplacer' which should be able to switch the order around with a bit of work.
Add your css rule to the bottom of K2.css
When you create the menu in your module manager, assign it a class. Then you can set the style for that class in your template.css file.
Best,
Cynthia