Ok, I'm trying to design a website that has an image at the top that spans the full width of the browser. And below that I want to put different colored div containers that also span the full width. kinda like this:
http://hayden-demo.squarespace.com/
I've tried background-size:cover but I want different backgrounds for each section of the page. The only thing I've found after many hours of searching is width: 100% but it leaves white borders around my image...
Please help, I'm desperate. This is my current CSS:
.mainimg {
background-image: url(_DSC0656.jpg);
background-repeat: no-repeat;
background-position: center center;
-moz-background-size: cover;
background-size: cover;
width:100% !important;
height: 700px;
margin:0 auto;
display:block;
}
The body element has some margins by default. Unless you remove them, any element that you put inside, no matter it's width (unless it's in position absolute I think) will have some borders. They aren't borders, but the gab in between the end of your element and the side of the body. Try this :
body{
margin: 0;
}
If that doesn't work, then please show us an example of your code on JSBin, Codepen or similar (or even a live version if possible).
did you tried to reset the margin and padding of all element to 0, if not then try following code into your css file.
*{
padding:0;
margin:0;
}
Related
I am very new to HTML/CSS. I am building a website for the Sheriff's office I work for, and am having an issue.
The website has a fixed div on the left side of the page, that includes all of the links. The content is on the right, and is designed to scroll, however I want the left div (links) to always remain the same. I designed the site on a laptop, and so far its working fine on that, however when viewing the homepage on a desktop, the left div doesnt stretch all the way to the bottom.
Here is the link: http://www.mlpropmgt.com/sheriff3/index.html
I used percentages, thinking that would make that left div always stretch to the bottom of the screen, however it didnt seem to work.
Any help would be much appreciated!
from what I gather viewing the code in your webpage you did all the right things, and the leftbar is 100% height, however the image you used as a background is not, css does not stretch the image unless you tell it to do it, you can use
.leftbar{ background-size: cover;}
or use an image that is big enough to account for the extra height in a desktop, keep in mind that Imac's hace 1440px window height
Since you have 2 divs do this
<div id="Main_div">
<div id="left_div">div 1</div>
<div id="Right_div">div 2</div>
</div>
css
#Main_div
{
border:1px solid red;
height:100%;
width:100%;
position:fixed;
}
#left_div
{
border:1px solid black;
height:100%;
width:40%;
float:left;
position:fixed;
}
#Right_div
{
border:1px solid blue;
height:100%;
marigh-left:41%;
float:right; // or its not needed
}
let us know
give height of the div as 100% (height:100%;) then set position:fixed;
it will works fine
Hi righ now your left side it has 100% height so is working the div is streching all the way to the bottom. The problem is the background image. The background image is smaller than a desktop window height so that's why it looks like is not streching all the way to the bottom.
Possible solutions:
Change the background image to a bigger one that just have the "background", and put another two images with the sherif star and the sheriff's logo/name with a absolute position so they will look like background images.
You can add the following to your leftbar div. The problem here is that the image is going to strech and at some point you are not going to be able to see the complete logo/name
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
I currently have a dynamic header image that resizes to the size of the browser. (exactly like this: http://www.theadventurists.com/ ) But currently it overlaps my other content. What I actually want is the image to take up the screen and scroll down to see the content.
The website I linked, how do they do this without overlapping content? Is there JS involved? The closest I have gotten to replicating it is having the div below have margin-top 100%. But that is a bad fix due to the margin becoming too large when the browser is certain sizes.
<div id="test_bg">
</div>
<div id="page">
<p>This is the content</p>
</div>
#test_bg{
background-color:blue;
position:absolute;
background-size: cover;
background-repeat: no-repeat;
top: 0;
left: 0;
bottom:0;
right:0;
}
#page{
background-color:red;
margin-top:100%;
}
http://jsfiddle.net/9Trb2/9/ blue being the image, red being content.
You're right on with setting margin-top 100% as not the best way to go about it. There were a couple of issues with your JSFiddle - the background URL was pointing to an imgur page and not the actual JPG, so I changed that. Also, you had the css selector page which instead needed to be #page to correctly target the div.
My approach for solving your issue was to change the #test_bg height to 100% and remove absolute positioning. By taking away absolute positioning, #test_bg becomes part of the document flow and the next div will automatically be positioned right below it, which is what you wanted. The other thing you need to do in order to be able to set that div to 100% height is to also set the body and html height to 100% - otherwise you'd see that setting #test_bg to height=100% wouldn't do anything. Here's the JSFiddle.
#test_bg{
background-image:url(http://i.imgur.com/GgfpgA3.jpg);
background-size: cover;
background-repeat: no-repeat;
height: 100%;
}
html,body{
height: 100%;
}
#page{
height:400px;
width:400px;
background-color:red;
}
I've been dealing with a problem for a day now, and I seem not to be able to solve it. I've got four images I want to use as CSS background on the <body> tag. They are supposed to be aligned as the corners of the page.
According to multiple resources I should set the min-height on both the html and body element to 100% if I want the placement my CSS background to be relative to the entire content of my page (which extends beneath the viewport) and not just to the viewport. However, this is not working. The bottom two corner images seem to be stuck to the bottom of the viewport.
I'm using this for CSS:
html {
min-height: 100%;
height: auto;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
min-height: 100%;
height: auto;
background: url(../images/bgTopLeft.png) no-repeat left top,
url(../images/bgTopRight.png) no-repeat right top,
url(../images/bgBottomLeft.png) no-repeat left bottom,
url(../images/bgBottomRight.png) no-repeat right bottom;
}
My HTML shouldn't matter much here as I'm using the <body> tag, can't do much wrong there. The doctype is HTML5 in case anyone wants to know.
I've tried changing the setting of background-attachment to fixed, I tried the various settings of background-origin even though it doesn't seem to have to do anything with my current problem. I tried breaking up the multiple shorthand background into all the separate statements that are in there. I can't get it to work.
I'd rather not resort to sticking the bottom two corner images into a footer or a div at the bottom of my page that's just there for styling purposes. What I want, which is a <body> tag with four backgrounds positioned in the four corners of the entire page, should be possible, I just can't figure out what's going on here.
I've made a pen of what I think you're trying to achieve here:
Codepen example
I've used background-size to size the background images.
You may need to tweak this to match the size of your background images:
eg:
background-size: 40px 40px, 40px 40px, 40px 50px, 60px 60px;
depending on what size your images are.
So the story is this:
I'm making a website in which the homepage content is consisted of a menu and the clients logo.
But the way I've design it, the content needs to be in the center of the browser window... So across the board, because everyone has different screen heights, everyone who views the website either has too much white space under the footer, or part of the content is cut off.
This is the website: http://thinkinternational.co/
So my idea to fix it was this:
I created a buffer zone above the body, as you can see in the code below, but the problem I've discovered with having a percentage as a div height is that the parent div needs to have a specific height in the first place. Unfortunately, I'm not omniscient, and I can't predict every size of screen for every person who views this website, so I can't give it a specific height, otherwise I might as well have just left it as is in the first place.
Also, at the same time, I need the background to shift down with the body. Just to shake things up.
Any solutions for this issue ??
<div id="main">
<div id="TopBuffer"></div>
<div id="body" class="clearfix">
Content Here
</div>
</div>
body {
background:#0b0b0b url(images/Slices/BackgroundHome.jpg) no-repeat center -150px fixed;
-moz-background-size: inherit;
-o-background-size: inherit;
-webkit-background-size: inherit;
background-size: inherit;
height: 100%; }
main { color:#000; font-family:Arial,Geneva,sans-serif; margin:15px 0;height: 100%; }
TopBuffer { width:100%; height:25%; }
Like you said, to make a height with percentage work, you will need the parent to have a specific height.
So height:100% on body will work once you put it on html too.
(I would also remove the margin and padding from html)
html{
margin: 0;
padding: 0;
height: 100%;
}
And to make your background stretch all the way down, you will need make changes in this line of the CSS:
body{
background:#0b0b0b url(images/Slices/BackgroundHome.jpg) no-repeat center -150px fixed;
}
change the center -150px to center center, to center top or to center bottom depending on which you prefer so you can show the whole image on larger resolutions.
First center is the horizontal position of background, and second one is vertical position.
As for centering your content vertically this is a nice article:
Vertical Centering With CSS
If you can use javascript then use window.outerHeight to get the browser height and set the buffer according to that using javascript or jquery
I want to place a PNG with some transparency (a white column) over a tiled background on a webpage. It should stretch/tile out vertically (not horizontally) over the whole page. I'm just using CSS and HTML. I'm guessing my understanding of DIV's and CSS is lacking, for which I apologize.
Here's what I have, as a result of a lot of fiddling:
body {
background-image:url(bin/back.png);
background-position:left bottom;
}
#second-background {
position:absolute;
height:100%;
top:0;
margin: auto;
background-image: url(bin/column.png);
background-repeat: repeat-y ;
}
It's being displayed but I can't get it centered and on top of that it displaces the rest of my content. I've read through how-to-recreate-silverbacks-parallax-effect on thinkvitamin, but I can't get it to work myself.
Here's a link to a demo where you can see it in action.
I believe that you need to set a fixed width on #second-background. Otherwise, with no content in it, it has no width.
Edit: I'm sorry, I didn't read your question thoroughly. Let me check out the demo and investigate further.
Edit 2: Ok, if you want the white column image over the whole page and centered, then you'll need to set #second-background to width: 100%; and background-position: center top;. This will also allow #inner-body to center correctly.
Let me know if this isn't what you were going for.
I'm making a few assumptions here, but I think it'll work out:
Firstly, add this to near the top of your CSS:
html, body {
margin:0; padding:0; border:0
}
On #second-background, add width: 100%.
On #second background, either add background-position: center top, or scrap all of your background- properties and replace them with this: background: url(bin/column.png) repeat-y center top.
Tested in Firefox, with Firebug.
If you would like me to explain why these changes work, just ask.