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
Related
I am making a simple landing page and am trying to get the following image to be the background fullscreen: image
My CSS currently looks like this:
body {
background-image: url('/images/bg.jpeg');
width: 100%;
height: 100%;
position: fixed;
}
A majority of the image is getting cut off, what's the best way to remedy this?
Thanks !
Did you tried this :
body {
margin:0;
padding:0;
background: url('/images/bg.jpeg') no-repeat center fixed;
-webkit-background-size: cover;
background-size: cover;
}
Heres a cool idea for a landing page. The background, being fixed is a popular cool way for landing pages. Please, to see this properly, click "Full Page" on the top right after clicking run code snippet.
#import url(https://fonts.googleapis.com/css?family=Lato:300);
div:nth-child(1){
background-image: url(https://images.unsplash.com/photo-1431538510849-b719825bf08b?q=80&fm=jpg&s=6fd7a983e3b43e66d2b6062856b9df66);
height: 750px;
width: 100%;
background-size: cover;
background-attachment: fixed;
}
div:nth-child(2){
height:400px;
width: 100%;
background-color: black;
z-index: 1;
}
h1{
text-align: center;
color: white;
background-attachment: fixed;
font-family: 'Lato', sans-serif;
padding-top: 300px;
z-index: 0;
text-shadow: 0 0 2px black;
font-size: 50px;
}
<div>
<h1> Michael Barreiro </h1>
</div>
<div></div>
HTML
<div class="datePosted">
<h6 class="eyeIcon">23</h6>
</div>
CSS
.datePosted h6{
font-size: 1em;
/*background-image: url(../Images/view4.png);
background-position: left center;
background-repeat: no-repeat;
padding-left: 20px;*/
padding-right: 6px;
float: right;
color: #FFFFFF;
text-align: right;
}
.eyeIcon {
text-indent: -9999px;
}
.eyeIcon:before{
font-family: "foundicons";
-webkit-font-smoothing: antialiased;
-o-transform: scale(1);
text-rendering: optimizeLegibility;
}
.eyeIcon:before{
content: "\f005";
vertical-align: middle;
/*position: relative;
top: 3.5px; works nicely with this*/
padding-right: 3px;
font-size: 1.1em;
}
I want to align the eye icon vertically centered to the text 23, but when using vertical-align:middle, it does something like the image shown above. How is this can be fixed?
Setting vertical-align to middle means aligning the midpoint to baseline plus half of the x height. This is what seems to happen in the image. To align to the middle of half the height of digits, you need to set vertical-align to a specific value corresponding to that height. This value unavoidably depends on the font.
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 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.
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;
}