I set a background image URL in CSS file to another site as below:
body.teaching {
background: url("http://sample.com/beijing.png") no-repeat no-repeat;
background-size: 100% 100%;
}
After I deploy to the server (e.g. www.foo.com), the URL changed like below (404 error):
http://www.foo.com/css/http:/sample.com/beijing.png
I think it is caused by CssRewriteUrlTransform, so my question is:
What is the correct way to set the image URL to another site? I don't want to disable CssRewriteUrlTransform, because many other image URLs need to be transformed.
I extract the background url to another css and without applying CssRewriteUrlTransform, it works now
Related
https://codepen.io/leftynaut/pen/PKwEqz
Any idea what I am doing wrong with my svg background image here to make them not show up on IE11?
(jQuery acting up on IE also, but my actual implementation with Angular is working fine)
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'><path fill='#000000' d='M192,32 C103.75,32 32,103.75 32,192 C32,280.25 103.75,352 192,352 C280.25,352 352,280.25 352,192 C352,103.75 280.25,32 192,32 Z M384,192 C384,298 298,384 192,384 C86,384 0,298 0,192 C0,86 86,0 192,0 L192,0 C298,0 384,86 384,192 Z'></path></svg>") no-repeat center;
I recently discovered that Internet Explorer is a bit picky with the format of the URL in background-image property. Specifically, you need to specify the charset differently and URL encode the SVG part:
background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20400%20400%27%3E%3Cpath%20fill%3D%27%23000000%27%20d%3D%27M192%2C32%20C103.75%2C32%2032%2C103.75%2032%2C192%20C32%2C280.25%20103.75%2C352%20192%2C352%20C280.25%2C352%20352%2C280.25%20352%2C192%20C352%2C103.75%20280.25%2C32%20192%2C32%20Z%20M384%2C192%20C384%2C298%20298%2C384%20192%2C384%20C86%2C384%200%2C298%200%2C192%20C0%2C86%2086%2C0%20192%2C0%20L192%2C0%20C298%2C0%20384%2C86%20384%2C192%20Z%27%3E%3C%2Fpath%3E%3C%2Fsvg%3E") no-repeat center;
For the record, the full URL encoding is probably overkill. You really only need to do the < and > but I'm just being lazy and using a URL encoder instead of editing your code directly.
It is discussed in greater detail over in this question:
CSS: Using raw svg in the URL parameter of a background-image in IE
This CodePen shows the differences between implementations of inline SVG with the different charset, URL encode and Base64 encode: https://codepen.io/chriscoyier/pen/zEJtC
I am trying to specify a backgroud image for my google site, i have the following code inside the HTML Box
body {
background: #372412;
background-image:url('a/mysite/my/home/body.jpg');
background-repeat:repeat-x;
margin: 0;
padding: 0;
font-size: 13px;
color: #FFFFFF;
}
i tried different options but the HTML Box Properties page just reports an error and i cannot get the image into my page.
i have one more image loaded using
<img src="/a/mysite/my/home/img11.jpg"
this image is shown properly so i suppose that the link is referring correctly.
can someone give me some direction to solve the above issue
I don't think you can change the background in Google Sites like this. The HTML Box is sanitized, and this CSS will probably go away.
Instead, use More -> Manage Site, then choose Themes, Colors & Fonts, and specify the background you wish to use.
Hi in Drupal 7 I am using autocomplete search. In search input it displays part of ajax loader animation all the time even when the input is not focused. Bug is marked with red square .
Any suggestions please why there is this bug. (I am using boostrap theme)
Thank you for help.
It's not a twitter bootstrap error.
See your drupal installation's misc/throbber.gif file. You will see that it's actually a sprite and when the ajax request is in progress, it changes its position to show the animated throbber.
You will need to create a new one and adjust CSS accordingly to workaround this issue. Your text field has a relatively higher length than this sprite's
Add the following CSS to your theme's css file. These styles are defined already, so you will only need to override them. See inline comments.
html.js input.form-autocomplete {
background-image: url("/misc/throbber.gif"); // Enter a new thribber image here.
background-position: 100% 2px;
background-repeat: no-repeat;
}
html.js input.throbbing {
background-position: 100% -18px; // Adjust this -18px to the height of your new throbber.
}
All,
Simple question: I want to include an image "logo.png" as the background for my-app. Where should I put the file and how should I refer to it in the CSS file which is in the resources folder along with the main_page.js?
Here is the rest of the story:
I have a CSS class called doc-background. I know this class works because when I set the color of the background in a CSS file like so:
.doc-background { background-color: red} it has the desired effect and Firebug shows me that the class doc-background is being used.
However, when I add a line like
.doc-background { background-image: url('logo.png'); }, there is no effect. Firebug shows that the class doc-background is not applied. And when I modify the style in Firebug to add the line about the background-image it says "Failed to load URL" in the tooltip.
Can someone please point me to a guide on how to work with resources and images and where to put them if I want to use CSS? I have successfully used them using the image-view and coding them into the HTML.
Here is what I have already tried:
Using static-url instead
Moving the image file to images folder under resources
Referred to the image by using all variations on the path - including resources/images only including images, not including either...
Lot of Googling for the answer, Reading create your own app tutorials etc.
If you have an example app that uses colors and images from a CSS that will be the ultimate! But a location and some help with the background-image CSS property will get me started!
Thanks much,
Vis
Place your image somewhere relative to your css:
resources/style.css
resources/images/logo.png
Then use static_url to refer to the image:
background-image: static_url('images/logo.png');
just successfully imported a db from a real website to my local website.
the problem is, the localhost/mysite doesn't display the template. i'm thinking it might be a problem of the URL while importing.
The settings in the configuration are also correct.
Now in my CSS
if i want to point it locally, is this correct: or do I have to eliminate the C:/ ?
Appreciate for your help
.product #header {
background: url('c:/xampp/htdocs/mysite/assets/templates/mysite/css/images/header_.jpg') no-repeat left;
}
Is this the correct way to write the path locally?
Thanks
Ideally any paths to images should be relative, so that when moved the site will still work correctly.
You should be using something like
.product #header {
background: url('/assets/templates/mysite/css/images/header_.jpg') no-repeat left;}
I don't think you can even reference a file the way you are doing. Maybe if you had url('file://C:....') but I can't see a good reason for it.