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.
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}
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..
I have this and it got an HTML img#logo-image, on some occasions it will not be displayed, display:none.
The problem is that the entire div#menu-title should fit the width of the page.
I tried putting width:100%, but when the img#logo-imag" is displayed it breaks the line being below the img#logo-image.
The width:100% does not work with elements float:left
Just unfloat the menu-title div and remove the width.. it will automatically be 100% of the header then.. and if the image is present it will adjust the ul#menu list to make room for it, which is a natural behaviour
if you want the menu-list to really only take the available width (say for a background color or something then you can add overflow: hidden; to ul#menu - though I don't see a need for that in your example code
here's a simplified version of your Fiddle - hover on the header to make the image disappear and see the ul#menu adjust to suit
Example Fiddle
You have both logo-image and menu-title floating left. Since they arent really in separate divs, they are all part of the same div, they appear next to each other. On top of that, you set the menu-title to be 760, which isn't the width of the page. At least that what it looks like you did. Do not use width 100% because resizing the page will shrink that menu title.
You really just have to play around with the divs, but i would say that separating those two divs would make you be able to stack them on top or below each other.
And in using Chrome's inspect element feature, I don't see a display:none for the image's css. I don't know why that would do that.
I'm really not sure of what you are trying to accomplish since making the div#menu-title width: 100% doesn't leave any room for anything else on the same row.
Why not let them both be inline and let the widths be whatever they need to be?
Anyway, I have a guess at what you want. You want those two elements to behave as being in a table, inside a table row, and each in a table-cell so that the image takes a maximum width, and the div#menu-title taking all of the rest of the place. In that case put them in a table, or use display: table-cell for the image and the div and fiddle around with that.
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)
What I want to do is have a way to horizontally scroll through the icons on the top bar. No matter how I try to implement overflow I cannot get it to work. Here is a link to the page. Link no longer exists.
Note: that the scrollbar shall not cover the background image at all. It should be immediately below.
You need to set the width of that header div to be wider (width:2000px;). If you want a dynamic width (you dont know how many boxes will be in there) then you'll have to calculate the width with javascript (or serverside code like PHP).
Giving the .browser div a width of 2000px does the trick... then adjust the height of your divs to be tall enough to show the whole icon and name.
Let me know if that makes sense...