I have the following CSS code:
.yellow {
background-image: url('/images/yellowlight.png');
background-repeat: no-repeat;
height:100%;
width:100%;
}
and the following HTML code:
<div class="yellow"> </div>
However, the div on the page does not have the image. You can see this by clicking on the blue "Logs Status" button (in the tab box) at http://cl58logs.co.cc/.
What's wrong with the CSS?
Your div is not large enough. Background images will not scale. If you want the image to scale, you'll have to use the img tag.
Also, note that height: 100% doesn't work in CSS, except for table cells.
The problem is that the div with the background image has almost no content (apart from a space character).
If you force the div to have a larger height, for example, by changing the CSS to this:
.yellow {
background-image: url('/images/yellowlight.png');
background-repeat: no-repeat;
min-height:600px;
width:100%;
}
then your image appears
The height (437px) and width (700px) of the image is greater than the dimensions of your div. Set an appropriate height and width for your div to allow for the image to be shown.
Install Firebug to better inspect your HTML elements when you come across issues like this.
Since you're setting height and width to 100%, the amount of the image you see will depend on the divs containing the yellow class. Try changing the width and height on the status class and you will actually see your the bg image on yellow.
Related
I have an SVG image that I am trying to use in my page that I would like to stretch with page. The same CSS that works with non-SVG images doesn't work for the SVG. As seen in the quick fiddle here -> http://jsfiddle.net/TUby3/
My HTML
<img src="image.svg" id="topHeader">
My CSS
#topHeader {
width: calc(85% + 10px);
height: 46px;
}
I've been trying different things in my CSS but can't seem to get anything to work. When I make the page smaller, the width of the image does get smaller but the height does not stay fixed, the height shrinks in uniform with the width.
Does anyone know a solution to this that does not involve trading the SVG for a PNG or JPEG?
Try this:
http://jsfiddle.net/TUby3/1/
Just put a div with a set height around it.
html
<div id="test">
Your Image
</div>
css
#test{
height:"60px;
}
You could probably achieve the same effect you are after by setting it as a background image to a div and using the background-size css...
background:url(http://www.adobe.com/inspire-apps/exporting-svg-illustrator-0913/fig14/img/napoleon%20for%20svg%201.svg) left top no-repeat;
background-size:100% 100%;
(That said, Mark's solution works fine for me in Chrome)
I just finished building part of my website using Twitter's BootStrap, but am looking on ways to improve it. This module has an image of known width but unknown height (image height will vary but has fixed width) and has text on top of the image. I originally built this by having an image tag inside a div, then using position:absolute; top:0; to move a layer a text above it.
I don't like the idea of using position:absolute;. My alternative solution is to treat the image as a background of a div that contains the text. However, by doing so, I have encountered two problems:
I don't know how to specify the height of the div as this is a
variable based on the height of the image. The width will always be
of span4 (300px). Each image will only have a few words at most
therefore not enough to take up the entire vertical space of the
div.
As the browser width shrinks, part of the background div gets
cropped off. This is because BootStrap is trying adjust for
responsiveness. How would I fix this?
I am completely stumped, and I feel that this alternative solution is not possible without being able to define a definite height. Is there a better alternative?
My code:
<div class="span4 cell">
This is a placeholder image
</div>
.cell { background: url(http://www.placehold.it/300x200) no-repeat; }
Just to be clear, here is an image of what I am trying to create:
Demo................................
HI now used to this
.span4.cell {
background:url("http://www.placehold.it/300x200.jpg") no-repeat;
width:300px;
height:200px;
}
Live demo
Try this css code. It set height as auto.
remove if you don't want border.
.cell {
background:url("http://i.stack.imgur.com/klttw.jpg") no-repeat;
width:300px;
height:200px;
border: 1px solid red;
}
Try this demo: jsfiddle
I need to set the image height everytime I'm using background: url('images/something.jpg')[..];
Fe.
HTML:
<div class="someImage"></div>
CSS:
.someImage {
background: url('images/something.jpg') no-repeat top;
}
The above example should work... but image won't display until I add an image height attribute to the CSS style class:
.someImage {
background: url('images/something.jpg') no-repeat top;
height: 25px;
}
And then my image appear on the website...
Why does it happend?
Because without content, a div has no height, background image or not.
Since your div is empty it has no height..
The image you use is applied as a background, so it does not affect the size.. it just fits whatever space is available at the div.
When you explicitly set the height, you create room for the image to appear..
I am trying to use CSS and HTML to insert an image into a webpage.
I have the following on CSS:
#eDTP {
background-image: url(eDTP.png);
background-repeat: no-repeat;
background-position: center;
padding-top:475px;
}
and in my HTML, I have:
<div id="maintext">
<p> my page </p>
</div>
<div id="eDTP"></div>
Although this works, I have a big white space on the top and bottom of the images, which I do not want. I tried adjusting the padding values, but that does not seem to really help.
Could anyone please point me in the right direction to get rid of these white spaces?
I would remove the padding top. That should eliminate the problem. I'm not sure why you would need such a high amount of padding between them.
EDIT - Just read that you say the padding hasn't helped you. Any chance of a link to the url? Or a live example somewhere to see the issue in more detail?
Make sure that the line-height of the figure or surrounding element is set to line-height:1;
The only size that you have specified is the padding. The size of a background image doesn't affect the size of the element. You should remove the padding, and specify width and height for the element so that it's the same size as the image.
Unfortenately there is no way to do that in HTML/CSS. Only way of doing this is inserting the values on your server or client-side by javascript. You should really do it with <img> tags inside your <div> element like so.
Make sure you point to the right location of the image you want to show relevent to folder where it is being called.
http://jsfiddle.net/gKFAT/
Here you try to show an image as a background for a div. Is there really strong reason not to use html like above?
<div id="maintext">
<p> my page </p>
</div>
<div id="eDTP">
<img src="eDTP.png">
</div>
If so, you need to specify the dimentions of your di, 'cause it doesn't auto fit the background size (no surprise here, I think).
Try
#eDTP {
background-image: url(eDTP.png);
background-repeat: no-repeat;
background-position: center;
width: 120px; //background image width here
height: 150px; // and height here
}
Your biggest problem is width and height. Also, how do you want this image displayed? Do you want it below the text, on the side of the text, etc? In modern browsers, a div is fully collapsed, and its height is equal to 0. Its width, by default, is 100%. IE7 and older does not work this way for the height.
You need to specify, not padding, but width and height for your div container, eDTP, that is, if you wish to have the background image added via CSS. If you wish to have an image populate eDTP using the img tag, then you do not have to specify the height.
By the way, the reason you see your image with the padding is based on something called the box model. Padding extends the visible region of background color, a background image, and others. The padding you have is functioning like you have a height assigned to its container. But as I said before, this is a very bad way to do this. Add this to your eDTP declaration:
#eDTP {
background: url(eDTP.png) no-repeat center;
width:500px; /* Change this value to the width of your image */
height:475px;/* I assume this is the height of your image */
}
My code:
background:url(images/menu_edu.jpg) no-repeat;
But only half of the image is getting displayed.
The element which has the background needs to be the size of the image.
i.e. flower.jpg = 255px x 55px
<div class="flower">
Some text
</div>
.flower {
background: url(flower.jpg) no-repeat;
width: 255px;
height: 55px;
}
The size of the element cannot be set to the dimensions of the image if you're using a background. You could use javascript to calculate the dimensions though.
Or if you need to repeat the image, you can use repeat, repeat-x or repeat-y on the background tag instead.
If you just want to display an image, the IMG-tag is much more useful and effective... (and it could be set to width(/&)height = 100%).
If you want to display your image in full size, no need to use CSS for this
Dont give height and width attribute to the <img> tag like
<img src="this.jpg" /> it will display in full size
But if you want your <div> to show its background in full size, then is no other option than assigning the exact image dimensions
You are not showing enough code, but if the background image is in the body element, it is probably not stretching across the whole viewport.
Try
html, body { min-height: 100% }