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..
Related
I am wondering how to accomplish this logo background found here
if you notice the logo floated to the left and how the white "D" is on a red color background that fills the entire height of the header. I know how to float it and everything, I just need to know how to make a background color with a certain width to fill the entire height of the header like so. And by the way I am assuming that there is no set height already for the header.
Thanks in advance!
Whatever id or class your floated div is for the logo, simply apply a background color to that in CSS.
If you're looking for some sort of dynamic height application; set the html, body, and enclosing div elements to all have 'height:100%'.
Posting a sample of your code would help.
You may want to try something like this (fiddle here):
HTML:
<div id="Header">
<img id="Logo" src="http://goo.gl/uDkk1X" />
</div>
CSS:
#Header {
width: 600px;
height: 60px;
background: #333333;
}
#Logo {
width: 60px;
height: 60px;
float: left;
background: #666666;
}
As you can see, the image already has transparency, so any background color set to this block would render behind the actual image. Either that or put your img inside another container with a specified background color.
An image that I'm using for the background of a website is getting positioned to just the center of the page.
The screenshot for what I'm explaining is as follows:
Why is the black space on the right and left of the image present?
The CSS for the following is:
body {
background: black url('http://unsplash.s3.amazonaws.com/batch%209/johnny-lam-connect.jpg')no-repeat 50% 100%;
}
It would appear that your background image isn't big enough to cover the space of your window size. As a result, the black background color you're also providing is being seen on the areas where your image can't cover.
I'd be tempted to try the following:
body {
background-image: url('http://unsplash.s3.amazonaws.com/batch%209/johnny-lam-connect.jpg');
background-position: center;
background-size: cover;
}
This will ensure your background image covers the body of your HTML. More info can be found here.
First of all, it is black because in your CSS you specify black as the background colour. But im assuming you mean why is there any blank space at all...
In which case, the simple answer is the size of your image does not match the size of the window. More specifically, the resolution and therefore width to height ratio is not the same as the window. So the browser will center the image as per your css instructions and fill the rest of the space with your solid base colour (black).
You basically have 3 options here.
You find a background colour that is appropriate for the blank space to fit in with your design (a lot of people add a border or fade the image edges to transparent so it looks purposeful).
You use an image which is repeatable (this is the most common step as its usually advisable to use a very small repeatable image rather than a single large image. As an example, you might have a 2000px image gradient going from one colour to another that can be repeated (aka tiled) horizontally.
Use the background-size: cover property to fore the background image to fully cover your body tag. This property can be set to a number of options, but each one comes with its own caveats (i.e. weird stretching issues or cropping important parts on certain screens). So you need to google for the valid values and test each one. You will also have to download a shim/polyfill for this property to support old browsers (IE?).
It looks like the body is used to center the page. As the body is just as wide as the content, thats where the image ends. The root html element gets the background-color from the body, but not the image.
As a solution, you should consider adding a wrapping div to center the page, while setting the background on the body.
Example HTML
<html>
<body>
<div class="page"> ... </div>
</body>
</html>
Example CSS
html, body {
margin: 0;
padding: 0;
}
body {
background: black url(...) no-repeat center top;
}
.page {
width: 90%;
margin: 0 auto;
}
In your css use following property:
body {
background-size:cover;
}
or
body {
background-size:100%(for width) 100%(for height);
}
Hope it will help.
I am having a problem with a background image not showing.
I have a class that I've added to an anchor tag.
<a class="my-class"></a>
and the css for the class is:
.my-class {
background:transparent url("../images/my-bg-image.png") no-repeat 0 center
}
The problem is that the background image is not showing.
I know it's there because when I do this:
<a class="my-class">&NBSP;</a>
part of the image shows.
Anyone have any idea on how to make the whole image show without having to insert lots of 's please?
<a> tag is an inline element and without a content will not show the background, so You need to make it display as a block or inline-block element and then define the size of the element.
Try with:
.my-class {
display: block;
width: 128px;
height: 128px;
background: transparent url("../images/my-bg-image.png") no-repeat 0 center
}
For more information you can check the box model and the display property on the CSS 2.1 w3c standard.
Also the sections The width property and Computing widths and margins have an explanation of why the element doesn't show the background on an empty inline element.
Update:
Also the working draft of the CSS Box Model is available on the W3C site.
Update 2:
On a side note, relying only on a css background image for a link can have somme accessibility issues.
The element has a zero-width because it has no content at all. If the image contains useful information (and it really should, it is used as a link!), you should put some text inside the link and use any image replacement technique you like, for example:
HTML:
<a class="my-class">It‘s awesome!</a>
CSS:
.my-class {
background:transparent url("../images/my-bg-image.png") no-repeat 0 center;
display: inline-block; /* create a block element behaving like an inline element */
text-indent: -1000em; /* move the inner text outside of the link */
overflow: hidden; /* prevent text visibility */
width: 200px; /* image width */
height: 16px; /* image height */
}
You need to assign a width to your anchor. Inline elements have no width if they have no content.
.my-class {
background:transparent url("../images/my-bg-image.png") no-repeat 0 center;
width:20px;
height:20px;
display:inline-block;
}
Edit: and it seems without any content at all it is also necessary to set a height and display:inline-block. This causes the element to think of itself internally as a block element, but act externally as inline.
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% }
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.