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>
Related
Hello I am new to css and am in need of some assistance. I am wanting to create 3 layers in CSS for my website so it looks like the picture I have provided below.
How would I go about setting this up in CSS? Any help would be much appreciated.
Thankyou.
You want to learn about the z-index property. But basically, anything you apply z-index to needs to have a position set... I'm pretty sure static doesn't work but absolute relative & fixed all do it. then you can just order them. For example:
.div-background{
z-index:1;
position:relative;
}
.div-middle{
z-index:2;
position:relative;
}
.div-front{
z-index:3;
position:relative;
}
Make sense?
All you have to do is add the background img of the pattern to the css
here's an example of the code
div {
background: url(../images/purpalt.png) repeat;
}
[http://www.bootply.com/4iBwk4Tmfr][1]
/* CSS used here will be applied after bootstrap.css */
/* Custom container */
.container-full {
margin: 0 auto;
width: 100%;
background: #666;
}
.jumbotron {
background: black;
height: 553px;
}
.container {
background: #ccc;
padding: 15px 10px;
height: 553px;
width: 960px;
}
.image-box {
background: #fff;
text-align: center;
height: 500px;
}
footer {
background: orange;
height: 190px;
<div class="container-full">
<div class="jumbotron">
</div>
<div class="container">
<div class="col-md-12">
<div class="image-box">
Image to go here
</div>
</div>
</div>
</div> <!-- /container full -->
<footer></footer>
My html page has a title and a menu at the top, the contents section under the menu, and the footer at the bottom. The footer must always be at the bottom of the window, no matter what the content size is (except for when the content if higher than the window, in which case the footer must be underneath the content). I have markup and CSS rules that implement this (below).
But I need to also show a background image over the contents and the footer. That is, the image must cover the entire screen but the title/menu area. I have no idea how to accomplish this. In my code below (as well as on jsfiddle at http://jsfiddle.net/EGj54/) I have attached the background to the whole page, but I want it to show only for the contents and the footer.
Could someone help me please?
<div id="main">
<div id="navbar">
<div id="caption"><span>Test</span></div>
<ul id="sections">
<li><span>current</span></li>
<li>next</li>
</ul>
</div>
<div id="content">content</div>
<div class="push"></div>
</div>
<div id="footer">footer</div>
* {
margin: 0;
}
html, body {
height: 100%;
}
ul {
list-style-type: none;
}
ul li {
display: inline;
}
#caption {
font-weight: bold;
}
#footer, .push {
color: white;
height: 25px;
}
#sections {
background-color: #aaaaaa;
}
#main {
height: auto !important;
margin: 0 auto -25px; /* bottom margin is negative value of #footer height */
min-height: 100%;
}
#main {
background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Clouds_over_the_Atlantic_Ocean.jpg/800px-Clouds_over_the_Atlantic_Ocean.jpg');
background-size: cover;
}
Your footer will stay at the bottom since you placed it last with your divs, no problem with that as long as you will not use float or absolute positioning. Move your style in background to body to solve your problem:
body {
background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Clouds_over_the_Atlantic_Ocean.jpg/800px-Clouds_over_the_Atlantic_Ocean.jpg');
background-size: cover;
}
can you simply adjust the vertical position of the background images?
background-position: left 20px;
You can set the background-position of the image
#main {
background-image: url('yourimage.jpg');
background-size: cover;
background-position: 0 100px; // 100px or whatever the height of your navbar is
}
Alternatively, You can cheat like this ;)
#content {
height: 100px;
background: url('yourimage.jpg') top;
}
#footer {
height: 50px;
background: url('yourimage.jpg') bottom;
}
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/
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.
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>