I have a background image in the body of my page set to bottom right. But when the content within the page stretches beyond the screen the background image stops at the edge of the screen instead of where the actual content ends.
Here's the relevant css:
html, body {
margin : 0;
padding : 0;
font-family : arial, sans-serif;
background-color : #15242d;
height: 100%;height:auto;
min-width: 100%;width:auto;
font-size: 15px;
color: #959595;
}
body {
background-image : url(images/body_bkg.gif);
background-repeat: no-repeat;
background-position:right bottom;
}
Whats the best way to get around this issue?
If you don't already have one, you need to wrap the content of your website in a containing div which will expand to the size of the content. Then you need to apply the background image to that div, instead of putting it on the body.
Related
I'm trying to create my page so that there are background images covering the side of the page while having nothing in the center as that's where the content will be. I want these images to stay fixed where they are, even if the user resizes the window so they're off-screen. I know how to at least set up the images but not how to keep them in place.
I think one example I can think of is how http://www.halolz.com/ is set up.
Usually the way this is done is by applying a background image to the HTML body and then placing all the content of the page into a container that's centered on the page.
HTML:
<body>
<div class="container">
My content
</div>
</body>
CSS:
html, body {
padding: 0;
margin: 0;
}
body {
background: red; /* change this to your background image */
}
.container {
background: white;
width: 400px; /* adjust this to the proper width */
margin: 0 auto;
}
JSFiddle: https://jsfiddle.net/13xaqh6z/
I have a background image on the html and the body tags as I have a repeating background on the html that I want to grow in height with the content. On top of this is the body background image - which is the main background image (that appears to dissolve into the html image, but it's just overlapping it).
This is working fine EXCEPT for when someone does a browser zoom. Oddly, the HTML background begins to creep over the body background on the right hand side.
html {
margin: 0; padding: 0; border: 0;
background: #000000 url("menu/images/redline2.jpg") repeat-y center;
}
body {
margin: 0; padding: 0; border: 0;
background: url("menu/images/about_bg2.jpg") no-repeat center;
}
Link to example of the issue: http://www.bitchofrome.com/about/about3.html
This is a common issue, and there's a simple solution for it. It often happens when you have a 100% width container with a background color or image. If you narrow down the browser window (or zoom) and then scroll right, the background has disappeared (as it doesn't get redrawn). The fix is to set a min-width on the outer container equal to (or greater than) the width of the inner elements.
In this case, what's needed is this:
html {min-width: 1100px;}
I created a <div> first thing in the <body> to draw a top line at the top of the page:
<body>
<div class="bordertop"></div>
.....
</body>
and the style:
body {
font-family: Helvetica, Arial, sans-serif;
-webkit-text-size-adjust: 100%;
margin:0;
}
.bordertop {
background-image: url(../images/top_border.png);
background-repeat: repeat-x;
}
However, the top_border image doesn't appear unless I write some text inside the <div> but I don't want to. How could I fix this?
Since the div is empty, there's no content to push it "open" leaving the div to be 0px tall. Set explicit dimensions on the div and you should see the background image.
.bordertop
{
background-image: url(../images/top_border.png);
background-repeat: repeat-x;
height: 100px;
width: 100%; /* may not be necessary */
}
You might need to set the css width and height of your <div> element to whatever size you want
.bordertop {
background-image: url(../images/top_border.png);
background-repeat: repeat-x;
width: 200px;
height: 100px;
}
Give the div a height:1px. That should work. Otherwise your div is 0px high, meaning you won't see anything.
You could also give it padding-top:1px
Another thing you could do is to set the background-image of the line on the body in your CSS. This is assuming the line is the entire width of the body.
See demo
As the answers above me suggest ^^' it's because it has virtually no size, you need either to put content inside to resize it or to set width/height or padding in css bordertop class, or you can put another empty inside it with set size. I was going to skip this answer since there are already answers but I just wanted to add that width/height is not your only option.
On a side note, oh man, people here posting so fast I sometimes wonder if its a race and what is the prize, there must be some, I guess helping other is itself great prize. :) When I was starting to type this there was no answer yet.
The best way I have found is:
for landscape:
width:100%;
height:0;
padding-top:[ratio]%;
for portrait:
width:[ratio]%;
height:0;
padding-top:100%;
You need to determine which side is longer and accept this dimension as 100%
then calculate [ratio] - percentage of shorter dimension in relation to 100% longer dimension. Then use the one of solutions above.
I had the same problem for quite some time, my solution was giving the style lines of: min-height. This opens the div to the height given if there is no elements inside. The height can get bigger with the more elements inside, but not smaller.
Example code:
.fixed-bg {
/* The background image */
background-image: url("img_tree.gif");
/* Set a specified height, or the minimum height for the background image */
min-height: 500px;
/* Set background image to fixed (don't scroll along with the page) */
background-attachment: fixed;
/* Center the background image */
background-position: center;
/* Set the background image to no repeat */
background-repeat: no-repeat;
/* Scale the background image to be as large as possible */
background-size: cover;
}
code gotten from https://www.w3schools.com/cssref/pr_background-attachment.asp
If it is the only div element in the body use the following style to to make it occupy the full-width.
.bordertop {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image:
url('../images/top_border.png');
}
I couldn't get my background showing in the div even with the width set up. Turns out i had to put "../" in the url section then it showed the picture i was struggling for quite a while.
left {
width: 800px;
height: auto;
min-height: 100%;
position: relative;
background-image: url("../img/loginpic.jpg");
background-size: cover;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background-color: crimson;
}
Otherwise, you can just open a <p></p> and in styles, remove the default margin length, that's margin: 0; and add height: 0.1px which doesn't consume much space, so it'll work.
Note: it'll work properly until it's not zoomed out more than 50%, so make sure of the use case before you apply it to the body.
I'm trying to build a webpage with 3 columns. The one in the middle (centered) needs to have fixed width (1000px) and the other 2 with no specific width. When the user resizes the window only the left one and the right one should be resized. Is this possible?
Regards
Yes this is possible
You should create one maindiv in your css and set the background to repeat in your body like shown below and give it a background color/gradient/whatever you like. I usually use a 1px width gradient picture.
Setting the same background color and image in your div as in your body will help you keep an even background depending on your design (i.e. You have a design that has a margin at the bottom of 20px to create a clear space, then the background will follow through instead of showing white)
STYLESHEET.CSS
body {
margin: 0px;
background-position: 0px 0px;
background-repeat: repeat-x;
background-color: #03255d;
background-image: url(../img/bg_gradient.gif);
}
#MainDiv {
position: absolute;
width: 1000px; /* width of middle column */
z-index: 1;
top: 0%;
left: 50%;
margin-left: -500px; /* should be half and minus of width to center it */
background-color: #03255d; /* set background color same as body */
background-image: url(../img/bg_gradient.gif); /* set background image same as body */
}
Now in your HTML after the body tag you start with your MainDiv and before the body end tag you close the MainDiv
INDEX.HTML
<body>
<div id="MainDiv">
Your HTML here
</div>
</body>
Now when you resize your browser, it resizes the background and your middle column stays centered
Live example of background issue: http://webid3.feckcorp.com/
As you can see the gray stripped background image flows over the bottom of the footer and leaves about 115 extra pixels below the footer. The div that contains the background image is <div id="home_page_back"> and is contained within the body element, both of which are set at a height of 100%.
I want the background image to hit the footer and then stop … not go any further past it. Can someone please advise?
Also - I do not want to place the image as a background of the body.
Cheers!
Copy of the CSS:
body {
margin: 0px;
padding: 0px;
height:100%;
background-color: #f3f3f3;
font-family: Arial;
font-size: 12px;
color: #333333;
}
#home_page_back {
background:#9C9D9B url(http://templatemints.com/rttheme13/images/background_images/abstract_background7.jpg) top center no-repeat !important;
display: block;
width: 100%;
height: 100%;
z-index: -1;
position: absolute;
}
I think it's the way you structured your markup, actually. Place the content below
<div id="home_page_back" style="display: block;"></div>
inside of it, remove the 100% height rule and replace it with overflow:hidden. The content will expand that div out to see the background image. As it stands now, you've made it a separate, absolutely positioned div and given it 100% height, which makes it at big as the background image you have inside it, and it expands beyond any of the content coming after it because that content now ignores it in the layout (because it's positioned absolutely.) At least that's the theory I'm going with :)
If you want the height 100% to work like that, give the body element 100% height, and the html element also 100% height.
Add overflow: hidden; to your body css.
And please, try validating your html before doing anything else and before looking for help.
#feck; may you have want an sticky footer check this answer .
Use:
#home_page_back {
background:#9C9D9B url(http://templatemints.com/rttheme13/images/background_images/abstract_background7.jpg) top center no-repeat !important;
padding-bottom: 30px;
}
Wrap "home_page_back" div around "content" div in the html instead.
Remove margin-top from #footer css.
Then, if you want it, you can add the space after the footer.