I have the following HTML: A sidebar with a color full height an left side outside of the page of a color, so i have an image to cover the left side of the page and goes to the full height, but in chrome it doesnt cover the full height of the page with repeat-y;
my css: (doesnt work in chrome)
body {
background: #000 url(../images/bar_bg.jpg) repeat-y;
}
#container {
height: 100%;
}
I want to achieve this:
Is there is another way to do it without images or with CSS3 maybe?
Your html and body are not covering the entire viewport, use...
html, body {
height: 100%;
}
I would have to do some work with the code, but this sounds like the margin-height needs to be set to zero.
solved with
html, body{
min-height:100%;
height:auto;
}
Related
I wanna make this calendar height:100%.
I tried to change css:
.calendar{
height:100% !important;
}
.c-grid{
height:100% !important;
}
.c-event-grid{
height:100% !important;
}
But it doesn't work with this css. I want it to be responsive 100%. Currently it is set with specific height.
Here is the jsfiddle.
By inspecting the fiddle, you can see that the reason for the calendar not stretching to the bottom is that it's actual parents don't.
If you add the following, it does as expected:
body, html {
height: 100%
}
body height is 0.Try this. It works in jsfiddle.
body{
height:100vh;
}
.calendar{
height:100% !important;
}
I created a page in Wordpress. I need the #content to be 100% width and height with a background image that resizes as the browser window changes.
Any recommendations how to achieve this?
Erik
In your style sheet:
#content {
width:100%;
height:100%;
background:url(path_to_your_image.png) no-repeat top center;
background-size:100% 100%;
}
The height working might be tricky. You could just add to your style sheet file as well...
html {
height:100%;
}
or if that doesn't do it try this...
body, html {
height:100%;
}
..and hopefully it doesn't cause any other problems.
on my css code I set the background-image:url with
height:100%;
but as a result, the range that the 100% capture is only the size of the screen.
if the page have a scroll, all the page line needed to be scroll doesn't appear to have those background.
Any suggestions?
NOTE: my element size changes dynamically.
body
{
background-image:url('paper.gif');
background-repeat:repeat-y;
}
This is, because 100% means 100% of your parent element. First of all, make sure your document is actually 100% of your browser window.
html, body {
width: 100%;
height: auto !important;
height: 100%; /* for older browsers */
min-height: 100%;
}
I have the following problem:
When I print a certain page from my website, and the content of this page doesn't fill all the paper, the background image cuts there. But what I need is to have the background image repeated through all the paper, no matter how much of the paper is taken by the contents.
I'm so sorry, I know it's a little odd this question, so I had a lot of trouble trying to explain it.
Thanks a lot to anyone who can help me.
Use this..:
body
{
background-color:#454545;
background-image:url("background.jpg");
background-repeat:no-repeat;
background-attachment: fixed;
background-size: contain;
zoom: 100%;
}
paste this in your css, it is "attachment fixed" that you are looking for...the background image will never scroll with rest of the page and also you can apply "fixed" to other elements to make them scroll-free.
If the background is attached to the BODY element and it is set to background-repeat: norepeat in your CSS, try
#page {
margin: 1cm; /* or any other small value, maybe even 0 */
}
#media print {
body {
background-repeat: repeat;
}
}
Let's say your image is right in the body tag, your only chance is setting
html, body {
width: 100%;
height: 100%;
background: url(../bg.png) repeat 0 0;
}
But you will never be able to have the background stretch all over the paper as the browser sets a margin on every border. This can be set to 0 by the user in the printing dialog, but can't be controlled by the css / you.
Here's what I'm trying to achieve:
I have a centered lay out with a sidebar on the right and a container wrapping the sidebar and the content.
The container however has a grungy look and the borders extend out. The content is 960px and the backdrop for the content is 1200px.
When I center it using the normal margin-right/left auto method it is centered but when someone with a browser smaller than 1200px visits the site it will be pushed off to the side.
Since the content in the page will be dynamic using an absolute div for this would not give me the result I'm looking for since it won't resize if there is more content inside of it.
Any solutions to this issue or am I going to have to get my hands dirty in javascript?
Link to an example: http://duedate.wordtgetest.be/TEMP_LAYOUT/
If that's an option:
Place the image you're currently using in the 1200px wrapper in the body-Tag and use
background-position:top center;
background-repeat:no-repeat;
and just remove the wrapper
body {
background-image:url(bigBackdrop.jpg);
background-repeat:repeat-y;
background-position:top center;
}
#content{
width: 960px
margin:0px auto;
background-image:url(bigBackdrop.jpg);
background-repeat:repeat-y;
background-position:top center;
}
That should to the trick.
Here's what you want to achieve:
http://www.fabsn.de/trash/stackoverflow/ThomasVanNuffel/index.htm
You don't always need to use a container div to center content with a background. You can just as easily apply margins to the body element and use a centered image. Something perhaps like this:
body {
margin: 0 auto;
width: 960px;
background-image: url(myimage.png);
background-repeat: repeat-y;
background-position: top;
}