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.
Related
Why is there white space to the right of my image?
HTML file:
...
<body>
<div class="image">
<img src="image.jpg" alt="Picture here" id="image" align="middle"></img>
</div>
</body>
Here's what it looks like:
The image should just be the giraffe. Where is this white space coming from?
Not sure if you want the image full width or if the white bg color bothers you...
Make sure your image div has a blue background
.image {
background-color: #4099FF;
}
or the parent that wraps your content and image. in this case your body
body {
background-color: #4099FF;
}
Its because your not filling the whole page your image is to small and you div is not full width
div{
width: 100%; // full width
}
img{
height: auto;
width: 100%
}
this will stretch to fill the whitespace
Depends on what you are trying to do, if you want the image to stretch the full width, you could set width:100%, but this would likely result in a very badely pixelated image and I dont recommend this
You may be better placing the image in a full width div, setting that div,s background color to blue and centering the image, or positioning it where you want it to be
I am having some trouble changing the background color of my webpage, and cannot seem to find a solution.
I have content on the page, but the black background stops when the content stops. I have tried to extend the content, use the body selector, and universal selector...but none of these work.
Is there any: height: 100% property, so that it can can retain the color for all screens?
Apply it to the html tag instead.
html{
background-color: black;
}
Your body content is overflowing the container that has the background color. That's why you see the background color stops but content goes on. To fix the issue ensure that the container contains the content.
I think you are looking for vw,vh,vmax,vmin Units
you can use it on your body tag
body{
padding: 0;
height: 100vh; /*add this to fill the screen*/
background: red /*set the background color here*/
}
I'm creating a theme from scratch. My body has a white background and I want a div within the body to have a grey background-so that a small area of the body will have a different color (grey) background.
I've changed my div's background-color to grey but I can't get rid of the white margins on either side. Probably because my div.container has a max-width: 960px;. How do I get this grey div to go full browser width, with no white on either side, but still keep the body's content/text at 960px?
Add an outer div before your div.container
<div class="outer-div">
<div class="container">
</div>
</div>
In your css
.outer-div {
background-color: grey;
}
Look in the css for the body tag, where it is more than likely has width: 960px;, so changing the body background will not change the full width background.
So to change the full width background you will need to change the html tag's css.
html
{
background: #yourcolor;
}
So far I have managed to get the background image to stretch:
XHTML:
<div id="background">
<img src="images/background.jpg" alt="Background" />
</div>
CSS:
#background
{
width: 100%;
height: auto;
position: fixed;
left: 0px;
top: 0px;
}
#background img
{
width: 100%;
height: 100%;
}
This works well, except the image is being displayed from the top when the height of the image exceeds the window height. This means that the top of the image is always displayed but the bottom is cut off. I want to change this so that the image is always displayed from the centre (so that both the top and bottom of the image is cut off and the centre is of the image is displayed).
Here is a good tutorial on creating a perfect full page background image. The same concept can be applied to any ol' div as well.
In general, images that are meant to be background images shouldn't appear in the markup itself. You're mixing presentation with content.
If having the img tag is not an absolute necessity remove it and add the following three lines in your #background class,
background-image:url(images/background.jpg);
background-position:center;
background-repeat:no-repeat;
The first line sets your background for the DIV. The second line positions it to centre always. The third line makes sure the background is not repeated which is what I assumed you needed by looking at your HTML structure.
More than happy to suggest further is required.
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..