I'm using the skeleton framework to build a site,and during the design I want to put a 960px grid image as a background because it's easier for me to structure all the elements.
But if I put the grid image as the body background, the image doesn't match with the 960px container and if I put the grid image as the background of the 960px container, the image doesn't shows up in the browser.
Probably this is very easy but I'm not seeing how to do it.
Any other tips about how to see the grid during the designing process are also welcomed.
Thanks.
You need to wrap your container in a div with your background. Then just put your content in the container div. Quite Simple, MANY OTHER WAYS TO DO THIS, this is my preferred way as in future designs you will notice padding and margin issue when adding stuff to container divs
.wrapper {
background-image: url ('../YOURSITE/IMAGE.JPG');
width: 960px;
background-repeat: repeat;
}
.container {
width: 960px;
}
<html>
<body>
<div class="wrapper">
<div class="container">
</div>
<!--end container-->
</div>
<!--end wrapper-->
</html>
</body>
Related
I am using this website as an example. http://imgur.com/xyswjQH Here I have a screenshot of the website in fullscreen. However when I resize the page http://imgur.com/ZAKtsR9 you can see that the page almost cuts off elements instead of jumbling them all around. Is there a way I can achive this cutting off affect in html and css only? If you need my code just ask in the comments.
If your goal is to create a fixed width, you can create a wrapper div and set its width to 800px (just as an example) and it's margin to 0 and auto to Center the div if you would like.
If you'd like to make it responsive you can change width to max-width.
<html>
<head>
<style>
.wrapper {
width: 800px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="wrapper">
<p>Content here!</p>
</div>
</body>
</html>
You probably didn't need to come here for that question haha. All you need to do is set a width on the body or a div.
Cheers!
I want to create an HTML/CSS layout for a page where there are multiple images that poke outside the content area of the page. The layout for the content area is fixed width and centered. I do not want scrollbars to appear if the user's window is as narrow as the content area.
The content area is a container div with a fixed width and margin: auto 0;
Ideas I've considered:
Use CSS 3 Multiple Backgrounds on the <body> tag. The background elements would have to be relative to the body, and wouldn't center with the content area.
Use negative margin or relatively positioned divs. This would make scrollbars appear if people had their browser width smaller than the width of the images that poke out past the content area.
I want the images to be kind of bonus content for people who have their browser windows fullscreen but not seem necessary.
Here's some example HTML/CSS that would simulate this example.
css:
#containerDiv {
width: 910px;
margin: 0 auto;
}
html:
<html>
<head>[...]</head>
<body>
<div id="containerDiv">
<header>HEADER</header>
<section id="contentArea">
<h1>Content</h1>
</section>
<footer>FOOTER</footer>
</div>
</body>
</html>
The scrollbar problem of your second idea could be simply fixed by setting:
body {
overflow-x: hidden;
}
The images would appear as much as they can according to the window size of the client; thus they would look like background, and only appear to those who have a higher screen resolution, without cluttering the lower-resolution people's screens.
Edit:
To get the images as you put in the example, use position: absolute and set their lefts, rights and tops as you see need. You could use a script to check whether the page hit a certain height; and when so, add the next picture you set.
I went to my friend's house to see how my webpage displays on other resolutions, but found that the background image didn't reach the sides. So, I went home and did some research and was told that instead of having my background image in the body tag, I should create a div inside of the body tag before the container div and it would work.
This did work for one of my designs but not in the other - the code was exactly the same, but the images weren't.
I tried adding position:absolute in my CSS and it does show, but it has a strange white border along the top and left hand side.
How can I resolve this issue?
HTML:
<html>
<head></head>
<body>
<div class="background">
</div>
<div class="container">
</div>
</body>
</html>
CSS:
body{
text-align:center;
}
.background{
background:url('images/background.png')no-repeat;
width:100%;
height:100%;
background-position:center;
}
Not quite enough information to really give you a good answer... but the white line on the top and left of the page sound like the natural margin appended to the body tag. If you add this to your css it should remove that:
body {
margin: 0px;
}
Also, the background image "reaching the sides" will be primarily dependent on the image's dimensions relative to the viewing screen resolution and browser size. These factors are out of your control so be cautious where you're using an image in the background of your designs.
I am looking for a css way to hav this layout sport a 100% height div, meaning that the white will trail down to the bottom of the document not the window. I would like to do this without images and without javascript.
I've tried html,body{height:100%} which only applied to the window not the doc.
I've also tried to put a 900px body background image and it was not centered with the container div.
Looking at the live site because the URL is conveniently visible inside your image..
Add this CSS:
html, body {
height: 100%
}
#container {
min-height: 100%
}
You'd need something like
<html>
<body style="height: 100%; overflow: hidden">
<div id="realbody" style="height: 100%: overflow: auto">
... page goes here ...
</div>
</body>
</html>
This way you disable scroll bars on the actual page body, and all the scrolling tags place "inside" the document on the "realbody" div. With suitable styling on #realbody, you can make the backgrounds stretch as you need them.
You can actually force the containing div to continue behind your other divs by using special separator divs with a clear: both; set in them. Like this:
<div id="wrapper">
<div id="left">
Left
</div>
<div id="right">
Right
</div>
<div style="clear:both;"></div>
<div id="footer">
Footer
</div>
<div style="clear:both;"></div>
</div>
Use the where ever you want your wrapper to continue going down.
NOTE: I'm not sure whether W3c says that's good or bad practice, probably bad, BUT it works.
A sticky footer should accomplish this: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
the question is a bit old, but, if you don't want to change body and html, and need an element with 100% height without scrollbar you can use this on the div:
#fullHeightDiv{
position: absolute;
height: 100%;
bottom: 0;
}
Hope this can help someone.
Image explanation: http://img219.imageshack.us/f/skrmavbild20110321kl160.png/
I have a background-image that I want on the top of my page, this image is width 800px and height 400px.
Under this image I want another background-image which will repeat vertical (repeat-y) for the rest of the page.
I have tried the following
<div id="bg-static">
<div id="bg-repeat-y">
<div>
Text goes here
</div>
</div>
</div>
The thing is that I want "The text goes here" to float over both element. (See picture, http://img219.imageshack.us/f/skrmavbild20110321kl160.png/)
What should I do to do this?
You are making this seem too complicated, but it's extremely easy.
This is what you need to do:
Your "infinite, repeated" image will go as a site background, like this:
body{ background: url("your-repeated-image.png"); }
Next, create a html like this:
<body>
<div id="container">
any content, text, whatever goes here
</div>
</body>
And just put your 800x400px image there like this:
#container{ width: 800px; background: url("your-top-image.png") no-repeat; }
While testing it, temporarily use this:
#container{ height: 600px; } /* erase after the content is ready */
I think the solution would be the other way around: have the repeating background on the outside div and the fixed height background on the inside div.
Some code on jsfiddle: http://jsfiddle.net/EBK4C/