I have created a web page where on click of a button some divs are added to a table, for styling I have given background image url to div, its working on all browsers but going to iPad background image of newly created div is not showing up.
It seems that those images are not loading, Any Idea how to solve this issue?
here is my css:
.emailReply div {
background: url(/images/coach/icons/reply-email-icon.png) no-repeat;
background-size: 100% 100%;
background-position: center;
width: 35px;
height: 35px;
display: inline-block;
}
Related
I'm using css sprite and currently this is how it looks like Icon is part of sprite
It stays fine but when i start changing the zoom of the browser nearby image starts to bleed in the image
Adjacent logo bleeding in
I tried increasing the padding by 100px as well but it is not a correct solution.
I need to ensure the sprite image stays in correct aspect and doesn't bleeds as the page is
zoomed.
I tried using a div wrapper but in this case it is not wroking.
here's the code
.icon {
width: 512px;; height: 512px;;
background-size: auto 70%;
height: 70%;
background-position: center center;
cursor: pointer;
background-size: cover !important;
background-repeat-x: no-repeat;
/*zoom: 0.049;*/
background: url("../resources/images/css_sprites_ico.png") 1px -3657px;
}
and the code where this is implemented is this
{name:'setup',index:'setup',label:'Setup',width:80,align:"center",search:false,sortable:false,cellattr: function(rowId, cellValue, rawObject, cm, rdata) {
var classes = "icon";
I want to have something like facebook cover, I came across this jsfiddle in this community.
.cover { width: 100%; height: 180px; overflow: hidden; background-color: black; }
.cover > img { position: relative; width: 100%; top: 50%; margin-top: -50%; }
But there is a problem when I see the cover image in the responsive mode the image re-adjusts itself! i.e in desktop mode in the bycycle driver's head does not show, but in other small device modes the driver's head is visible.
Question:
How can I make a constant & responsive cover image like facebook?
P.S: Please note that the user will modify the cover image view point just like what facebook does!
You can try using a background-image instead, so you can set:
background-size: cover;
background-position: center;
This would stretch the image to fill the entire element without losing ratio.
See the Updated Fiddle
I am trying to display a background image behind the navigation link, but it is not displayed completely this is the code:
#aboutlink{
background-image: url(sidebar.png);
background-repeat: no-repeat;
background-position: left;
background-color: transparent;
display: block;
margin-bottom: 160px;
text-align: left;
}
Set the width and height of the navigation link, otherwise the image will be cut off and won't display fully
Set width and height to match the size of the background image. The reason the image is being "cut off" is because the background image isn't taken into account as it automatically calculates the width and height to only be as big as it needs to be.
How do you get the main image to only scale/ shrink horizontally like the pics on this website? Instead of scaling the image it starts to cut out the image's sides when you resize the browser. Heres how it should work: http://castus.co.uk/
The main image on the castus.co.uk website stays at the same height no matter how small you resize the browser but it shrinks the image's sides.. I hope that explains it better :)
I can only seem to get the whole image to scale when I resize the browser.
I am currently using the following code for my img class:
img.mail {
width: 100%;
height: auto;
}
Or do you mean this?
background-position: center;
background-image: url('....');
background-repeat: none;
width: 100%;
height: 100px;
It cut instead of scale like what you have posted.
NOTE: You need to have wide picture to make it work prettily
I use:
max-width: 100%;
height: auto;
They are using a centred background image and allowing the containing element to shrink thus hiding the sides of the image.
e.g.
#feature {
background: url("path/to/img") center 0px no-repeat;
width: 100%;
height: 50px; // Height of image
}
example: http://jsfiddle.net/xY9qT/1/
I have a website which I've been working on and in firefox, the div at the top of the page is not showing for some reason, but it does in Chrome!
The div in question is
<div id="top-header"></div>
#top-header {
background-image: url(assets/images/theme/bg-top.jpg);
background-position: left top;
background-repeat: repeat-x;
height: 20px;
}
It has a background image and a set height and is within a container div. It seems like there is a float issue? But I have tried clearing it.
Any help is appreciated!
Your html element has a margin-top: -40px; which pulls it out of view since the #top-header is only 20px tall.