I currently have a div on my page that I have given a background image. This div does not have any content and so it does not display on my page, if I add any content it displays. I would like it display even without content because I want that background image to show up as well as I would like to assign some hover/click events to it.
Is there any way to force the div to display?
You need to specify a size:
<div style="width: 100px; height: 100px"></div>
You can set the size to the dimensions of your background image, or any other values you desire.
You need to specify width and height of that div using css (or min-width and min-height)
Add a height and a width to the div. You may want to use min-height and min-width and set them equal to the size of your background image.
Adding an empty comment will help browsers that strip empty tags.
Add height and width to it.
Jsfiddle: http://jsfiddle.net/GFTtY/
Adding an empty //content// worked for me.
Setting width/height or min-width/min-height didn't force the background image to appear. (Chrome 51 on Win8)
Related
I am working ASP.net with C#,
I have a html div which is width 1000px then also i have some image which are different width.
My requirement when i put on the image to div it will show image automatically fill in the that div there is not seems blank space for the that html div.
Note: we have different image which is different width.
Is it possible ?
You need to use background-image on that div via CSS.
Read about background-size, and here you can see a demo of the different options.
Normally, the HTML <img> tag squeezes the image if the width or height attribute is smaller than the image itself. Is there a way to instead make it crop it if the specified size is smaller?
You can add the image as a background of a wrapper div and set the div's width and height. Or you can add a wrapper element around the img and set height and width to the wrapper element.
See
http://jsfiddle.net/nivas/zFMfj/
I don't think you can do this with the img tag by itself, however there are a number of ways you could do this with the image file and another tag (canvas->DrawImage, Div->Background Image or Div->Oveflow: hidden) for example.
I have multiple divs with text and what not in them. When the page is made smaller horizontally all of the elements shift. However,if you resize this page, elements disappear and nothing moves. How do I fix this problem so it is like this page?
Thanks!
If you view the source of this Stackoverflow page, then you will notice that all of the content on the page is wrapped inside of a container div with the width set to 100%, and the margin and padding both set to 0. If you want to have a fixed width, then do not use percentages, but instead specify your page to be a specific width in pixels.
If you want to center all you content, wrap it in a div like so:
<div class="wrapper">
<!-- Your Content !-->
</div>
And then add the following to your stylesheet:
.wrapper {margin:0 auto;width:960px;} /* Change 960 to desired width */
I hope this helps!
Predefined sizes make the elements do not move when you resize the screen, that will keep their size in different screen resolutions also, that is to take into account. Also you must use margins and padding fixed.
In short ... not more percentages, but don't abuse fixing everything
I am not able to have a background image show in a div. See this fiddle. Can someone show me where I am going wrong please? This seems like a simple thing to do.
You simply need a height for the div if you wish to see it.
Divs automatically have 100% width and 0 height.
See what happens when you add height.
Your div is empty. Put some text in it, and the background image will appear.
Alternatively, give your div a height.
Add height:32px; and width:32px; to show one arrow (JSFiddle). The height of a div is determined by its content, so if you want to render the background of a container either specify its height or fill it with content.
i have problem like this.
#container_index{
width:100%;
height:1300px;
background:url(../img/green%20pattern.jpg);
}
in the code above i am set height 1300px and nothing problem, i mean image can display and can repeated.
but, if i change the code be (with height auto, image can not display):
show me the way to solve my problem. i want the image display without set height.
thanks
#container_index{
width:100%;
height:auto;
background:url(../img/green%20pattern.jpg);
}
When you use height: auto; and div is empty, its height will be 0px, meaning, the background won't show up. You might want to set a min-height.
Without setting height you can not display the image in table or div,via background coz height is the element which do make sure that there is something which is to be displayed.either give the height of its container or of the image..
if you want to show this image without height you have to call this from html source.this will work fine it doesn't require height and width element
You should read this for more information on images with height and widths.
Height and width
hope this will help
In an empty container you will not see any background image. If you add contents up to the height of bg, you can see the full image, otherwise you will see only the content-height of that bg. If you set a 'min-height' property with the height of bg, you will be able to see the bg without any contents in the container.. Hope you understand :-)
Regards..