I have a large div housing my background image. Generally, it will be centered with the sides going off the screen. Because it is background, I don't want scrollbars to show up on the browser- is there a solution here?
Thanks
EDIT: Let me clarify based on the answers:
I have a large image that extends beyond the browser's boundaries, but that I need to assign to a div background or img instead of the body background because I'm manipulating it w jquery, etc.
I know it is not possible for a div's background image to extend beyond its borders.
I also can't use an img or nested div with overflow:hidden because that would hide the overflow, when all I want is for it to not trigger scrolls, i.e. be ignored physically by layout engine but still be shown visually, just like an overflowing body background would.
I just ran into the same circumstance as you do.
After a little experiment I found that it is caused by the wrong value the CSS property 'position'.
When I changed the position setting of the div from 'fixed' to 'absolute', things go as exactly what you want.
This worked for me; I recall learning that it didn't work in Opera, but that was quite some time ago.
html, body { overflow-x: hidden; }
Based on the additional info I came up with this example. The image is the background of a div that fills the whole visible area and pretty much acts just like it's the body's background image (tested in firefox). You could even scroll around the image by modifying the background-position attribute.
<html>
<head>
<style>
#test {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-image: url('http://farm5.static.flickr.com/4121/4805074237_6cf5880f75_o.jpg');
background-position: 50% 50%;
overflow: none;
z-index: -1;
}
</style>
</head>
<body>
<div id="test">
</div>
Here's some other stuff in the body of the page.
<div>
and some stuff in a div in the body of the page.
</div>
</body>
</html>
Related
I'm trying to make a page with a fixed header using material design lite. The problem is that I can't get the entire space of the page-content div.
Suppose I wanted to paint red the whole page except for the navigation bar. This works on Firefox:
<div class="page-content" style="height:100%">
<div style="background:#ff0000;height:100%"></div>
</div>
codepen : http://codepen.io/anon/pen/qONpXQ
This exact same codepen doesn't work in Chrome. How can I get the whole space in Chrome? I don't really care if the solution breaks the page in Firefox.
I created a different solution. The problem with using vh to set a content container's height is that if the content becomes a lot it will overflow the background color since the div is now a fixed height.
In this code pen I have created a "background-color" using a pseudo element which allows the content to scroll as usual but have the background still.
http://codepen.io/mcclaskiem/pen/YyWYoP
.page-content{
background-color:red;
height: 100%;
width: 100%;
&:after {
content: "";
height: 100vh;
width: 100%;
background-color: red;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
}
For some reason "page-content" on chrome doesn't work with percentages, no matter what I do. My advice to you would be to either use the parent div for your content, or to define the height of "page-content" in ems or pixels.
I personally have a similar issue right now and I honestly can't get it solved
Edit: mcclaskiem solution works better try out this codepen
I'm trying to change my site in a way so that all text is in one page instead of different dirs. In the original the partly transparant background of the container div is scrolling along with the page because otherwise the text would scroll over it. The new page is longer so I thought I would set the background to fixed and just redesign it a bit. But now when I scroll at some point the background disappears. I can't find what is causing this. I'm still learning the ins and outs of using divs, so please, if you know what's causing this, explain it to me in words I understand.
You should to remove height: 100%; from your #home element in your css styles.
Set the background image to another div (#back) rather than to #home.
HTML
<body>
<div id="back"></div>
<div id="home"></div>
</body>
CSS
#back{
position: absolute;
background-image: url('image.jpg');
top: 0;
bottom: 0;
left: 0;
right: 0;
}
I have set up some background div's to theme a blog I am making. I am using 3 colors for the heading, a grey background, and I am wanting to add a texture to the background. I have the semi transparent image I want to tile, but I am not sure of the best way to have this work. I do NOT want position: fixed; on the div containing the image, so that it will move as you scroll.
Example code:
http://jsfiddle.net/YPXmT/
Is there a way to achieve this while not having scroll bars? (Note, I don't want to get rid of scrollbars, as content may require scrolling.)
Going from your example fiddle, you were most of the way there. All you have to do is make your backgroundTexture div height and width 100% instead of the static pixel values you used:
#backtexture {
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
background : url('http://static.tumblr.com/wyzt2fm/Hq8mhgfry/hp_asset_diagonalline.png');
}
MORE SIMPLE UPDATE:
Simplicity is best most times.
All you should need to do is add:
body{
position: relative
}
Don't bother making the container div and rearranging the elements as below, just making the body's position relative should fix this for you.
UPDATE: (Use update above, keeping this for posterity)
As per the comments below, with the code above any content that makes the window scroll beyond the visible space will not include the background. This is because the div is set to position: absolute and height/width: 100%. The div is getting sized to the size of the viewable space, but any content that extends beyond that will cause the background div to look like it has stopped. To fix this problem you just need to tweak your HTML and CSS a little bit more. Instead of the CSS above use:
#backtexture {
width: 100%;
height: 100%;
background : url('http://static.tumblr.com/wyzt2fm/Hq8mhgfry/hp_asset_diagonalline.png');
}
Notice we removed the position:absolute and overflow:hidden. Next we change the HTML so that the background isn't just an empty div placed on the page, but instead used as a container for all other elements on the page:
<div id="backtexture">
<div id="redtop"></div>
<div id="orangetop"></div>
<div id="yellowtop"></div>
<div id="wrapper">
</div>
And that should do it.
Forked fiddle: http://jsfiddle.net/digthedoug/pVxSq/
I want to make a header like http://www.chacha.com (doesn't move, is about that wide and that height, and able to fit divs inside it and also has to be an image)
I am starting off with a blank html document and a blank css page, so there I haven't currently written any code.
I've been trying two days straight to do this now so I would really appreciate any help anyone can provide.
I have gimp so if anyone could also give me image dimensions for a perfect header and perfect background size I would appreciate it even more.
CSS:
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 10px;
background: url(yourimage.png) repeat-x;
}
<!--html -->
<div id="header"></div>
That should give you a starting place, I can't tell you more without seeing exactly what the layout's supposed to be.
The CSS property you're looking for is position: fixed which will position the element relative to the viewport. This is good breakdown of positioning: https://developer.mozilla.org/en-US/docs/CSS/position
In this specific case, what you've got is an element with styles roughly along these lines:
#header_id {
position: fixed;
width: 100%;
height: 35px;
}
You don't have to set the height, but unless there is content in the fixed element, it will collapse if there is no height specified. They also appear to have put a drop-shadow on the element toget the neat floating effect.
If you want to have an image inside, you can just put the <img> inside the header element, or use it as the background-image url in the CSS and position it with background-position (see also: https://developer.mozilla.org/en-US/docs/CSS/background-position although the compatability table at the bottom is important if you want to do anything too specific with this property).
You can do this with any block-level element (or any element with display:block set on it). In your example they are using the HTML5 <header> tag; a <div> would work, too, if <header> wasn't appropriate for your page.
I would recommend using the Firebug addon with Firefox (or similar developer consoles with other modern browsers) -- you can right click on an element on the page and select 'Inspect element' from the dropdown menu and get a breakdown of both the markup and styling to see how other websites are constructed. Very useful for when you're browsing the internet and you see something and think, 'that's a neat trick, how does it work?'
FOR FULL WIDTH FIXED HEADER
header {
width:100%;
background:green;
height:60px;
margin:-8px;
position:fixed;
}
FOR NONFULL WIDTH FIXED HEADER
Create a div and set width and height (you can also set it left or right by float:left, float:right)
then in this div put the code above but without margin:-8px; and change the width to the width that your div has.
Here is a test
I've been having problems with my DIV layers - the text goes beyond the DIV footer image, but it's not entirely the DIV background's fault 'cause it DOES repeat... Up to a certain extent. :( I can't seem to figure out how to force the text to stop overextending past the footer DIV tag WHILE keeping the DIV background going.
My "container" element houses the images and the other two elements. The "main" element is where the text goes, and the "footer" element is the image that comes after the end of the text.
In this image here, the text goes over the footer image - green arrow is to show where the footer image starts, red arrow is to show where I'd like the text to stop. The background image in the container works for awhile but then stops, so I suppose it doesn't expand correctly...??
I tried to play around with the code to try and fix it - from trying to add padding-top/bottom, to adding the repeating background stretch in the body part, to playing around with the position properties, to trying out the sticky footer (except my layout is only one column... the navigation is part of the layout in the CSS), I just can't seem to get it right.
This is as best as I can get it. :( Do you guys have any helpful solutions and/or tips?? Thanks so much!
Link: http://bubble-wrapped.net
#container {
position: absolute;
width:1057px;
height: 100%;
background-image:url(layout/bw-div.png);
background-repeat: repeat-y;
border:0px;
text-align:left;
padding-bottom:50px;
}
#main {
position: absolute;
top: 256px;
left: 126px;
width: 830px;
margin: auto;
}
#footer {
height: 358px;
width: 1057px;
bottom: 0;
position: static;
background: url(layout/bw-footer.png) no-repeat;
}
It looks like you've set the footer to a set height, which is why the text is overflowing.
If you're find with cut-off text, try adding a CSS property to the footer: overflow:hidden or overflow:scroll.
If you don't want overflow, then try removing the height property from the footer or setting it to height:auto or something similar.
Has to do with position: tag & height: tag
I suspect it has to do with the element within the container and not just the container.
It would help if you would post most of your code so we can see if other things break it.
Your question doesn't really say what your looking to do, which doesn't help us help you.
If its anything like Possible same situation & answer #StackOverFlow
Hope this helps you!