Look at the image below
I'm developing the pagination. As per image above the pagination contents, the page number should be surrounded by the the fancy border, such border is not possible through css borderproperty. I have to use image for this, but the problem is if I use a fixed size background image then as when number of pages increases they will be displayed outside that background image.
How do I go so that background image should also increase with the number of pages.
I hope this make sense.
You have 2 options - doing it with border-radius or using a background-image.
If you gonna use border-radius (note it is not supported in IE8 and older):
.pager-container {border-radius:5px 0 5px 0;border:1px solid #ccc;}
If you use background-image you first need to create a sprite for your background (the one below will extend up to 800px).
Now that you have your sprite you will need to wrap your paging in 2 wrappers and apply the sprite image to both and just move it with background-position to put it in place:
<div class="pager-container">
<div class="pager-container-inner">
<a>1></a>
</div>
</div>
.pager-container, .pager-container-inner {height:25px;background-image:url(sprite.gif);background-repeat:no-repeat;}
.pager-container {background-position:0 0}
.pager-container-inner {background-position:100% -25px;}
Related
I work in front end and set CSS background using the shorthand notation very often. I was wondering for a div with a background image whose parent div has a white background - should the child have background-color white or transparent ? Which is better for performance?
ie:
<div id='parent' style='background:white;'>
<div id='child' style='background:WHITE image no-repeat center center;'></div>
</div>
OR
<div id='parent' style='background:white;'>
<div id='child' style='background:TRANSPARENT image no-repeat center center;'></div>
</div>
Simply don't set the background color in the shorthand declaration. You can skip it.
Saves on bandwidth, and css-browser-rendering-performance is kind of totally Dependant on the users/visitors browser!
Good luck!
Everyone's right suggesting that you leave off the declaration. It's good cascading.
However, you may want to declare it white when the interior element requires a white background - In which case it would be sensible to include it in the event this element will appear in other places.
The performance gains either way are largely unnoticeable I would say.
I have a menu with 5 items of varying text length - home, about us, contact us, etc
In the mockup in photoshop, I created a background image for the hover state but if it's longer than the text it gets cut off and it doesn't work in IE. The image is 105 X 28. Here's a link to example You'll see when you hover the background image gets cutoff. How can I fix this? Thanks
add a css rule to #main-nav li a{ min-width: 105px;}
I would recommend having a fixed size though ie 105px.. and then text-align:center for each of the menu items so they all line up nicely .. but that is up to you
The buttons aren't wide enough for the background image.
Give each li tag either the style width: 105px; height: 28px; or make a CSS class with that styling and apply the class to each one.
You can try using a rectangular background image and using the CSS border-radius attribute to round the corners.
If that doesn't get you the look you want or isn't compatible enough, the usual way is to make the image in three parts. The two ends plus a middle section that can be stretched or tiled.
A third approach is to use a rectangular background image again, and then creates "masks" which are images of the corner cutouts (which are same color as background) that are overlayed on the main background image to make the corners appear rounded. I haven't seen this approach as much since the border-radius attributes became widely supported.
Here is a pure CSS solution...
http://jsfiddle.net/wdm954/tAaCF/1/
Basically using CSS3 border-radius and box-shadow to replace the need for an image. This is going to be a bit less stylish in older browsers. For simple styling like this it shouldn't be a deal breaker if those who are already suffering through a lack of CSS3 across the Web don't get to see some pretty rounded corners. The older browsers will still show a blue background on hover.
when we define hover state of anything CSS... & on hover state we change the background:url('image path'); will this image be preloaded of will be download on the first hover of the element.. if that is so then how to preload it... i know the javascript to preload images.. is that going to work...
If you're trying to avoid having your hover state images only load they they're being hovered on, instead of preloading them, why not create sprites that hold both the normal and hover images ? That way you can be sure that all your hover state images will already be loaded, and at the same time drop the overhead for all the requests. The only thing that you would then need to do, is to set the value of the background-position attribute.
As for your first question, I suppose the best way of finding the answer is to use two large images (a couple of wallpapers would work) and test it yourself, although I suspect that the images will only be loaded when the mouse is over the original image, because that's when the code is being executed.
Hope this helps !
If you have a div of height 20px, say, and want a background image to change on hover, use an image with both the no-hover and hover graphics in it, with the no-hover at the top, and the hover image at the bottom. Both parts should be the hight of your div, in this case, 20px. Then, set your CSS background-position first to 0px 0px (top left). This is default (no hover).
When the user hovers over the div, set the background-position to 0px -20px (20px up). This will move the background image up by 20px, showing the bottom half of the sprite, which is the hover graphic. When the mouse is removed from the div, the sprite will fall back to it's original position.
CSS:
.hoverDiv /* Normal state */
{
background: url('images/img.png');
background-position: 0px 0px;
}
.hoverDiv:hover /* Hover state */
{
background-position: 0px -20px; /* Move background up by 20px, hiding the top image */
}
If you have a div of different height, just change the 20px bits with the height of the div.
If your sprites are side by side as opposed to on top of each other, move the X axis by using background-position: -20px 0px; instead of 0px -20px;. Of course, you can move the background positively too.
Hope this helps,
James
you could use css sprites
The best thing to do is use CSS Sprites. A sprite sheet is a large image with lots of images inside it, which will be used on your site. What's the benefit? Well, it means that only one http request is sent to download all of your images. Therefore, making the site load slightly faster.
It will really work well with a hover effect!
It's much easier to use plus simple code. Not like JavaScript, with messy horrible code. It's very easy to learn. Based around the position of the image in the sprite. Here's a useful tutorial, on Flowdev. Here's an example on W3Schools
I have a div with 60% opacity, to show part of a background image behind the div. Because the opacity is at 60%, the text in that div appears as grey.
Is there anyway to override this level and make the text appear black?
Any advice appreciated.
Thanks.
Set the opacity on the background rather than the element.
background-color: rgba(255,0,0,0.6);
A while ago I wrote about how to achieve this in a backwards compatible way.
I've experimented with this in the past on my own website. By far the easiest method to achieve what you want is to create a single-pixel .PNG image with its opacity set to less than 100% (i.e., partly-transparent) and use it as a background image. By default it will fill the whole containing element - make sure that the CSS background-repeat attribute is set to 'repeat' if it doesn't.
Doing things this way you don't have to set transparency on the containing element itself, hence the opacity of its text will be unaffected.
Amazingly, there is just the tool for making a semi-transparent single-pixel .PNG here.
The opacity applies to the whole div and all of its children. Unfortunately, you cannot undo that opacity, but only add more. And besides that, there's no way for CSS to select the text inside an element.
In your case, the best solution is to apply a transparent background image (with PNG) to your div block, like a white one pixel image with 60% opacity.
Another solution would be to use different boxes and positioning, like described in this tutorial by Steven York.
this should answer just about all of your questions: http://css-tricks.com/non-transparent-elements-inside-transparent-elements/
The simplest solution would be to create a semi-transparent PNG with the correct colour and use that as a background image.
Another solution that may be possible depending on your layout is to put the text in a separate layer and position that over the top of the semi-transparent part. Something like this would work:
<div style="position: relative; background-image: url('your_image.jpg')">
<div style="opacity: 0.5; background-color: #fff; position: absolute"></div>
<div style="position: absolute">The text to go on top</div>
</div>
You'd need to add your own positions/sizes (the top, left, width and height properties) as appropriate.
I have a gradient background that I'm using like follows in an ASP.Net Webforms application:
<div style="background-image: url(foo.jpg) repeat-x;">
... Injected HTML codes
</div>
Where foo.jpg is a 200x1 pixel image. My problem is this, the height of the injected HTML varys from about 200px to 1000+px depending on size of a datagrid. Also, this segment is part of a much larger page that uses for positioning content.
What I would like is that after the HTML is injected, have the background automatically stretch to fit the space so that the gradient is applied smoothly over the entire height.
CSS cannot stretch background images.
However, IMG elements can be stretched, so you can put an IMG right before the grid, use CSS to give it position: absolute and z-index:-1, and use jQuery to set its dimensions to be equal to the grid.
I was researching exactly how do do SLaks solution and discovered a "hack" that works for my situation. While it doesn't do a stretch operation, I'm simulating one in a way that works for my situation and it is 100% CSS. I don't claim that this is a general solution, but it does work for me.
To answer the question, I need to be a little more precise in my definition of my problem.
in my original code,
<div style="background-image: url(foo.jpg) repeat-x;">
... Injected HTML codes
</div>
foo.jpg is 600px x 1px gradient from a color to white which is color of web site. This way on the larger displays, I get a very smooth transition from color to white. That it doesn't go all the way to the bottom is something I can live with. The problem comes when I need to render some data that displays only 300px high. Then only 300 px of the 600px in the gradient display. Resulting in an "ugly" step change in the color. This is what I really needed to get rid of by doing the resizing.
While resizing the background is the technically cleaner solution, what I did was
<div style="background-image: url(foo.jpg) repeat-x;">
<div style="background-image: url(fooBottom.png) repeat-x; background-position: bottom;"
... Injected HTML codes
</div>
</div>
fooBottom.png for me is a 200px by 1px image that is 100% white at the bottom and 100% transparent at the top.
The key thing on the inner is the "background-position: bottom;" This positions the new background section. If the section being displayed for me is >800px high, this new code does nothing visually.
But for sections shorter than 800px, what happens is the bottom image gets closer to the top. This coverage occurs because the inner block is drawn "above" the outer block. Then if the section gets shorter, the bottom background image covers more and more of the top background image.
But because of the transparency in the lower image, it ensures that on shorter sections, that there is a blend to white at the bottom.
I'm going to create a blog on my personal site that shows examples. When I get the example done, I'll update this post.
UPDATE - I've posted a working example at http://sntsoftware.com/Blog
I've been in your situation before, and I ended up having about five different background images for the resolution variations. If it was their first time to the site (no cookie present), I'd present them with a landing page where I set a cookie (using Javascript) with the value of the client resolution (see my getViewportDimensions function in this blog post). On the server-side, I evaluated the resolution on the next request and chose which image to inject in my CSS. It works well. Be sure to have a default resolution set on the server-side in case the user agent has Javascript or cookies is disabled.