I have one question..
I am using Asp.Net C# With SQL 2005
I have one grid in that and in grid i put one image box and i want to call image from my css.
when i use ImageUrl="~/Images/delete_link_thumb.gif" at image level then image is good but when i call from css through background-image:url(images/edit_link_thumb.gif); then image display is not good
Any suggestion??
Thanks
Path is the CSS is relative to where the CSS is stored in the web site.
as Fabian mentioned, try using background-image:url(/images/edit_link_thumb.gif);
firstly, ur referencing two different images in your question, besides that it depends on where your storing your stylesheet as it is relative to where it is in your project, try adding ../ in front of your images folder reference, like so:
url(../Images/blahblah.gif);
The case is ...
If you use Image url directly it effects the image-box and its the default property of that box and as the css you are applying is not the default so it can also possible that it doesnt take the exactly size or it gives some additional padding or so in your css
so if you are using background property of css then you should supply the position argument also such as center center or whatever fits
Related
So, I don't have any specific code for this project, but is it possible to use CSS and/or CSS Animations to animate an image to a random position? I know it is possible using a JavaScript canvas, but is there a way using just plain CSS? And if so, how? Thanks!
No, you cannot do it by CSS only, but you can do it with SCSS https://sass-lang.com/documentation/modules/math#random.
When the SCSS will be converted in CSS the value will be "static" again.
If you want a dynamic value every time you visit the page you need javascript.
For e.g. I have 4 thumbnails and 1 large image. When I click on a thumbnail, the larger image changes to that thumbnail picture.
I thought there might be a value to place inside target=""?
I was hoping to use only html/css as I don't know other languages well but any solution would be great I've tried looking everywhere.
A couple of possible solutions:
Pure HTML: Use an <iframe> with a name to contain the larger image, and embed the thumbnail images in <a>s with the appropriate target and href
Pure CSS: Include all 4 pictures, with display: none set, and display: block within a rule with the :target pseudo class, and each with an id. Embed the thumbnail images in <a>s with href=#id.
Then there are of course the Javascript/jQuery solutions.
This will give you the answer you need. There is some JavaScript but it's very basic.
Simple Image Swap
I am a hobbyist webdesigner, use html and CSS for testing various website designs. However one particular thing that always confuse me is the decision to make use of image as tag or to use it as background via css or html.
Is their any rule of thumb for this ?
As one of the answers pointed out, you need to make the difference between content and actual page style.
Let me elaborate on that. The purpose of the background-image property is used to define the look of a certain block of your page, be it a div or a p, the key point to take home is that you're defining the page's look. And images in the context of defining the page's design (be that patterns, logos, gradients etc.) should almost never take the explicit form of an img tag. That tag is used to define content images, something linked to the news at hand - something that is unique to a story you're trying to portray.
It's very crucial to differentiate these two concepts because it'll allow you to contemplate a good design independent of the underlying content - as it should be. Uniformal, elegant and precise.
So, in review. Use background-image to define the look of the various blocks that comprise your website and use the classic img tag when you want to add visual content that is context-specific.
The question is it Content or Styling is a good place to draw the line on images.
Will this image be reused? etc.
Do you want the image be part of the document flow, give descriptions to the search engines (alt-text)? Use the img tag.
If you want to place other elements over the image (like text, copyright info), use a background image. You can even combine it by placing an image with transparency over the background image to get some effect.
Furthermore a lot of examples exist where the positioning of background images is used to get performance benefits ("sprites").
I've observed that often the websites use only one background image which contains multiple images on it. For example, instead of using separately icons, all of the icons are put on one image and then the different parts of image are used in different section.
Is there any advantage to this?
How can this be used?
For example, for the following Stack Overflow sprite, how would I display just one of the images?
The technique is called CSS Sprites. Basically you use CSS's background-position property and fixed height or width for your element.
If your elemnts are fixed width and fixed height at the same time you can freely create a more compact image. See this site for more complex examples.
You are talking about CSS sprites, in which the background position changes on hover. Learn more here:
http://css-tricks.com/css-sprites/
Change the css property background-position.
yes , using sprites is good for website performs because every single component on website send different http request .So, when we use sprites images the http request become less & website performance increase.That rule is also apply on css also less css files less http request. you can yourself with the help of safari web inspector.
for more better performance download "yslow"
And with CSS sprites is also possible to make e.g. menu button hover effect without waiting until second image loads. see
It has the advantage that only one image needs to be loaded so that things like hover (roll-over) effects are faster. The technique is usually called "CSS sprites". Google for it.
It has been common for a while to put two images on one sprite sheet, but the tendency has been moving towards combining ALL of your background images on the same sprite sheet to load just one file for all of them. There's a rather good tutorial here.
I have a weird problem with images in visual web developer,
I cant change my images properties from properties panel (my changes don't take effect) and all images in my website have gotten the same size
when I resize one image (by dragging the border), all images get that new size?
any idea?
Somehow visual web developer read the image class in the CSS file instead of the properties of the control because there is something like this in my CSS file:
img {
width:260px;
}
Yes, basically the width and height properties of the HTML <img /> have been deprecated for some time, you are recommended to use styles instead.
VS then takes this to the extreme, and instead of using inline styles, will create a new style in the default style sheet location for img, as you've discovered.
However, unless you are using the image full size somewhere you are better off resizing the image before you upload it to the server, saving on everyones bandwidth.
Also, IE does pretty poor things with it's default scaling routine, but you can turn on cubic sampling through css.