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.
Related
I have got this image that I want to display on my front page.
It is on top of my background image (which has a working 100% span)
But the image on top of it has a little border of +- 5px showing the background. The border needs to go :)
My CSS looks like this: (with the navigation that is fixed to top)
body {
background: url(backgr_1.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center bottom;
background-size:cover;
}
nav {
position:fixed;
z-index: 100;
top:0;
left:0;
background-color: rgba(0,0,0,0.8);
width: 100%;
height: 58px;
font-family: 'chineserocks';
font-size: 3em;
}
ul {
list-style-type: none;
margin-top: 0;
}
li {
display: inline-block;
}
a {
color: #FFFFFF;
text-decoration: none;
margin-left: 4em;
}
#backroots_head {
width: 100%;
}
#head_section {
width: 100%;
}
and my HTML like this:
<body>
<section id="head_section">
<img id="backroots_head" src="backroots_head.jpg">
</section>
and all the rest of the html etc.
So that is basic stuff.
What i have tried:
- Adding a max width of 3000px
- margin 0, padding 0
- width 105% (yes i'm desperate xD)
- position fixed (worked, but then you can't scroll to the content that is under the picture.
- adding a width 100% div around it
There is no container around the image or section with a set width, so that isnt the problem too.
Im really stuck on this one. Any solution is welcome.
Kind regards
I set the body margin to 0 to get rid of the spaces around the image. It scales 100% for me.
<html>
<head>
<style>
body { margin: 0px; }
#backroots_head { width: 100%; }
</style>
</head>
<body>
<section id="head_section"><img id="backroots_head" src="backroots_head.jpg"></section>
</body>
</html>
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;
}
I need to design a page with border images on each side. I need the page to fit on 1280x1024 and 1024x768 resolutions. Is it possible to have a fixed size for the center div and crop the border images in the lower resolution ?
1280x1024 : border-200px center-840px border-200px
1024x768 : border-72px center-840px border-72px
I've made two images with 200px X 5px. I've tried to use the float property without success.
So I've made it this way so far, it works in 1280x1024 but not in 1024x768 (it's too wide).
HTML :
<body>
<div id="right"></div>
<div id="left"></div>
<div id="center">
<h1>Title</h1>
<p>Content here</p>
</div>
</body>
CSS :
html {
margin: 0px;
padding: 0;
}
body {
margin: 0px;
padding: 0;
width: 100%;
background-color: white;
overflow: auto; /*to clear the floats*/
}
#right {
clear: both;
position: absolute;
right: 0;
background-image: url('/site_media/images/border-right.jpg');
background-repeat: repeat-y;
width: 200px;
height: 100%;
}
#left {
clear: both;
position: absolute;
left: 0;
background-image: url('/site_media/images/border-left.jpg');
background-repeat: repeat-y;
width: 200px;
height: 100%;
}
#center {
width: 840px;
margin: 0px auto;
padding-left:10px;
padding-right:10px;
}
Thank you!
since the center element if fixed-width, this should be easy. the side border should be placed as 'background' in the body instead of having its own div.
correct me if im wrong, based on what i understand here, you want the side border to be cut/crop by 1024 resolution instead of shrink. how about you make a single image with 1280 width, place both side border images in it accordingly, left and right, leave the center area empty. save this as a single image (up to you if you want a transparent background), then do the followings.
<style type="text/css">
body { /* can also use your own div */
background:url(path_to_the_single_image) repeat-y top center;
}
#center {
width:840px;
margin:0 auto; /* centered the div */
background:green;
}
</style>
<body>
<div id="center">center content</div>
</body>
thats it! now you should have your fixed width element in the center, and your side-borders in the background. if you load it in 1280, you should see the full border, while if you resize down to 1024, your centered element should remain there, and your side border just now should cropped out by the browser.
let me know if this is what you looking for.. :)
if I understand correctly - what you're looking for is a bit difficult to achieve without javascript.
You can consider a bit different approach that is: can the sidebars (graphic borders) slide under the center content?
example:
<style type="text/css">
#wrapper { position: relative; }
#right, #left { width: 200px; position: absolute; background: gray; }
#right { right: 0; }
#left { left: 0; }
#center { width: 840px; margin: 0 auto; background: green; position: relative; }
</style>
<body>
<div id="wrapper">
<div id="left">left</div>
<div id="right">right</div>
<div id="center">center</div>
</div>
</body>
is it possible with just css2 to have the following:
all the content to be in the flexible div.mid section
overlap the top and bottom parts
not fussed about ie6
here's the photoshop with centre slice:
as you can see the top and bottom parts are quite large and i need to overlap them from the middle slice...
Please dont misunderstand here, i understand how to make a flexible central div, the complexity is in the overlapping of the top and bottom while the mid div remains flexible.
I imagine it requires either negative margins or absolutely position top and bottoms elements with z-index..
Here's a kickoff example, you can copy'n'paste'n'run it.
<!doctype html>
<html lang="en">
<head>
<title>SO question 2781669</title>
<style>
#wrap_centre {
width: 1000px;
margin: 0 auto;
}
.top {
padding: 0 100px;
height: 200px;
background: url('http://i39.tinypic.com/11qnzbt.jpg') no-repeat center top;
}
.mid {
padding: 0 100px;
background: url('http://url.to.1px.height.slice.jpg') repeat-y center center;
}
.content {
position: relative;
min-height: 200px;
top: -100px;
margin-bottom: -200px;
}
.bot {
padding: 0 100px;
height: 250px;
background: url('http://i39.tinypic.com/11qnzbt.jpg') no-repeat center bottom;
}
</style>
</head>
<body>
<div id="wrap_centre">
<div class="top"></div>
<div class="mid">
<div class="content">mid<p>mid<p>mid<p>mid<p>mid<p>mid<p>mid</div>
</div>
<div class="bot"></div>
</div>
</body>
</html>
You'll only have to create a new slice for the .mid.
Update: as per the comments, above is updated.
I'm making a website and Id like the sides to have an image that repeats on the Y. Sort of like this website. http://www.solutionkaizen.com/html/boutique.php Im just not sure how to make the div for it. For the CSS I think its basically setting the bg of the div to my image and repeat Y. Thanks
I know how to do the css part, but how would I make a div that spans the whole eight of the site?
Thanks
but how can that div work for both sides:
< page content >
< >
< >
< >
< >
This one is also a great example
http://www.ecodetox.ca/
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(background.jpg);
}
div#main {
background-color: #fff;
margin-left:12%;
margin-right:12%;
}
-->
</style>
</head>
<body>
<div id=main>Hello World!</div>
</body>
</html>
The site itself is using a table with two further images to remove the hard edge which my example above produces.
#div {
background-image: url('bg.png');
background-repeat: repeat-y;
background-color: #fff;
}
<div id="div">Greetings!</div>
if you see their code they use a really, really tall image as background and they have set it as background of the whole body ...
their image : http://www.solutionkaizen.com/images/background.jpg (you can zoom on it if it gets scaled to fit the browser..)
To best accomplish what those sites are doing with CSS, I'd go with this:
CSS:
body
{
background: White url("vertical-fading-bk.png") repeat-x;
}
#container
{
width: 800px;
background-color: White;
}
.side-fade
{
width: 10px;
}
#left
{
float: left;
background: #ececec url("left-soft-fade.png") no-repeat;
}
#middle
{
width: 780px; /* (.side-fade * 2) - #container */
background-color: White
}
#right
{
float: right;
background: #ececec url("right-soft-fade.png") no-repeat;
}
HTML:
<body>
<div id="container">
<div id="right" class="side-fade">
<!-- Note how #right comes first. -->
</div>
<div id="left" class="side-fade">
<!-- Then #left. -->
</div>
<div id="middle">
Main body content here...
</div>
</div>
</body>