This css below works with a workaround of taking the margin at -22px in the body. I was wondering if there might be a better way to do this. I have a full width background image and I want the nav bar to be the same.
html {
background: repeating-linear-gradient(transparent 0%,transparent 90%,#000000 100% ),
url("../../Images/bg2.jpg") center center no-repeat;
background-size: 100%;
height: 135%;
}
body{
margin: -22px auto;
padding: 0 auto;
}
nav{
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: white;
}
CSS
jsFiddle
html {
background-image: url(http://placehold.it/1800x900);
background-size: cover;
}
body{
margin: 0; /* override the default 10px margin */
}
nav{
width: 100%;
float: left;
background-color: white;
}
Related
#media only screen and (max-width:767px) {
body { background: none; padding-bottom: 0px; }
.postcode_wrap { height: auto; background: url(../images/index_page_bg_2.jpg) left top repeat-y !important; background-size: 100% 100% !important; padding-bottom: 0%; }
.post-code-right-block, .post-code-left-block { height: auto !important; }
.bistro_logo { padding-top: 40px !important; }
.bistro_logo img { max-width: 100%; }
.postcodeform { top: 10% !important; width: 100%; }
.postcodeform input.pcinput { padding: 0; margin: 0; font-size: 1em !important; }
.post-code-right-block img { max-width: 100%; }
.postcode-right-block-content, .postcode-left-block-content { padding-top: 20px; }
.post-code-app-icons-wrapper > .first img { height: 60px; width: 125px; float: right; }
.post-code-app-icons-wrapper > .second img { height: 35px; width: 125px; float: right; }
#wh-widget-send-button.wh-widget-left { left: 10px !important; bottom: -10px !important; }
.appBtnRow { margin: 28px 15px 0px; text-align: center; }
.resim { width: 332px !important; }
this causes the bottom white area problem. How can I fix this?
bottom white problem
You have to either make sure that your image is the right dimension for the device format you are targeting and render the right image in function of the device format.
OR
You can allow the image to stretch (not advised) to fit all format
Or
You will have to choose where the image is going to be centered when resizing while keep it's ratio, if your image is 1920*1080 then on mobile format you will only see half of it or so, this is where you have to choose which part of the image you want to show.
body, html {
height: 100%;
margin: 0;
}
.postcode-rightblock img {
/* Set a specific height */
height: 100%;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
My footer background image is not showing. I cant figure out why.
Any help would be greatly appreciated. Thank you.
/* Footer */
}
.footer {
height: 400px;
width: 100%;
background: url(/images/space.jpg);
background-size: cover;
}
.footer .container {
position: relative;
top: 200px;
}
.footer p {
color: #fff;
font-size: 15px;
margin: 0px 0 20px 0px;
padding: 50px 0 0;
}
I am working on a plugin and need to align some social buttons to right side using CSS. But instead of showing in a line (horizontally) the buttons are showing vertically. Here's the code for that.
<div class= "sc1"><div class= "sc2"><span>Connect with us:</span>
<div class= "sc3"><div class="facebook-icon"></div>
<div class="twitter-icon"></div>
<div class="google-icon"></div>
<div class="instagram-icon"></div></div></div></div>
Now the CSS
.sc1 {
margin: 5px 0px;
background-color: #3498DB;
display: inline-block;
padding: 8px 10px;
width: 100%;
}
.sc2{
float: right;
color: white;
}
.sc3 {
float: right;
}
.sc3 .facebook-icon {
background-image: url(images/social-connections-icons.png);
height: 32px !important;
width: 32px;
background-position: 0 0;
/*float: right;*/
}
.sc3 .twitter-icon {
background-image: url(images/social-connections-icons.png);
height: 32px !important;
width: 32px;
background-position: -32px 0px;
/*float: right;*/
}
.sc3 .google-icon {
background-image: url(images/social-connections-icons.png);
height: 32px !important;
width: 32px;
background-position: -125px 0px;
/*float: right;*/
}
.sc3 .instagram-icon {
background-image: url(images/social-connections-icons.png);
height: 32px !important;
width: 32px;
background-position: -63px 0px;
/*float: right;*/
}
But after this the code final result is showing as
Here's the picture
I have also uploaded complete code on GitHub, in case someone wants to look at the complete code. Here it is.
You can add display: flex; to your .sc3 class:
.sc3 {
display: flex;
}
This will make all the icons align horizontally.
So basically I want to move the white background to the middle/center
with a width 65% and height 100%
.middlebg {
background-color: #FFFFFF;
background-position: center top;
background-repeat: no-repeat;
background-attachment: fixed;``
width: 65%;
height: 100%;
clear: both;
The key to this is setting the margin in the middlebg class to margin: 0 auto the first value being the vertical margin and the second being the horizontal margin. Setting the horizontal margin to auto will centre this element for you.
http://codepen.io/lostdino/pen/rOEEPr
body {
background: black;
position:relative;
width: 100%;
}
.middlebg {
margin: 0 auto;
background-attachment: fixed;
width: 65%;
height: 80px;
background:white;
}
I need some help finessing a layout I’m working on.
Here is a link to the current status of the site:
http://sometimesyoubreakaclarinet.com/
What you’ll see is a large pink area behind the gray content area, it is roughly a third down the page. For some reason, it is only forming to 100% of the height/width of the browser when I actually want it to match the height of the content. How do I get the height to fill down to fit to the content, in the same way the gray content area is already doing?
Secondly, I want this pink area to begin at the end of the background banner image at the top rather than where it is now. How do I achieve this? Do I need to change the position from relative to something else?
The goal here is to have the pink area flow over the banner image and title; something like what is outlined here:
http://line25.com/tutorials/how-to-create-a-simple-collapsing-header-effect
I’ve include what I think is the relevant CSS code below, possibly I’ve left something important out but you should be able to locate the CSS file on the link above if necessary.
#menu { width: 100%; height: 32px; margin: auto; padding: 6px auto 0; top:0px; z-index: 10;
position: fixed; text-decoration: none; background: rgba(44,44,44,0.95); }
#photograph { width: 100%; margin: 0 auto; background: #8a2dc7 url('img/header-2014-apr-1200.jpg') fixed center top no-repeat;
background-position: center top; background-size: 100%; min-height: 250px; height: 250px; top:0px;
position: fixed; }
#sitetitle { width: 100%; height: auto; margin: 0 auto; padding: 25px 0 0 0; background: transparent; position: fixed; } #deck { width: 100%; height: 100%; min-height: 100%; margin: 0 auto; padding: 0; position: relative;
background: transparent; z-index: 4; }
#card { width: 800px; height: auto; margin: 170px auto 0; padding: 10px 18px;
text-decoration: none; background: #2c2c2c; }
#curtain { width: 100%; height: auto; min-height: 100%; margin: 220px auto 0; padding: 0; position: relative;
background: #f12fde; z-index: 2; }
Hopefully someone can help me figure this out. Thank you!
does this fix your issue? Change the css of #curtain to..
#curtain {
width: 800px;
height: auto;
min-height: 100%;
margin: 0 auto;
padding: 0;
position: relative;
background: #f12fde;
z-index: 2;
top: 0;
}