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..
Related
I am making a header component and what I want to achieve is to make my header picture stretch to the full width of the webpage, even when it the browser shrinks, however when you shrink the browser the picture does not stretch 100% and is driving me insane. I don't want to remove the scroll-x property, so how can I fix this? What am I doing wrong? Here is is a picture of my issue:
https://imgur.com/YCZOYGE
And here is a codepen with my code:
https://jsfiddle.net/philipkovachev9/ax2Ljtvn/5/
So, as promised I found a solution.
Change display:flex from your parent div, to display: inline-block and remove width:100%. You div will have the size of your content, even when it overflows.
Setting the width to 100% will be relative to the parent, it was the body. However, the body didn't include the overflow.
I hope it works :)
PS: If you still need display:flex, create a child div, with flex attribute.
add this css
body{padding:0;margin:0}
So I have some parent container/div positioned 'fixed' on the page. It's height and width are set to 100%. Within the container is an image. I currently have written some JavaScript so that the image stretches either to 100% width or 100% height of the container, depending on the image's dimensions. The image is then vertically or horizontally centered. As well, this is done every time the window is re-sized so that the image is always centered and fits.
Currently this is working wonderfully, but ... this is besides the point. The real question is this: Is there a way of doing this with just CSS? In other words, is it possible for an element to stretch proportionally to it's container but not be clipped/cut-off and doing so with JUST CSS? Also, NOT background-size: contain. Hacks are also welcome. Thanks.
I set up a fiddle for anyone that wants to mess around... HERE.
EDIT
Just in case someone out there on the interwebs is looking...A viable alternative to using an <img> can be the CSS background-size property. Browser compatibility and more info from the Mozilla Developer Network HERE
Is there a way of doing this with JUST CSS? In other words, is it possible for an element to stretch proportionally to it's container but not be clipped/cut-off and doing so with JUST CSS?
If you set the height of the image to 100% only without setting the width, it will stretch proportionally to its container without being clipped or cut off. Same for setting the width only to 100% and not setting the height.
Edit
You can't do what you want to do using only CSS as you would need to know if the aspect ratio of the image is higher or lower than its container, CSS can't do that. Have a look here for a more detailed explanation of the issue at hand by Stephan Muller
All you need is to specify height and width to be 100%, eg:
#makeMeStretch {
height: 100%;
width: 100%;
background: #FFF;
}
I updated your fiddle
Looking for some assistance if its possible to do a fluid height image in CSS.
Ex) http://jsfiddle.net/VDB7A/20/
I want to have the box div at a set height, but dynamically size the container to show all the text at the bottom without going over the set box height. Basically this is for a fluid width site, where I want to cap the box height and auto adjust the image size to show all the text without going over the height.
Thanks!
Figured out my own answer:
I need to scale everything on width. So I need to put a min-width and max-width on the container. Then I need to put width:100% on the image. Height will always be auto.
http://jsfiddle.net/VDB7A/27/
I need to scale everything on width. So I need to put a min-width and max-width on the container. Then I need to put width:100% on the image. Height will always be auto.
http://jsfiddle.net/VDB7A/27/
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 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)