I want to center all the content of a website with a fullscreen background even when resized with CTRL + scroll mouse button on windows.
Website exemple : http://www.benzinga.com/
If you press CTRL and use the scroll button on your mouse, you will see that the background of the header stays full screen, but the content stays centered.
Is it possible to do that only with HTML and CSS?
Can you show me how?
I think this is what you are going for. The width for the content div should be in terms of px rather than % in order for it to properly zoom.
Here is the HTML:
<body>
<div id="content">
</div>
</body>
Here is the CSS:
body {
background:url('http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg');
background-size:cover;
}
#content {
background-color:red;
width:1000px;
height:500px;
margin:auto;
}
My solution would be to use Bootstrap's container div.
Once you include Bootstrap,
Simply use:
<div class="container">
...
</div>
The content will stay within that, in the center of the page, very similarly to she site you linked, even when you zoom in.
Related
I'm looking for some help in placing a 'close' button to the top of a popup div without having it move around when the screen is resized. I've tried setting absolute and relative positions but it doesn't seem to work - it moves around when I resize the window.
Here is the link: http://jsfiddle.net/R2UHm.
I'm not sure why the jsfiddle isn't showing it exactly the way I want, but I did only clip out that small section.
I attached a link to a screen shot of what I'm looking for. http://i.imgur.com/Eh3Izmw.jpg
.
Wrap the close button inside another div
<div class="overlay-bg">
<div class="close-btn-wrapper">
<button class="close-btn2">X</button>
</div>
<div class="overlay-content">
// rest of the content
Css
.close-btn-wrapper{
position:relative;
width:700px;
left:30%;
}
.close-btn2{
position:absolute;
top:0;
right:0;
}
Change the top and right values as u need.
I'm using Twitter Bootstrap. Here is my problem: I need to set div's background color,which should be full screen, but when I try :
and my HTML:
<div class="rowHome">
<div class="container">
<div class="row">
...
</div>
</div>
</div>
and full CSS:
.container{
width: 960px;
}
...
.rowHome{
margin-top:10px;
width:100%;
background-color:#400143;
}
it look like this, when I resize page:
but when I scroll right I see the bug:
Can someone tell me where is my error ?
This type of problem is mostly come when the parent have flexible width & his child have fixed width. Write this in your css:
body{
min-width:960px;
}
Check this for more iPad background for div blocks not spanning entire width of screen
I am working on this page here for a client of mine http://sw6.us/scott/index.html
Notice the site is all based within a div, the problem is the scroll bar that is produced because the text is to long. I have edited my CSS and changed "overflow" to hidden instead of auto but this just makes the text run off the screen and you can not scroll at all.
Here is my refined HTML code
<div class="main">
<div class="blk">
....
</div>
<div class="navbar">
....
</div>
<div class="programs">
.....
</div>
<div class="blk2">
...
</div>
</div>
</body>
</html>
The site is built out of the .main div
How can I make that scroll bar appear at the far right of the browser and scroll the .main div?
If this is not possible how can I achieve this exact look with a set up that will place the scrollbar on the right edge of the browser? The reason I am doing it like this is because the client want's the site looking exactly like his .pdf mock up.
Thanks!
If you want to scroll the main div change the CSS as follows...
html, body { overflow: hidden; }
div.main { overflow: auto; }
You should also set some bottom margin to leave some space for the shadow at the bottom...
Maybe posting the PDF would help better understand for me...
try this:
<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: scroll;></div>
And if you want to hide horizontal scroll: overflow-x:hidden ;
i have a small html page in the following format
<html>
<head></head>
<body>
<div id="wrapper">
<table></table>
</div>
</body>
</html>
the problem I am having is that its not showing everything.. it scrolls down up to a point.. the background of it is a photoshop .png image and on top of that background i created the table within the div..
Everything else is in place and show appropiately, its just the end of the page is not showing.. doesnt scroll down completely.
The background at the end has a "Designed by [name]" but it is not showing this part.. it scrolls down up to just before this part of the png picture..
Any ideas what I could be missing?
Based on the limited information you provided, my guess is that the height of your page's content is not long enough to justify showing that part of the background. The page only scrolls to the length of the content, not the length of the background.
Fix the height of your wrapper div by making its min-height equal to the height of your image. Assuming your image is 500px in height, you CSS would be the following:
<style type="text/css">
#wrapper {
min-height: 500px;
}
</style>
I have an image on the top page that's 960x200px wide. It's in a div tag. What happens is when I scale the page by pressing ctrl+scrolling, the image scales out of the page, off the screen, and gets cropped off. How can I make it that when I scale the page, like amazon.com or other websites, the page doesn't become cropped and instead, I get an horizontal scroll bar at bottom of the browser?
/* css */
#header { background-image: url('image.gif'); }
<!-- html -->
<div id="header"></div>
This is happening because your image is a background-image.
Therefore the width of the image is not being calculated as part of the width of the page.
If you want this not to happen, make your div#header explicitly 960px wide.
You need to make the header image part of the HTML code like this.
<div id="header">
<img src="image.gif" width="960" height="200" />
</div>