How to display SVG images on my site? - html

I have a website with SVG images, but I have a problem. My site is on an Apache server with my host. My images are displayed very well when my site was on my local server but now it is on my host images no longer appear. I controlled the url is correct. I can access with the url directly on the image, but the images are not displayed on my site.
HTML
<span class="logo">Logo</span>
CSS ;
div.main-content-logo h1#header-logo .logo {
background: url("../img/logos/logo-main.svg") no-repeat scroll 0 0 / 260px auto rgba(0, 0, 0, 0);
color: rgba(0, 0, 0, 0);
text-indent: -999px;
}
div.main-content-logo h1#header-logo .logo {
display: block;
height: 78px;
width: 260px;
}
Can you help me?

Have you specified the MIME type in the .htaccess file? see here: http://www.w3.org/services/svg-server/

Sometimes going from local to server changes the folder structure a bit (has happened to me). Try putting the absolute direction to test it
background: url("http://myexampledomain.com/img/logos/logo-main.svg") no-repeat scroll 0 0 / 260px auto rgba(0, 0, 0, 0);

Related

An error occurred while loading the image

I've got an issue with loading an image after hosting in GitHub.
If I run my project on localhost, the issue will not appear. It runs well. But when I run the project by going to the generated link in GitHub, I will get the error.
The project has style.min.css and stlye.css as well.
Inside the file index.html haves a link to style.min.css
My part of code:
.promo {
height: 650px;
padding: 21px 0 93px 0;
background-image: url(/../../img/background_first.jpg);
background-repeat: no-repeat;
background-position: center;
}
If you want to try running the project on your local machine, the link to GitHub (https://github.com/mrfrankyn/mrankyn.github.io).
P.S. I get it, that the problem is with the path of the image, but I tried a lot of other variants of paths.
One of the variant:
url(/img/background_first.jpg)
Thanks!
I found the problem! In this project, there was also style.min.css file and it needed to be edited.
Replace style.min.css with this:
*{font-family:MuseoSansCyrl,sans-serif}.container{max-width:950px;margin:0 auto}.promo{height:650px;padding:21px 0 93px 0;background-image:url(../img/background_first.jpg), url(img/background_first.jpg);background-repeat:no-repeat;background-position:center}.promo__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;text-align:right}.promo__header{text-transform:uppercase;color:#fff;font-weight:700;font-size:42px;line-height:42px;margin-top:90px}.promo__subheader{font-weight:500;color:#fff;font-size:24px;line-height:24px;margin-top:10px;text-transform:uppercase}.promo__icons{width:425px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:64px}.promo__icon{display:block;width:108px;text-align:center;font-weight:500;font-size:14px;line-height:14px;color:#fff}.promo__icon img{display:block;margin:0 auto;margin-bottom:15px}.promo__link{font-weight:500;font-size:16px;margin-top:7px;color:#fff}.promo__link a{color:#fff}.promo__link a:hover{color:#c70101}.header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.header__logo{width:250px}.header__logo img{width:100%}.header__official{font-weight:500;font-size:12px;line-height:12px;color:#fff;text-align:center}.header__official span{display:block;font-size:18px;margin-top:7px}.header__phone{display:block;font-weight:700;font-size:18px;line-height:18px;color:#fff;text-decoration:none}.header__phone:hover{color:#c70101}.header__contact{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.button{margin-top:4px;width:153px;height:32px;background-color:#c70101;border:none;border-radius:5px;font-weight:500;font-size:12px;line-height:19px;color:#fff;text-align:center;text-transform:uppercase}.button_main{width:303px;height:54px;font-size:16px;line-height:25px;margin-top:67px}.button_submit{width:100%;width:303px;height:58px;background:#c70101;font-size:16px;line-height:25px;color:#fff;text-transform:uppercase}.advantages{background-color:#f6f6f6;padding:61px 0 65px 0}.advantages__items{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-pack:distribute;justify-content:space-around;margin-top:30px}.advantages__item{width:250px;text-align:center;margin:0 auto;margin-top:30px}.advantages__subheader{font-weight:700;font-size:18px;line-height:29px;margin-top:35px}.advantages__text{font-weight:300;font-size:14px;line-height:18px;margin-top:20px}.advantages__text a{color:#c70101;font-weight:700}.consultation{min-height:680px;padding:100px 0 92px 0;background-image:url(/../img/), url(/img/bg2.jpg);background-repeat:no-repeat;background-position:center}.consultation__descr{font-size:20px;line-height:30px;font-weight:500;color:#fff;text-align:left}.title{font-weight:700;font-size:30px;line-height:30px;color:#000;text-align:center;text-transform:uppercase}.title_left{text-align:left;font-size:36px;line-height:54px;color:#fff}.feed_form{margin-top:36px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:300px}.feed_form input{height:50px;border-radius:5px;background-color:#fff;margin-bottom:15px;border:none;padding:0 20px;font-weight:300;font-size:14px;color:#4b4b4b}.feed_form input:nth-child{margin-bottom:20px}#media(max-width:1200px){.promo__wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center}}#media(max-width:991px){.header{-ms-flex-pack:distribute;justify-content:space-around}.header__logo img{width:80%}.header__official span{font-size:16px}.header__contact .button{width:130px}.header__phone{font-size:16px}.promo__header{font-size:38px}.promo__subheader{font-size:20px}.promo .button_main{width:260px}.promo__link{font-size:14px}.consultation .title_left{text-align:center}.consultation__descr{text-align:center}.consultation .feed_form{margin:0 auto;margin-top:36px}}#media(max-width:767px){.header__phone{display:none}.header button{display:none}}#media(max-width:575px){.header{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.header__logo{width:200px}.header__official{font-size:10px}.header__official span{font-size:14px}.promo{height:420px;padding:21px 5px 20px 5px}.promo__header{margin-top:70px;font-size:30px}.promo__subheader{margin-top:5px;font-size:16px}.promo__icons{display:none;margin:0}.promo .button_main{font-size:14px;margin-top:47px}.promo .button{width:220px}.title{font-size:26px}.consultation{padding-top:60px}.consultation .title_left{line-height:30px}}#media(max-width:370px){.header__logo{width:100%}.header__logo img{display:block;margin:0 auto;width:160px}.header__official{display:none}.promo{padding:21px 8px 25px 8px}.promo__header{font-size:26px}.promo__subheader{font-size:14px}.promo .button_main{margin-top:35px}.title{font-size:22px}}
Try this code:
.promo {
height: 650px;
padding: 21px 0 93px 0;
background-image: url(../img/background_first.jpg);
background-repeat: no-repeat;
background-position: center;
}

CSS - background-image is showing up on my machine, but not on the hosted version of my site... why?

For my portfolio site, I had a gif for my background image. It was fine for a few weeks, but now it has stopped working. I tried putting in a different GIF. It looks fine on my local machine, but when pushed up to my host, it no longer works. Not sure what the problem is for it to show up on my computer but not when it's hosted.
When it's working properly on my machine - see the triangles?
When it's not working on the actual website
The site is hosted at http://www.KimberlyScarabello.com.
I'm fairly certain I'm updating the files correctly, because other changes are showing up just fine. This is the CSS that I'm using. I have already tried saving the gifs to my local machine and putting the file path in the url, but that didn't work (though it also works on my machine).
#wrapper > .bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #212931;
background-image: url('https://media.giphy.com/media/xTg8BbPcaAP43oVyeY/giphy.gif'), linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
background-size: cover, auto, 100% auto;
background-position: center, center, top center;
background-repeat: repeat, no-repeat, no-repeat;
background-attachment: scroll, scroll, scroll;
z-index: -1;
filter: brightness(10%)
}
It's working fine for me.
This will most likely be caused by your cache. Whenever you have issues like this, just hard reload your site using ctr+f5 (cmd+shift+r for mac I think?). Let me know if that doesn't work for you.

