iPhone devices look best when you give an image that is twice the size of the actual pixels needed. When you use contain it will make the image look crisp and nice.
I made a background image for a control with 2 states. On & Off. To be efficient instead of making two separate images I made a file where all I had to do was change the background-position-x property when I clicked on the control to change the image.
This works, except... that contain will show the entire background image with both 'on & off' states.
Right now I'm using 2 different images to make the control change the image.
Is there a way to 'contain' the image but only to a portion of the source image files pixels? This way I could make it look nice but use 1 file instead of 2?
Or does this even matter for efficiency?
For background image sprites (that's what you call numerous images pieces in one file) I prefer to use elements like and position and size them so they're the exact size of the sprite piece I want to show.
So let's say you have a that needs a hover effect or anything that might need to images to swap in and out. The easiest thing to do is to add a inside the image so your basic html would be:
<a href="#><span></span></a>
Then you size the and add position:relative;
Then on your span set the height and width to 100% and add position:absolute; top:0; left:0; and apply your background image to the span.
Then you can do things like a:hover span { background: 0 10px; } etc etc.
Related
I'm having a little problem with one of my background images in a div element. I'm using the following CSS:
.myBox
{
background-image:url('....');
background-repeat:no-repeat;
background-size:cover;
}
My background image is a picture with some people on it. Now, if I increase the width of my browser window, at a specific point, some of the people are cutted off (due to the automatic resize of the image with 'background-size:cover').
My question is: Is there any option (or jQuery plugin), to set a specific part on the background image that will be always visible on all window sizes and also fill the whole element?
There are a variety of solutions you could try; however, you might want to start with something simple like applying a background-position.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
Using the background image of the group of people as an example, you might set background-position: top so that their heads never get cut off. You can also set the vertical and horizontal position in pixel or percent units.
try boostrap3 img-responsive class
.img-responsive Makes an image responsive (will scale nicely to the
parent element)
http://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp
I want to set a prefereble image as the background for my website.
Now, an image file always comes with a fixed pixel or size. Lets say that my chosen image is 960x960 px.
But my web page may have different size, may be the size is 3 times bigger than the image.
If I set that image as background, then normally it will repeat (I know how to stop it, but that's not what I want). When it gets repeated, it will make a stripe or a shadow type line at that point where they join with each other. That means, at the image joining point, it makes a separate border (I hope you know what I mean) what looks bad and an user doesn't like it.
How to avoid that?
How can I set a background image as only a single image so that it's not clearly visible that many images are joint on the background.
As an example this is my background image:
background-image:url(img/backgr.gif);
Two possibilities:
Use a graphic program to edit your image so it becomes seamless. Look here: http://www.youtube.com/watch?v=NARVupW2ads
Use background-size:cover; to enlarge the background image so it automatically covers the whole screen.
After the background-image line have this line:
background-repeat: no-repeat;
One Pic
How can the website use one image and use its parts as backgrounds for different elements , How can this be achieved.
They simply use different background positions to specify which image on the sprite sheet/picture they are using. For example inspect the element of the ufo image you have highlighted above. And change the css background position to -390px then the above and below images will become the same as positive specified will be same.
This is done to reduce the load on the server since now only one Image is loaded - the main picture instead of 10 different ones.
See this jsFiddle here i have used this image and just using different background position for each img's css code. Please ask if you need further clarification.
You can set this background for any span you want. Rest to do is to cut the right part out.
Let's say you have one class for the image, it's:
.sp {
background-image: url(your/picture.png);
}
You apply this class to all spans that need the picture.
Then you cut out single pics from it:
.sp.button1 {
background-position: 20px 50px;
height: 28px;
width: 50px
}
(random nubmers)
You can specifiy you first pic with class="sp button1" then.
http://jsfiddle.net/LFtHg/
I'm trying to create my first responsive website. For this, I'm including an image. This image has a caption which should be displayed in a transparent overlay. However because opacity settings are passed to child elements, I have removed the text from the container.
I cant get the overlay to display, at all (because it has no content inside it). I cant really add a fixed height as I want to image to respond to changes in browser size. How can I ensure this is displayed?
Thank you,
J
Edit, also what would the best way to scale the overlay as the browser resizes. I'm unsure if this approach is even possible.
First of all, you can use an RGBA background ( background: rgba(0,0,0,.5); ) instead of using opacity.
Secondly, you need explicitly set a width for your span.figcaption (you can also do that by specifying both left and right offset properties)
Perhaps this demo http://dabblet.com/gist/2778608 might also help you (image can be of any size - resize the browser window to see how everything resizes).
Adding the following rules to your existing sample effectively stretches the .figcaption elements to fully cover the .figure, fiddle:
.figure {position:relative;}
/*these could be different so that the overlay appears larger than the caption*/
span.figcaption {position:absolute;top:0;right:0;bottom:0;left:0;}
p.figcaption {position:absolute;top:0;right:0;bottom:0;left:0;}
You can arbitrarily adjust the values to a % setting so that the caption appears centered etc.
BTW, you know that your implementation is not yet liquid, right?
I have a link that will consist on of 1 image and nothing else. I also need this image to highlight when user hovers over it. I was thinking: use <a> tag and set its height, width and background-image properties in CSS. However, (and I've had a feeling it might do that) the <a> tag's size when rendered in browser is 0x0. I can include a couple of characters between the link tag (and the image shows up ok) but it feels a bit hacky. I was also thinking to use the old trick of 1px transparent image set to the correct size - but this also seems less than correct way of doing it. I also can do the same thing with jQuery (but this seems like trying to kill a fly with a sledge hammer).
Is there an alternative pure CSS/HTML way of achieving this?
Set it to display:block;, by default a tags are set to display inline. You can then set width and height.
By changing the background-position on hover, or changing the background-image, you can do the rollover.
And for the background image, you should use a sprite map. This means make one large image that consists of each image you want to display and only showing part of it as the background. This is really good to do because it pre-loads the hovered image so there is no lag for the user. I also find that it organizes my image directories a bit (instead of having an on/off image for every button I just have one image)