On my site http://goo.gl/16XdA page "contact us" I'd like the contact-box to be vertically aligned within the container div "contact us". The issue is that with the current code the contact-box gets aligned in the middle of the 1400px height of "contact us" div. Is there a way to align the contact box to the middle of the screen no matter what the screen resolution is? (or put a 100% height for the contact-us div but that did not work)
#contact-us {
height: 1400px;
background: #8aba56;
padding-top: 250px;
position: relative;
background: url(../images/bg-water13.jpg) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
#contact-box {
text-align:center;
font: 12px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 400;
width: 300px;
Height:120px;
padding:15px;
/*margin-left: auto;
margin-right: auto;*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
filter: alpha(opacity=95);
opacity: 0.85; /* For IE8 and earlier */
border: 1px dotted #666;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
margin-top: -60px;
margin-left: -150px;
}
Change the height for #contact-us to 100%, as well as its parent elements (html and body), and remove its padding:
html, body, #contact-us {
height: 100%;
}
#contact-us {
padding: 0;
}
I took a look at your site on chrome it is in the center of #contact-us. However contact-us is 1650 pixels high because you added 250 px padding so the div is at the center of the 1400 box but 250 px is being added to the top location.
You can fix this by changing the box-sizing to border-box or increase the margin-top.
Related
I have a div with a background image that I want to expand 100% width and auto scale the div to fit the required height of the image. At the moment it is not scaling the div height unless I set the height of the div to 100% but then it just stretches to the full height of the screen, whereas I want it to scale to the height of the image.
Here is the html:
<div id="mainHeaderWrapper">
</div><!--end mainHeaderWrapper-->
<br class="clear" />;
Here is the css:
#mainHeaderWrapper{
background: url(http://localhost/site/gallery/bg1.jpg);
width: 100%;
height: auto;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
}
.clear { clear: both; }
Thanks for any and all help
Let a transparent image dictate the DIV dimensions.
Inside that div put the same image with CSS opacity: 0
<div id="mainHeaderWrapper">
<img src="path/to/image.jpg"><!-- I'm invisible! -->
</div>
set that image to
#mainHeaderWrapper {
background: no-repeat url(path/to/image.jpg) 50% / 100%;
}
#mainHeaderWrapper img {
vertical-align: top;
width: 100%; /* max width */
opacity: 0; /* make it transparent */
}
That way the height of the DIV will be dictated by the containing invisible image, and having the background-image set to center, full (50% / 100%) it will match that image's proportions.
Need some content inside that DIV?
Due to the containing image, you'll need an extra child element that will be set to position: absolute acting as an overlay element
<div id="mainHeaderWrapper">
<img src="path/to/image.jpg"><!-- I'm invisible! -->
<div>Some content...</div>
</div>
#mainHeaderWrapper{
position: relative;
background: no-repeat url(path/to/image.jpg) 50% / 100%;
}
#mainHeaderWrapper > img{
vertical-align: top;
width: 100%; /* max width */
opacity: 0; /* make it transparent */
}
#mainHeaderWrapper > div{
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
If you know the proportions of the image, use percentage padding to define the height of the container. Set height:0 and set vertical padding to a percentage of the width.
They key to this method is that percentage-based vertical padding is always related to width.
According to the box model (w3.org):
The percentage is calculated with respect to the width of the
generated box's containing block, even for 'padding-top' and
'padding-bottom'.
Below, the image is 400px X 200px, so the proportion of height to width is 1:2 and padding-top is set to 50%;
#mainHeaderWrapper {
width: 100%;
height: 0;
padding-top: 50%;
background-image: url('https://dummyimage.com/400x200/');
background-size: 100% auto;
background-repeat: no-repeat;
}
<div id="mainHeaderWrapper"></div>
stuff below the image
In another example, the image is 300px X 100px. The height is ⅓ of the width, so the padding-top is set to 33.33%:
#mainHeaderWrapper {
width: 100%;
height: 0;
padding-top:33.33%;
background-image: url('https://dummyimage.com/300x100/');
background-size: 100% auto;
background-repeat: no-repeat;
}
<div id="mainHeaderWrapper"></div>
stuff below the image
Edit:
As prompted by Paulie_D, other content in the div must be positioned absolutely, demonstrated below. I suggest positioning these elements using percentages, as well.
#mainHeaderWrapper {
width: 100%;
height: 0;
padding-top: 33.33%;
background-image: url('https://dummyimage.com/300x100/');
background-size: 100% auto;
background-repeat: no-repeat;
}
div#inner_content {
position: absolute;
top: 0;
width: 100%;
margin-top: 10%;
color: #FFF;
text-align: center;
font-size: 20px;
}
<div id="mainHeaderWrapper">
<div id="inner_content">Hello World</div>
</div>
stuff below the image
This can be done without using a dummy image. I will use dimensions of an image I just worked with for example.
The dimensions of my image are 2880x1410. Simplify the dimensions -> 96/47 (I used this simple ratio calculator http://andrew.hedges.name/experiments/aspect_ratio/). Once you have the simplified ratio, plug the height and width to the equation:
height: calc((100vw * W) / H);
So mine would read: height: calc((100vw * 47) / 96);
No need to worry about the contents of the div either (unless they dont fit)
body{ margin: 0; padding: 0}
#box1{
background: url(http://lorempixel.com/400/200/food/);
background-size: cover;
background-attachment: fixed;
margin: 0;
width: 100%;
height: 100vh;
display: table;
}
h1{ color: #ffffff; font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"; font-size: 38px; text-align: center; font-weight: normal; background: rgba(0,0,0,0.3); display: table-cell; vertical-align: middle}
<div id="box1">
<h1>Code Bluster BILU </h1>
</div>
I am having problems with a site's header displaying correctly when a person zooms in with the browser. The banner will cut off on the right side and show the body background image. The address to the site is: http://www.bemidjisportsonline.com, Any ideas on a way to fix this? Thanks. I will post my CSS for the body, header, and banner elements below. A screenshot of what I am talking about can be found here: http://prntscr.com/19e59r.
body{
font: 100%/1.25 Arial, Helvetica, sans-serif;
/*background: url(/_images/background-repeated.png) top center repeat-x;*/
background: url(/_images/background_jersey_green.jpg) #010101 top center repeat-x;
}
header, nav, section, article, aside, footer {display:block;}
header{
width:100%;
position: relative;
background: url(/_images/header_trees.png) no-repeat;
background-size: 100% auto;
height: 7em;
}
#banner{
z-index:100002;
margin: 0 auto;
width:75em;
height:7em;
}
You need to change the background-size. Like this:
header {
width: 100%;
position: relative;
background: url(/_images/header_trees.png) no-repeat;
background-size: 100% 100%;
height: 7em;
}
Try changing the #banner width to 100%.
#banner {
z-index: 100002;
margin: 0 auto;
width: 100%;
height: 7em;
}
On my site http://goo.gl/16XdA on page "about us" I'm trying to align the norway map on the top right of the div but does not seems to be working (as you can see it only shows a small part of the map and on the left side). What is wrong with my CSS code? Thanks
#activity {
height: 1300px;
background: #8aba56;
padding-top: 150px;
background: url(../images/bg-water22.jpg) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
#activity-container {
width: 600px;
background-color: #FFFFFF;
font: 12px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color:#000;
font-weight: 400;
padding:25px;
margin-left: auto;
margin-right: auto;
border: 1px dotted #666;
background: #fff url(../images/norway-map.png) no-repeat right top;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=93)";
filter: alpha(opacity=93);
opacity: 0.93; /* For IE8 and earlier */
}
The image has too much negative space to align with the div. Crop the image or specify the background-position to the pixel. In essence, there's nothing wrong with your CSS. The image is just too big.
As you can see, there's a lot of white space to the right of the map:
http://purewords.com/test4/images/norway-map.png
I am trying to duplicate this style of a sidebar menu with the background image, but when I use the same stylesheet code and image, it doesnt span the entire height of the sidebar.
The example: http://demo.ponjoh.com/Simpla-Admin/index.html
The css used (on example site and mine):
#sidebar {
background: url("../images/bg-sidebar.gif") no-repeat scroll left top transparent;
color: #888888;
font-size: 11px;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 230px;
}
On my site, the image only displays in its actual dimensions (230x197) and doesnt fill the sidebar. What am I missing?
The person who coded that CSS implemented the background image of the sidebar twice. Once in the body and once inside the sidebar.
body {
font-family: Arial, Helvetica, sans-serif;
color: #555;
background: #F0F0F0 url('../images/bg-body.gif') top left repeat-y;
/* sets bg image of sidebar, and #F0F0F0 for the rest */
font-size: 12px;
}
Here's what you're missing though:
background: url("../images/bg-sidebar.gif") repeat-y top left;
If the background image is a repeatable image... change no-repeat to repeat or vertically repeat-y
You would have to add a bottom: 0; as well as position: relative; to the #body-wrapper and activating the background-repeat. But be warned! This is a very dirty CSS coding method and will probably lead to misunderstandings and failures - still it works.
#body-wrapper {
/* Your code stuff ... */
position: relative; /* absolute positionings are 'relative' to their first 'position: relative;' parent */
}
#sidebar {
width: 230px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
background: url("../images/bg-sidebar.gif") repeat-y scroll left top transparent;
color: #888888;
font-size: 11px;
}
This code works for IE7 and 8 but not for 6. How can I get it to work for 6. Or is there a better way to do it?
#contentLoading {
width:90px;
height: 90px;
position: fixed;
top: 50%;
left: 50%;
background:url(_img/ajax-loader4.gif) no-repeat center #fff;
text-align:center;
padding:10px;
font:normal 16px Tahoma, Geneva, sans-serif;
border:2px solid #666;
margin-left: -50px;
margin-top: -50px;
z-index:2;
overflow: auto;
}
Did you know that IE6 does not support position: fixed;? It will be rendered as a static element.
I usually use something like:
#contentLoading {
width: 90px;
margin-left: auto;
margin-right: auto;
}
If you'd like to center the #contentLoading div within a container you can do it like so:
#contentLoading {
width: 500px; /* whatever width you want */
margin: 0px auto; /* top and bottom margin of zero, left and right are automatically calculated based on the space available in the enclosing container */
}
For Ie6, you need to text-align:center the body in your CSS, and then style the main wrapping div with text-align:left, to re-align the text toe the left.
Here is a example.
body{
text-align: center; /*This alligns all content to the center for IE6*/
}
#mainWrapper{
width: 900px;
margin: 0 auto;
text-align: left; /*This re aligns all content within this id to the left*/
}