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>
Related
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.
I have a <div> positioning issue on single-page web design. To be more specific — I can't find a way to fill the background properly, using the <div>s.
For some reason, the <div>s won't fill the background as I want — the background always stays visible (on left/right and top/bottom sides of the <div>s).
What I'm trying to achieve:
My entire page is a single-page website. The page is composed of 5 rectangle <div>s, "touching" each other in a vertical fashion (0 pixels of background between them). I don't want the background to be visible at any part of the page.
I want the top <div> to fill the upper part of the screen ("touch" the browser's upper menu) and the right/left sides.
I want each one of the 3 middle <div>s to "touch" the left and right sides of the screen (and of course touch the two <div>s above and below, without any space between them [no background seen]).
I want the bottom <div> to fill the lower part of the screen ("touch" the browser's lower menu) and the right/left sides.
I've tried to change the position value on the CSS part. The outcome was always a "twisted" version of the page.
My HTML code:
<div id="page1" align="center">
<a id="about"></a>
</div>
<div id="page2">
<a id="portfolio"></a>
</div>
<div id="page3">
<a id="Dream"></a>
</div>
<div id="page4">
<a id="contact"></a>
</div>
<div id="page5">
<a id="Love"></a>
</div>
My CSS code:
#page1{
height : 1000px;
background-color: #4c3719;
}
#page2{
height : 1000px;
background-color: #9a8479;
}
#page3{
height : 1000px;
background-color: #ddbad8;
}
#page4{
height : 1000px;
background-color: #ddd28d;
}
#page5{
height : 1000px;
background-color: #ed9aa9;
}
Write before all CSS code this
* {
margin:0;
padding:0
}
If I correctly understand this may help
I need to create a row for a front page (like a slider) with an image where there is a man and behind him is a gradient.
the image is as it is, centered in container (width 1170px) and that works fine but i need to make a row behind the image to go full 100% for larger resolutions. I am using bootstrap 3.
The way I see it, the background 'row' div should have a dark color from left to center, and from center white color should go to the right.
I dont believe a gradient on row should work because of the resizing hm?
I cant find any similar websites that have this.
Is there a better solution?
<div class="row">
<div class="col-md-12">
<div class="container" id="slider">
</div>
</div>
</div>
#slider {
background: url('image.jpg');
height: 550px;
}
For this kind of Design normally we remove left portion if it's not necessary. Otherwise we need to make display block both div left and right.
hello i have a problem with using my background graphics.
the structure of the site is the following:
header contains two colors with a fixed height of 100px.
mainframe should contain a sliced image with a variable height.
footer contains one color and has also a fixed height of 100px.
so my sliced image has a height of 550px and will fit exactly between header and footer in case the content would not be larger.
<html>
<body>
<div class="wrapper">
<div id="header">header</div>
<div id="mainframe">INSIDE HERE SHOULD BE PLACED THE SLICED IMAGE BUT THE CONTENT IS MORE THAN 550PX</div>
<div class="push"></div><!--Push for sticky footer-->
</div><!--Wrapper -->
<div class="footer">footer</div>
</body>
example
now the problem is, that my content will be larger than 550px and because of a fading colour there will be a hard edgde and you can see where the image ends. so i thought it would be nice when that sliced background image could automatically be resized.
is there a way to realize that by using css?
thanks alot.
Short answer: unfortunately, there isn't a way to resize background images with CSS.
Often, there's a clever workaround using the background-repeat:repeat-x; or background-repeat:repeat-y; properties, and using a carefully sliced background image.
If you have an example of the image, I may be able to help more.
Try
background-size: 100% Auto;
You could try
background-size:cover;
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>