here is the layout im trying to achieve.
http://i.imgur.com/kA0yw.jpg
I have a repeating swatch of the background that is set to the html's background so the grey paper tecture repeats beyond the design.
Then i Have the bamboo illustration that goes on top of that set to the background of the body.
I cant seem to get the bamboo to not be cut off to where the content ends.
What is the best possible way to do this?
the white content div in the center needs to extend down to at least the bottom of the page, and i cant for the life of me figure this out it seems like it has to be the simplest thing to do
this is what it looks like now- http://i.imgur.com/55dPe.png
here is the code
<html>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
</div>
</body>
</html>
and the css
html{
background:url(images/background_swatch.png) top center;
}
body{
margin:0 auto;
background:url(images/background.png) top center no-repeat;
}
div#wrapper{
margin:0 auto;
width:800px;
background-color:#FFF;
border-left:5px solid black;
border-right:5px solid black;
}
#header{
margin:0 auto;
position:relative;
top:25px;
background:url(images/navigation_banner.png) no-repeat;
width:850px;
height:150px;
left: -25px;
}
I'm confused as to what you want to change...Could you post your code?
or which do you want to extend, because it seems to me like the bamboo picture is all the way down, if you want it further, maybe stretch it further (height:120%;) ??
You need to set height 100% on html container, min-height on body container.
http://jsfiddle.net/5FwGZ/
html {
height: 100%;
background-image: url('http://imjustcreative.com/wp-content/uploads/ImJustCreative-2010-08-23-at-06.06.01.jpg');
}
body {
min-height: 100%;
width: 100%;
background-image: url('http://www.landscapecreationsfl.com/flower-dahlia-pink-transparent-background-350_1_.gif')
}
div#content {
height: 400px;
width: 600px;
margin: 0 auto;
text-align: center;
background: white;
}
Related
I'm theming a Drupal website and using the vegas full screen bg.
I want to achieve the following:
But I have some trouble by theming the footer: I want it to be always displayed under the background image (so you have to scroll down to see the footer) now it keeps coming over the background image. Besides that I want the main menu and footer to become full width and not 960px like the container. But I can't seem to get these 2 to 'break out' the container.
Now I've:
#footer {
position: absolute;
bottom:0;
width: 100%;
height:100px;
background-color: #202020;
}
#primary-menu-bar{
position: absolute;
width: 100%;
height: 60px;
padding: 0;
margin: 0;
background-color: rgba(255,255,255,0.70);
padding-top: 10px;
}
Normally something like this does the trick but I'm struggling to get this right...
Anybody any advice or solutions?
You didn't show any HTML, so I just came up with some HTML myself. If the footer is only visible when you scroll down you need to have some sort of wrapper for both your header and your content element. You can then set the wrapper min-height to 100% and use background-image/background-size for a full-screen image background.
HTML:
<div class="wrapper">
<header class="page-head" role="banner">
Header
</header>
<main class="main" role="main">
Content
</main>
</div>
<footer class="page-foot" role="contentinfo">
Footer
</footer>
CSS:
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
background-image: url(http://placehold.it/1200x800);
background-position: center center;
background-size: cover;
}
.page-head {
background: red;
}
.main {
width: 80%;
margin: 0 auto;
background: yellow;
}
.page-foot {
background: blue;
}
See example on this pen.
here is a possible solution: http://jsfiddle.net/09mcoo2h/1/
as i said in the comment below your question: you need to have footer and header outside the container (that is the only with 960px)
To have a footer TO THE BOTTOM of the page, just set the body as position:relative.
HTML
<div id="primary-menu-bar"></div>
<div id="container"></div>
<div id="footer"></div>
CSS
body {
margin:0;
padding:0;
position:relative;
}
#container {
display:block;
width:960px;
height:1600px;
background:#eee;
margin:0 auto;
}
#footer {
position: absolute;
bottom:0;
width: 100%;
height:100px;
background-color: #202020;
}
#primary-menu-bar{
width: 100%;
height: 60px;
top:0;
background-color: #F00;
padding-top: 10px;
}
It's really hard for us to do it like this with out HTML.
So basically what you need to do is place the footer and header outside the container. Because the container is 960px, so the header and footer can go over it.
The structure should be like this:
<body>
<header></header>
<div class="container"></div>
<footer></footer>
</body>
Example on codepen
This is my first time on this forum and ill try to be clear as possible, i have a problem with creating a small website for my own, specifically with the header. Im trying to create a page which has a wrapper of 1024px center (margin: 0 auto;) and i would like 2 divs, on both sides of this wrapper where i can use another picture as background. My current css looks like this:
body, html
background: url(../images/bg.jpg);
background-repeat: no-repeat;
background-position: top center;
margin: 0;
padding: 0;
}
#wrapper
margin: 0 auto;
width: 1024px;
}
#header {
width: 1024px;
height: 254px;
background-image: url(../images/header2.png);
background-repeat: none;
position: relative;
}
#header_right {
width: 50%;
right: 0;
background-image: url(../images/header_right2.png);
position: absolute;
height: 254px;
}
#header_left {
width: 50%;
left: 0px;
background-image: url(../images/header_left.png);
position: absolute;
background-position: right;
margin-left: -512px;
height: 254px;
}
and my html looks like:
<body>
<div id="header_right"></div><!--End header right!-->
<div id="header_left"></div><!--End header right!-->
<div id="wrapper">
<div id="header"></div><!--End header!-->
<div id="content"></div><!--End Content!-->
</div><!--End wrapper!-->
</body>
What i'm trying to accomplish is to have a header that continues on both left and right (both headers use different backgrounds), in this case it does work on the left, because im using a negative margin, since i use 50% width and exactly the half of the wrapper (-512px), this works, but if i would try to use a negative margin on the right (margin-right: -512px) this will extend the page on the right with an extra 512px, which is not my intention.
I've been googling all day but can't seem to find any answer to my question, also tried to make 3 divs with float: left , but couldnt figure out how to make 1 in the center with a width of 1024px and the rest 100% width, if anyone could help me out that would be really appreciated.
Kind regards
I am not entirely sure how you want it to look like, but I'll give it a shot.
If I'm way off, perhaps you could provide me with a schematic of sorts?
In any case, the example given below does not use your specific code, but it should give you an idea of how it's done.
Result:
The left and right headers are "infinite", in that they always fill the entire page's width.
The middle header covers up the rest. If you've got background images you can use background-position to position them so that they align with the middle header's left and right edges.
Code | JSFiddle example
HTML
<div class='side_wrapper'>
<div class='left_header'></div><div class='right_header'></div>
</div>
<div class='header'></div>
<div class='content'>
Content here
</div>
CSS
.header, .side_wrapper, .left_header, .right_header{
height: 100px;
}
.header, .content{
width: 400px;
margin: 0 auto;
}
.side_wrapper{
width: 100%;
white-space: nowrap;
}
.left_header, .right_header{
width: 50%;
display: inline-block;
}
.left_header{
background-color: blue;
}
.right_header{
background-color: lightblue;
}
.header{
position:absolute;
top: 0;
left: 50%;
margin-left: -200px;
background-color: red;
}
.content{
background-color: green;
text-align: center;
}
You want the two header out of the wrappper and aside of it right?
If im right, try this:
<body>
<div id="header_left"></div><!--End header right!-->
<div id="wrapper">
<div id="header"></div><!--End header!-->
<div id="content"></div><!--End Content!-->
</div><!--End wrapper!-->
<div id="header_right"></div><!--End header right!-->
</body>
and :
display: inline; float: left;
in each element(header-left, header-right, wrappper), and get out of the negative margin
In you divs use float:left; this should mean that within a wrapper as long as there is enough space they will float next to each other for example
css:
#divWrapper
{
width:500px;
float:left;
background-color:red;
}
#divLeft
{
width:250px;
float:left;
background-color:blue;
}
#divRight
{
width:250px;
float:left;
background-color:green;
}
Html
<div id "divWrapper">
<div id = "divLeft">content here</div>
<div id = "divRight">content here</div>
</div><!--this is the end of the wrapper div -->
A really good tool to use for manipulating css is Firebug in Firefox https://getfirebug.com/
if you want a centre div try this:
http://jsfiddle.net/kzfu2/1/
The following code ususally works well for me when I am using .gif or jpg images..
#contentBox1{ position:relative; width:980px; background:url(../images/bg-middle.png) repeat-y; min-height:80px; }
#contentBox2{ position:relative; width:980px; background:url(../images/bg-top.png) no-repeat top; }
#contentBox3{ position:relative; width:980px; background:url(../images/bg-bottom.png) no-repeat bottom; min-height:500px; }
<div id="contentBox1"> <div id="contentBox2"> <div id="contentBox3"> Content Text Goes Here. </div> </div> </div>
But as you can see I use .png because everything needs transparency to see through to the background. So the "middle.png" background shows up behind the header and footer. I need all the room I can in this div at the top and bottom but can't seem how to figure out the best css code to make this work.
Example
You could try this:
Combine the top + middle images into one image and make the middle section really long.
Place that as the background image of a div.
Inside the above div place a second div with the bottom image aligned to the bottom of this div as a background image. Make the bottom image not transparent but have it filled around the cloud by the yellow bg colour.
try this, re-order your div's as follows
<body>
<div id="contentBox2"></div>
<div id="contentBox1">
<div id="content">Content Goes Here</div>
</div>
<div id="contentBox3"></div>
</body>
Then change the CSS as follows, this is a more logical layout and should be easier to follow, the internal #content div will add padding to the text so it appears inside the image. The min-height of the top and bottom divs are set to the height of the images so you don't have any background color seeping through. You can change the min-height of #ContentBox1 to your desired size.
#contentBox2 {
background: url("images/bg-top.png") no-repeat scroll center top transparent;
margin: 0 auto;
min-height: 304px;
position: relative;
width: 980px;
}
#contentBox1 {
background: url("images/bg-middle.png") repeat-y scroll 0 0 transparent;
margin: 0 auto;
min-height: 560px;
position: relative;
width: 980px;
}
#contentBox3 {
background: url("images/bg-bottom.png") no-repeat scroll center bottom transparent;
margin: 0 auto;
min-height: 240px;
position: relative;
width: 980px;
}
#content {
padding: 40px;
}
Hope this helps
I used a little bit of Billys suggestiong but changed it up a bit. The restrictions are it has a max-height.
#contentBox1{ position:relative; width:980px; background:url(images/bg-top.png) repeat-y top left; min-height:300px; margin:0 auto; }
#contentBox3{ position:absolute; bottom:-218px; width:980px; height:218px; background:url(images/bg-bottom.png) no-repeat left bottom; } /* bg image is 240px; */
#content{ width:900px; position:relative; margin:0 auto; padding-top:85px;}
<div id="contentBox1"> <div id="content">Content text goes here. </div> <div id="contentBox3"> </div> </div>
You can see http://webdesignmb.com/test/
I want to have gradient all over the HTML document, and in center of BODY tag I need another background centered.
Edit to see how much it fails try it out:
http://xn--wiadomesny-37b.pl/bg
This image explains it:
It fails if I put in CSS, only 1 background is displayed even, if underneath should be displayed repeat-y background:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
html {
background-color: #ffeacd;
background-image: url(bg.png);
background-repeat: repeat-x;
}
body {
background-image: url(bg_overlay.png);
background-repeat: no-repeat;
background-position: center;
}
.content {
width:1020px;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
</style>
</head>
<body>
<div class="content">
<p>This content is closed in 1020px wide DIV, as to merge in most displays. </p>
<p>Rest around is an background seen or unseen depends on users screen size. </p>
<p>Me got 24'' so its obvious that I will see all backgrounds and even gradients as
blank space fillers</p>
<p>
<h1>See how much it fails in various browsers:</h1>
<ul>
<li>Chrome</li>
<li>Firefox</li>
<li>IE</li>
</ul>
</p>
)</div>
</body>
</html>
If you don’t see two backgrounds, perhaps that’s because your body element occupies the same area as the html.
The following demonstrates that the elements can have different backgrounds ( http://jsfiddle.net/ZVHqs/ ):
<!doctype html>
<style>
html { background: green; }
body { background: yellow; margin: 1em; }
</style>
Hello world
I think this should help you:
html {
background: #ffeacd url(bg.png) 0 0 repeat-x;
width:100%;
height:100%;
}
body {
background:transparent url(bg_overlay.png) center center no-repeat;
width:100%;
height:100%;
}
.content {
width:1020px;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
You should try doing this,
body{
background-position: fixed;
}
You should use two DIVs, one for the left side bar and one for the main content. Set the background for BODY to the gradient, and the DIV for the left side bar to whatever you want it to be.
Then you just need to focus on creating the two-column layout for the divs. This is a great primer on CSS positioning.
please see the attached wireframe. I'm using blueprint css. I want the every thing except the header to be in a 980px container.
For the header, I would like the left column to be fluid. Always growing to touch the left of the browser. How can you build a container, that has a header that is fluid on only one side?
I hope the wireframe helps explain the problem. If not please let me know. Thanks
Not sure if I have interpreted your question correctly, but I think the only way to do this is playing around with the z-index of the container and banner area.
For example, your CSS would be:
body { margin: 0; }
#container { width:980px; margin: 0 auto; z-index: 1; background-color: black; height:500px; }
#logo { width:200px; height:50px; background-color: red; }
#header-left { position: absolute; top:0; left:0; height:50px; width:50%; z-index: 0; background-color: red; }
Then for your HTML:
<div id="header-left"></div>
<div id="container">
<div id="logo"></div>
</div>
Hope this helps.
Let me see if I'm right, you want your header always to be on the top and left corner right and not affect containers position? Well why don't you just take that header out of your container, make sure your body margins are set at 0 so you header actually is completely at the top and left corner of the document and make your header have absolute position.
body {
margin: 0px;
}
.header {
width: 200px;
position:absolute;
}
.container {
width: 980px;
margin:0 auto;
}
<body>
<div class="header"></div>
<div class="container"></div>
</body>