Will background image affect site loading speed

On my index page, I have a background image which is added to the div dynamically by some javascript.The inline style added is the following.
element.style {
background: rgba(0, 0, 0, 0)
url("http://www.myshop.com/wp-content/themes/mytheme/images/media/bg-footer.jpg")
no-repeat scroll 50% -287.5px;
}
I have changed that background image using the following class
.footer-bg{
background: rgba(0, 0, 0, 0)
url("http://www.myshop.com/wp-content/uploads/2014/01/blue-living-room.jpg")
no-repeat scroll 50% -59.5px !important;
margin-top: 20px;
}
I have used !important for overriding the background style loaded by the javascript and it worked.After changing this site is bit slower than earlier.My doubt here is that Will the site load both style or will it completely ignore the first one?
If the site loads both styles and apply the one with !important then it needs some loading time right?
Do these style overriding directly affects site loading speed.Please guide me.
Thanks
If that background add on the same class (.footer-bg) then you can override with below method-
.footer-bg [style]{
background: rgba(0, 0, 0, 0) url("http://www.myshop.com/wp-content/uploads/2014/01/blue-living-room.jpg") !important;
}
Hope it will helps you.

Locating color code for template menu buttons?

I am fairly new to HTML/CSS but I think I am getting a basic hang of things. I understand more and more but need a little assistance with a template I am playing around with.
The template is Dragonfruit from TemplateTemo and can been seen here: http://www.templatemo.com/preview/templatemo_411_dragonfruit
I've been playing around in the HTML and CSS files but I cannot find the code for changing the two colours on the top menu bar buttons. (The two colours on the Home, About etc. buttons)
I would really appriciate if someone could take two minutes and download the template files and tell me where to look or how things work.
Any help is surely welcome!
Thanks a lot,
Brian
You need too inspect the template.
The menu uses a background image:
.glossymenu {
background: url("/images/menub_bg.gif") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
height: 46px;
list-style: outside none none;
margin: 0 auto;
padding: 0 0 0 34px;
position: relative;
}
On the menu hover you have a image too:
.glossymenu li a:hover, .glossymenu li.current a {
background: url("/images/menub_hover_left.gif") no-repeat scroll left center rgba(0, 0, 0, 0);
color: #fff;
}
The header use a background image too:
#top_section {
background: url("/images/templatemo-header-6.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
height: 116px;
}
You can change the rule background to colors:
background: #cccccc;

