Image shows fine on Chrome OS X. I also have another SVG (background-image) which is showing, but this one isn't on iOS.
I've read that there are limits for images on iOS devices, but this isn't a particularly big image. Here are the contents of the SVG, exported from Illustrator. Apache seems to be serving the correct content-type: svg+xml.
I've created a pen here – http://codepen.io/anon/pen/GJJWbN
<h1>Logo</h1>
h1 a {
background: url('http://bogglo-beta.liprock.com/img/logo.svg') 0 0 no-repeat;
/* background-size: contain; */
border: solid 1px tomato;
display: inline-block;
height: 58px;
text-indent: -9999px;
width: 180px;
}
Here's a screenshot with the image not showing:
Has anyone experienced this before?
Related
I have a little navigation menu in Wordpress with social media icons. However, for some reason I can't get them to show on a Mac with Safari - while in chrome/ firefox on windows and Safari on Iphones it works fine.
I inspected on the Mac and saw in below example, the ":before" is present in the html and both the png and svg can be viewed.
ul li a[href*="instagram.com"]:before {
content: "";
speak: none;
padding-right: 10px;
display: block;
width: 25px;
height: 25px;
background-image: url(svg/instagram.png);
background-image: url(svg/instagram.svg), linear-gradient(transparent, transparent);
visibility: visible;
background-size: contain;
position: absolute;
bottom:0px;}
I'm a little lost what to look for. Anyone an idea?
Giving that code:
.avatar {
font-size: 40px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 2em;
height: 2em;
border: .15em solid red;
border-radius: 50%;
overflow: hidden;
}
.avatar>img {
object-fit: cover;
width: 100%;
height: 100%;
}
<div class="avatar">
<img src="https://thispersondoesnotexist.com/image" alt="avatar">
</div>
resulting avatar have pixels of parent element between border and own background.
They're better visible in smaller sizes (and zoom levels), but they also exist in higher zoom.
And here in firefox:
I think it's a bug, but I tested it on multiple browsers (chrome, chrome mobile, Samsung internet browser, Firefox) and in every there was some kind of this behavior.
I've tried setting background to border color, but this only image it's not the best solution, because image is still distorted.
Setting image as background helps in chrome, but only if there is no <img> selector, and I need it, to don't have accessibility issues.
You know how to repair this? Or where to find bug ticket for this?
I have a problem with background of an element in my website. On PC browser, this element is looking that:
but on mobile phone, this element is looking that:
Why this icon "X" can't be display on mobile phones? Here is my CSS code:
.select2-search-choice-close {
display: block;
position: absolute;
right: 3px;
top: 4px;
width: 12px;
height: 13px;
font-size: 1px;
background-repeat: no-repeat;
background-image: url('http://mysite.pl/templates/default/panel/img/select2.png');
background-position: right top;
outline: none;
}
Can anyone help me? Thanks.
EDIT:
The problem is with this layout: https://wrappixel.com/demos/free-admin-templates/maruti-admin/form-common.html
On mobile there is another style overriding the background image as you can see in this screenshot :
As you can see it's on the line 475 of your file, so simply edit/remove it.
A bit of a strange one. The background image (or even when I add a color) to the header on the website, that contains the menu items will not be displayed in IE8. It seems to work on Chrome and Firefox however in IE8 it does not display. The Url is http://www.esfdev.co.uk/emmanuel/ any help will be greatly appreciated.
CSS is below.
div#header {
background-image: url("./images/headerBg.png") !important;
background-position: center bottom;
background-repeat: repeat;
height: 93px;
position: fixed;
width: 100%;
z-index: 10 !important;
}
Thanks
I am in the process of designing a web page and I'm using the following CSS to create the page header with the main header image centered in a 1000px width page, and for a repeating edge image going across the top of the body and underneath the header to spread across the whole browser page width.
body {
font-family: Tahoma;
background-color: #0184AE;
background-image: url('/images/headeredge.jpg');
background-repeat: repeat-x;
background-position: top;
margin: 0;
position: relative;
}
.whole-page {
width: 1000px;
margin: auto;
padding: 0;
text-align: left;
position: relative;
border-radius: 0 0 15px 15px;
}
.header {
width: 100%;
height: 120px;
color: white;
background-image: url('/images/header.jpg');
background-repeat: no-repeat;
font-size: 10pt;
margin-top: 0px;
margin-bottom: 0;
padding-top: 10px;
border: 1px black none;
position: relative;
}
The CSS above works, except when a toolbar appears. I'm using Chrome with a SEO toolbar and it displaces the centered header image correctly, it pushes it down underneath the toolbar so I can see the whole image.
However, the repeated body image is not displaced at all and the toolbar covers the top so many pixels. This puts the whole thing out of whack.
I've tried a few options in the CSS, but so far nothing seems to work. I'm guessing here, but I think the toolbar draws itself using CSS that 'exists' under the body tag.
Can anyone suggest anything, I'd like either the whole header pushed down, or not. Just so it's consistent.
Using the Chrome developer tools (hit f12) you can inspect (click the magnifying glass icon on the bottom) the toolbar element. Doing this you can see that it is indeed inserted to the body of document. This will unfortunately result in the actual behavior you are seeing. In other words, this is not your fault but the fault of the toolbar developers.
One (ugly) work around is to throw an additional div around your content and apply the background to that.
E.G.
HTML
<body>
<div id="notBody">
<!--Rest of your headers, content, etc here -->
</div>
</body>
CSS
body {
font-family: Tahoma;
background-color: #0184AE;
margin: 0;
position: relative;
}
#notBody {
background-image: url('/images/headeredge.jpg');
background-repeat: repeat-x;
background-position: top;
}
in your header class change to position: absolute; and use top to set how many pixels you want your header to be from the top of the page.
.header {
position: absolute;
/* all your other styles */
top: 200px;
}