This is my website.
I create Wrapper div.
#wrapper {
background: url(../img/bg.png) repeat;
width:100%;
height:100%;}
But it doesn't work completely. Wrapper doesn't include bottom. Why ?
If what you mean not 100% is the dotted background, I've come out with a solution by changing the height property in CSS:
height: auto;
This will fix it somehow. Hope it helps!
Related
All I want is to place background image for div for 100% width. Could you please help me to find my mistake.
html
<div class="slogan_background">
<h2>Slogan</h2>
</div>
css
background-image: url("../img/bg.jpg");
background-repeat: no-repeat;
background-position: center;
width:100%;
min-height: 526px;
If I understand the issue correctly, this might help:
background-size: cover;
Your code looks good but maybe you didn't set height and width for body tag. Try adding this to your css
html, body{
width:100%;
height:100%;
}
Also set padding and margin to 0 to remove spaces from the side
.slogan_background{
padding:0;
margin:0;
}
Add the
backgroun-size:100% 100%;
duplicate here
I am trying to tell my CSS code that, if the browser is resized then resize the logo size also.
So here is what I have done:
#logo {
background:url('../images/logo.png');
background-repeat:no-repeat;
max-width:423px;
max-height:99px;
width:100%;
height:100%;
display:inline-block;
}
I would be grateful if someone could tell me how to fix this problem? I don't understand what i am doing wrong.
In my HTML i have this: <div id="logo"></div>
The logo is not displaying unless i take away width:100%; height:100%, i must replace it with the exact size in pixels.
Edit: I am trying to shrink the logo when the browser is resized to a smaller size, hope this makes it more clear however, it does not display right now.
Thanks.
You have a max-width and a max-height. Obviously, if the logo's 100% of each is higher than the amount you set, it will not grow any more.
You probably can play with
background-size: contain;
Try to resize Result fame (make it very small width) here http://jsfiddle.net/f6F86/
You can place an absolute img tag to be the background of the div with max-width & max-height applyed in percentage. that way, when you resize the page, the div shrinks and cause the img to shrink.
see this fiddle: http://jsfiddle.net/avrahamcool/j5Kwr/2/
What you need to do is set width:423px; and height:99px; and for max-width:100%;
You can try placing the image directly in your HTML markup. This makes the requirement of a set width and height redundant.
CSS
#logo {
max-width:423px;
max-height:99px;
width:100%;
height:100%;
display:inline-block;
}
HTML
<div class="logo">
<img src="link_to_image_here" alt="" />
</div>
try this:
#logo {
background:url('../images/logo.png');
background-repeat:no-repeat;
width: 100%;
max-width:423px;
height: 99px;
max-height:99px;
background-size: 100% auto;
background-position: 0 0;
display:inline-block;
}
I'm trying to center images in a container but it is not working. Til sofar the css looks like this;
#wrap{
min-height: 100%;
}
#imagebar{
position:fixed;
margin:0 auto;
top:60%;
width: 100%;
height: 200px;
background: yellow;
}
#albums{
margin:8px;
display: inline-block;
}
My website is http://www.robcnossen.nl/
I thought that margin-left:auto;margin-right:auto; would be good but thinks are not working how I thought it would be.
Can anybody help me with this?
Thanks...
#imagebar {text-align:center;}
Your images aren't block-level elements, so simply applying text-align:center; to their parent will do the trick.
Since #imagebar has a width of 100%, its automaticly centered. You can center the images by using text-align: center within #imagebar.
I however think you want a specific 'content box' within #imagebar that is centered.
You can fix that by making a div inside #imagebar with a fix width (in px or %) and add margin: 0 auto to that inner div.
My container div doesnt expand vertically on one of my pages as I add elements. Hence the bottom most div overlaps onto my footer. The divs in the container are horizontal elements relatively positioned
On my home page it works fine container expands and no overlapping using the css below
If I had any hair left it would be pulled out by now!! :-))
#container {
width: 900px;
margin-left:auto;
margin-right:auto;
top:50px;
position:relative;
height: auto !important;
min-height: 100%;
}
Seems to me to little context, because it is possible that the footer is overlapping your container div, which is set to start with a min-height of 100%, it depends on how the footer is defined related to your container div.
...............Demo
Hi now give to body, html height:100%; than give to any class or id height 100%;
as like this
body, html{
height:100%;
}
LIve demo
rule-selector
{
height: 100%;
}
If this doesn't work for you then a more particular rule might disable this rule, so make your rule-selector as particular as possible. If it is still not particular enough, then:
rule-selector
{
height: 100% !important;
}
Try this:
#container {
width: 900px;
margin-left:auto;
margin-right:auto;
top:50px;
position:relative;
overflow:hidden ;
}
Best,
Cynthia
http://jsbin.com/uqafo4
Please check the white area: it should go all the way, as I used width: 100%, but it doesn't.
#container {
background-color:#FFF;
background-position:center bottom;
background-repeat:no-repeat;
height: 440px;
width: 100%;
}
By default the body tag in some browsers have a margin set on them in the User Agent (default) stylesheet. Simple use
body { margin: 0; }
to remove this margin. You should also consider using a reset stylesheet, such as this one by Eric Meyer.
The problem is that the <body> element has some default area around there, add this to the body rule to be safe:
margin: 0;
You cant test the updated version here, no space :)
Following Yi Jiang's advice should solve your problem.
If you don't have a background-image, you can remove
background-position:center bottom;
background-repeat:no-repeat;
I would also suggest adding some padding, for example:
padding:10px;
but perhaps you're thinking about doing that already, only you haven't added the code yet. Or perhaps you don't want to use padding for some reason or another.