html background image appears correct on desktop browser, not on mobile

I have background images for fixed position menu items.
They appear correct on a desktop browser, but they become stretched and only show the center portion of the image when displayed on a mobile browser, and the image appears to be approx 4x original size.
I've attempted setting background-size:cover cover !important; to force the size to fill the container, but that has also had no effect.
I know there are issues with using fixed positioning and the viewport on mobile, but I've tried setting the elements to relative positioning with no effect.
HTML:
head:
<meta name="viewport" content="user-scalable=no, initial-scale=1.0" />
menu:
<ul id="shortcuts" role="complementary" class="children-tooltip tooltip-right lulus">
<li class="current">Home</li>
<li>Events</li>
</ul>
css:
#shortcuts {
display: none;
position: fixed;
z-index: 998;
top: 44px;
left: 10px;
margin: 0;
width: 240px;
list-style-type: none;
padding: 15px 4px 5px 14px;
*padding-bottom: 25px;
border: 1px solid white;
background: #d9d9d9 url(../img/old-browsers/style/bg_shortcuts.png) repeat-x;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
background: -webkit-gradient(linear, left top, left bottom, from(white), to(#d9d9d9));
background: -webkit-linear-gradient( white, #d9d9d9 );
background: -moz-linear-gradient( white, #d9d9d9 );
background: -ms-linear-gradient( white, #d9d9d9 );
background: -o-linear-gradient( white, #d9d9d9 );
background: linear-gradient( white, #d9d9d9 );
-webkit-background-clip: padding-box;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 1px 7px rgba(0, 0, 0, 0.8);
box-shadow: 0 1px 7px rgba(0, 0, 0, 0.8);
}
#shortcuts > li {
width: 70px;
height: 70px;
float: left;
margin: -5px 10px 25px 0;
}
.shortcut-dashboard { margin-left:0px !important; /*padding-bottom:65px; width:70px !important;*/ background-image: url(../img/standard/icons/Home_Icon.png) !important; background-position:center center !important; background-size:cover cover !important; }
.shortcut-agenda { margin-left:0px !important; /*padding-bottom:65px; width:70px !important;*/ background-image: url(../img/standard/icons/Calendar_Icon.png) !important; background-position:center center !important; }
I can't figure out why the background image is getting stretched and only on mobile browsers. This is the only place my background images are behaving badly. Any help would be nice... I'm not opposed to corporal punishment on these misbehaving children!
Quoting from "The Definitive Guide To HTML/XHTML 6th Edition":
"HTML and XHTML documents can wind up in the strangest places these days, such
as on cellular phones. To help the browser figure out the best way to render your documents,
include the media attribute within the tag. The value of this attribute is
the document’s intended medium, although it doesn’t preclude rendering by other
media. The default value is screen (computer display). Other values include tty (text
only), tv (television), projection (theaters), handheld (PDAs and cell phones), print
(ink on paper), braille (tactile devices), embossed (Braille printers), aural (audio;
speech synthesis, for instance), and all (many different types of media).
If you want to explicitly list several types of media, instead of specifying all, use a
quote-enclosed, comma-separated list of media types as the value of the media
attribute. For example:
tells the browser that your document contains CSS both for printing and for computer
displays.
Be careful specifying media, because the browser cannot apply the styles you define
unless the document is being rendered on one of your specified media. Thus, the
browser would not apply our example set of styles designed for media="screen,print"
if the user is, for instance, connected to the Web with a handheld computer.
How do you create different style definitions for different media without creating
multiple copies of your document? The CSS2 standard lets you define media-specific
stylesheets through its extension to the #import at-rule and through the #media atrule,
which we describe in section 8.1.5 later in this chapter."
PS, try to make your code more relative: instead of using 'px', specify the value in percentage.
My bad on this one, folks. I had a CSS file that was overriding the background-size to a predetermined pixel size. I removed this property from the CSS file and all is well.
On a side note, does anyone know of any apps or plugins that allow me to view the CSS of a page from a mobile browser? Something similar to built in desktop browsers' developer toolbar? This would have saved me a lot of headache...