I do this by using that pictrure as the background of a big div, then I make many small div inside covering the whole area of the big div, but I think it seems very unprofessional. Is there anyway to divide a picture into may div ??
Yes. Try background-position.
If your image is: big_picture.png, and it is 100px x 100px, then a super-simplistic example of the solution is:
<div class="top"></div>
<div class="bottom"></div>
css:
div {
width: 100px;
height: 50px;
background-image: url(big_picture.png);
}
/* will only reveal the top 50 pixels */
div.top {
background-position: 0px 0px;
}
/* will only reveal the lower 50 pixels */
div.bottom {
background-position: 0px -50px;
}
You can clearly apply this to as many div elements as you like, in a grid.
Related
I am looking to create a layout for my site where a sidebar is fixed at the right side of the viewport with a 30% width (content is to the left of it) until the browser window reaches a certain width, at which point I want the content and sidebar to be centred and no longer grow with the browser window (since it becomes hard to read at extremely large widths). Here is an idea of the html being used:
<body>
<div id=sidebar>sidebar content</div>
<div id=content>articles, images, etc</div>
And here is some of the basic HTML being used to format it:
#sidebar {
width: 30%;
position: fixed;
right: 0;
top: 0;
background-color: gray;
}
#content {
width: 70%;
margin-right: 30%;
max-width: 49em;
}
At this point, when the content gets wider than 49em, it sticks to the right side of the page creating an ever-increasing gap between it and the fixed sidebar. What I would like is to have it reach a max width of 49em, have the sidebar reach 21em (so they are still 70:30) and remain fixed, but have that whole 70em worth of width centered in the viewport.
I also want the background colour of the sidebar to span the entire way from the edge of the content to the right-hand side of the screen (i.e. a containing div that centers both the sidebar and content with a max width of 70em doesn't work since the background of the sidebar would only go to the edge of the containing div instead of the viewport). That one isn't as important because it might look fine to put some sort of textured background on the body element to make it look like as though the page is "sitting" on some textured surface (not ideal, but fine). I just haven't been able to center the sidebar and content while maintaining the sidebar's fixed positioning.
Thanks!
Update: here's a very rough schematic of what I am looking for:
|A|B|C|D|
B is the content area with a max width of 49em. C is the sidebar with max width of 21em AND it has to have fixed positioning. A and D would be the margins (each half of the difference between the viewport width and 70em). Background of D must be the same colour (gray) as the sidebar. Background of A must be white.
This solution meets most of your requirements, but you need to provide the width of the content+sidebar (in this case, I put 70em)
HTML:
<div id="container">
<div id="content">articles, images, etc</div>
<div id="sidebar">sidebar content</div>
</div>
CSS:
#sidebar {
width: 29%; background-color: gray; border: 1px gold solid;
float: left;
position: fixed; right: 0; top: 0;
}
#content {
width: 69%; max-width: 49em; border: 1px silver solid;
float: left;
}
#container {
max-width: 70em;
margin: 0px auto;
}
jsFiddle here. (You can test by just dragging the middle frame left and right)
Something like this:
<body>
<div id="wrapper">
<div id="sidebar">sidebar content</div>
<div id="content">articles, images, etc</div>
</div>
</body>
With CSS that is similar to this:
body { background:url(imageForSidebar.png) right top repeat-y; }
#wrapper {
max-width:1000px;
margin:0 auto;
background:#FFF url(imageForSidebar.png) -66% top repeat-y;
position:relative;
}
#sidebar {
width:30%;
float:right;
position: fixed;
}
#content { margin-right:30%; }
The background image on the body would take care of it going all the way to the edge of the screen. You would use a background image that was large enough to do this, but small enough so that it gets covered by the #wrapper background. The background image on the wrapper works in a similar way, but in this case it is just making sure that the sidebar image always extends to the bottom of the content.
You can add media queries into your css
//your normal css
#sidebar {
width: 30%;
position: fixed;
right: 0;
top: 0;
background-color: gray;}
//media query (you can add max and min width of the sceen or one of both)
#media screen and (min-width:500px) {
#sidebar{
//css you want to apply when when width is changed
}
}
i want a background image that is larger than the content, which will remain centered with the content, but will not affect the layout (meaning no scrollbars to accomodate the background image). the content must be centered using margin: auto; so that the left side will remain flush with the left side of the viewpane, when the viewpane becomes smaller than the content.
I have seen this question asked several times, and have tried quite a few solutions, but none of the accepted answers have actually worked.
Edit to Clarify
This question is still a bit murkey, so I will attempt to clarify with some images showing what I need. In these images, green is the background image, red is the main content, and blue is the browser's viewpane.
A: When the viewpane is smaller than both the background image and the main content, the left side of the content remains flush with the left side of the viewpane, the background image remains centered to the main content, the viewpanes scrollbars will only scroll out to the right edge of the main content (and not to the right edge of the background).
B: When the viewpane is larger than both the background image and content, both remain centered to the viewpane.
C: When the viewpane is the same size as the main content, the background image should remain centered to the main content, no scrollbars should be present.
Updated Answer: I still have spent way too much time on this :-), especially when it ended up so simple. It allows for a background to be sized based on the height of the container, which seems to be different than yunzen's solution. Now does use margin: 0 auto;. Still grows with container height.
View the new answer.
You can view the original, more complex answer which does not use auto margin.
HTML:
<div id="Bkg">
<div id="Content">Content goes here. </div>
</div>
CSS:
#Bkg {
width: 100%;
min-width: 300px; /* equals width of content */
background:url('http://dummyimage.com/400x20/ffff00/000000&text=Center') repeat-y top center;
padding-bottom: 50px;
}
#Content {
width: 300px;
margin: 0 auto;
}
I guess this is what you want
HTML
<div id="content">
content<br/><br /><br/>
content<br/>
</div>
<div id="background"><div></div></div>
CSS
html, body {
height: 100%;
}
#background {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
/* this is the height of the bg image */
min-height: 600px;
z-index: -1;
}
#background > div {
margin: 0 auto;
background: url("http://lorempixel.com/800/600/sports/2") no-repeat 50% top gray;
width: 100%;
height: 100%;
/* this is the height of the content */
min-width: 500px;
/* this is the width of the bg image */
max-width: 800px;
/* this is the height of the bg image */
max-height: 600px;
z-index: -1;
}
#content {
/* these are just some numbers */
width: 500px;
height: 400px;
border: 1px solid gold;
margin: 0 auto;
background: rgba(255,255,255,0.2);
}
Well, if it expands past the browser's window size, it's going to create a scrollbar for the entire window. I wasn't sure exactly what scrollbar you're trying to prevent.
max-width tells it "under no circumstances should this box be bigger than this width." So a box bigger than that will simply expand past the parent's boundaries.
See the jsFiddle.
If I'm understanding the question right, I believe this is what you're wanting.
.main-container
{
height: 1005px;
left: 50%;
margin-left: -560px;
position: relative;
width: 1120px;
}
To hide the scrollbars, you can add
overflow: hidden;
For horizontal only:
overflow-x: hidden;
Try this then:
<div id="wrapper" style="position:relative;margin:auto;width:200px;height:200px;">
<div id="image" style="position:absolute;top:0px;left:-100px;width:400px;height:400px;background-image:url(your_bgimage);background-repeat:no-repeat;background-position:top center;">
<div id="content" style="position:absolute;top:0px;left:100px;width:200px;height:200px;"><p>
<p>/* YOUR CONTENT */</P>
</div></div></div>
For some reason I couldn't get the z-index work, but if you can, you can put your content in the wrapper too, and content is not needed.
Given your original diagram I assumed that the background image was intended to be that - an image, possibly hi-res, rather than a repeated pattern. You may want to play with css3 background-size property which is handy for this specific purpose. It is well supported by modern browsers and regresses reasonably well if you have to support IE8 and under.
body {
background-image:url(/*nice higher res picture*/);
background-size:cover;
background-repeat:no-repeat;
}
http://jsfiddle.net/YyzAX/
Edit 2: It seems clear that no one seems to be able to understand what I'm asking, so I'll try to illustrate it;
The area in the center has the id #navigation. This has the following CSS properties,
width: 960px;
margin: auto;
background: #e4bd04;
The reason it has a width of 960px, is because I would like the links in my navigational bar to remain within a 960px limit. I'd also like them centered, so I apply margin: auto. However, this means that my background only flows for 960px. I'd like the background to flow for the entire window width (100% of page), so that users with larger screens don't end a huge chunk of white space at the top.
In order to prevent this, I nest #navigation into another id, #navouter, to which I apply width: 100%; and background: #e4bd04;, so that the background now appears to extend for the entire width of the window.
Is there any way to do this without using two elements as I've done?
I've undestood, you don't want to have 2 div to center another div with fixed width, isn't it ?
I don't think that you'll love it, but this is a solution :
.nav {
width:960px;
position:absolute;
left:50%;
margin-left:-480px; // width / 2
}
<body>
<div class="nav">Test content</div>
</body>
Result for 300px div : http://jsfiddle.net/7GTCc/1/
Or another, really ugly (lol) :
.nav {width:960px;}
<center>
<div class="nav">Test content</div>
</center>
Edit regarding your illustration
"Is there any way to do this without using two elements as I've done?"
No :-)
But if you only want the background to be 100%, don't specify a background (color or url) to your #navigation.
Last try to answer, test this :
#navigation {
min-width:960px;
text-align:center;
}
Demo here : http://jsfiddle.net/7GTCc/3/
you could use min-width property , dont know what exactly you are looking for
<div style="min-width:960px; width:100%"></div?
Yes, this is easy to do without additional markup. Use the ::before pseudo-element for the expanding part of the navigation.
Demo: http://jsfiddle.net/ThinkingStiff/eAf7w/
HTML:
<div id="nav">navigation</div>
CSS:
#nav {
background: #6D7B8D;
height: 40px;
margin: 0 auto;
width: 400px;
}
#nav::before {
background-color: lightblue;
content: '\00a0';
display: block;
height: 40px;
left: 0;
position: absolute;
width: 100%;
z-index: -1;
}
I'd like to put an image as the background of a webpage but have it offset by some number of pixels with respect to the center.
How can I do this?
I want:
background-image: url("bg.png");
background-position: 25% center;
background-attachment: fixed;
background-repeat: no-repeat;
but instead of 25%, I want something along the lines of "center - 50px". Is there any solution to this?
I believe I have a solution that achieves what you're wanting:
A background image (specifically a page background) offset by a number of pixels with respect to the center.
This works using only HTML & CSS - no javascript required.
Update
This can now be easily achieved using background-position and calc as a CSS unit.
The following CSS will achieve the same outcome as the previous solution (see "Original Solution" below):
#background-container {
width: 100%;
background-image: url("background-image.png");
background-position: calc(50% - 50px) 50%;
background-repeat: no-repeat;
}
Note: Don't use this method if you require support for legacy versions of IE.
Original Solution
#background-container {
width: 100%;
left: -100px; /* this must be TWICE the required offset distance*/
padding-right: 100px; /* must be the same amount as above */
background-image: url("background-image.png");
background-position: center;
background-repeat: no-repeat;
}
What this does is moves the entire container horizontally by the amount specified (in this case to the left 100px). Because the background image is centered relative to the container it moves to the left with the container.
The padding fixes the 100px of blank space that would appear to the right of the container as a result of the move. Background images show through padding). Because browsers use the border-box value instead of the default content-box value to calculate background sizing and positioning, the background image is effectively moved back to the right 50px - half the distance of the padding. (Thanks to ErikE for clarification).
So your offset/padding must be twice the required offset distance.
I have prepared a sample page for you here:
http://www.indieweb.co.nz/testing/background-offset-center.html
Have a play with resizing the window. You will see that the purple and blue background image (laid over a deeper background image marking the center of the page) remains exactly 50px (half the offset/padding distance) to the left of the page center.
Using background-position: center; is the same as background-position: 50% 50%;.
So you can use calc to do some simple math in CSS as a replacement for any length value, for example:
background-position: calc(50% - 50px) 50%;
Will center the background image, but shift it 50 pixels to the left.
So you want it centered by shifted 50 pixels to left. I would add the 50 pixels to the image in the form of a transparent space, unless you are dealing with absolute dimensions.
There's no obvious CSS answer. You would either need to use JavaScript to calculate values or do something tricky. You can try keeping the background-position:25% center and adding position:relative;left:-50px or margin-left:-50px but those might not work depending on how you are using the DOM element.
The only method I've found for this is to have the background inside another div, then use javascript to reposition ...
<style>
body {
width: 100%;
overflow: hidden;
}
#bg {
position: absolute;
background: url(images/background.jpg) center top;
}
</style>
<script>
function recenter(){
var $pos = $('#content').offset().left;
$('#bg').css('left',$pos-580);
}
recenter();
$(window).resize(function(){ recenter(); });
</script>
<body>
<div id="bg"></div>
<div id="content">
blah
</div>
</body>
if you know the width of the image you can use this:
background-position: (BgWidth - 50)px 0px;
Note that you can't have it like that, i.e. you need to calculate (BgWidth - 50) and then write the number there.
If you don't know the width you can use Javascript(with-or-without jQuery) and then use this:
$(#ID).css('background-position', (BgWidth - 50)+'px 0px');
Nice answer Luke,
one more thing, if your block width is larger than screen resolution, your must put your block in another container and do this:
#container{
position:relative;
overflow:hidden;
}
#shadowBox{
width: 100%;
left: -100px; /* this must be TWICE the required offset distance*/
padding-right: 100px; /* must be the same amount as above */
background-image: url("background-image.png");
background-position: center;
background-repeat: no-repeat;
position:absolute: /*this is needed*/
}
My answer gotta be too late but somehow I've found another solution.
padding-left: 100px; /* offset you need */
padding-right: 100%;
or
padding-right: 100px;
padding-left: 100%;
The examples have the same effect.
If I have an image with a div wrapped around it, how do I make it only show a certain section of the image?
<div id=#container"><img src="hello.jpg" /></div>
Lets say I want the image to only display a width of 200px and a height of 200px. I also want it to start showing it 10pixels from the top, and 30 pixels to the left.
You could put it as a background-image for the div, make it a block with set width/height & use background-position to get the position you wanted.
If your <div id="#container"> is absolutely positioned, you can use the clip property:
#container {
/* top, right, bottom and left points of the rectangle */
clip: rect(10px, 230px, 210px, 30px);
}
The above would create a rectangular clip with its top-left corner 10px from the top and 30px from the left. Its bottom-right corner is 210px from the top and 230px from the left (which gives you your 200px of width and height).
You can read more about it in this article.
#container {
width: 200px;
height: 200px;
overflow: hidden
}
#container img {
margin: -10px 0 0 -30px
}
#container {
padding-top : 10px;
padding-left : 30px;
}
#container img {
width : 200px;
height : 200px;
}
Image won't be stretched:
#container img {
max-width : 200px;
max-height : 200px;
}