CSS - window height - css

I have a #container element, that i have a background issue with:
html {
font-family: Arial, sans-serif;
height:100%;
}
body{
margin: 0 auto;
padding: 0;
font-size: 12px;
height:100%;
background:url(/_images/body-bg.jpg) top center no-repeat;
/*background:#0068b3;
background: -webkit-gradient(linear, left top, left bottom, from(#bfd9ed), to(#0068b3));
background: -moz-linear-gradient(top, #bfd9ed, #0068b3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bfd9ed', endColorstr='#0068b3')*/
}
#container {
width:995px;
margin: 0 auto;
padding: 0;
height:100%;
position:relative;
}
When i add a background image to #container, and the page has content that requires scrolling, the background image only displays the amount of the window height, and when you scroll the background image does not display...
Why would that be?

To the image not scroll with the div, I must set it as fixed:
#container {
background:url('img.png') top left no-repeat;
background-attachment:fixed; //this will avoid scroll
}
In order to make the stretch the image to the size of the div, you can use background-size: 100%;, but this is a css3 property, and will not work in older browsers (IE8-)
If container will have a fixed width, just make a image with same width. Else, you'll have to implement a javascript solution to resize it accordingly.

You have no-repeat on the background CSS property of body.
Change to repeat or repeat-y to only repeat vertically.

Related

Why is my background image keep shrinking when I resize the browser

When resizing the browser or testing the responsiveness through devtools, the background image tends to shrink and move towards the left and when it reaches to a width like 600px the image only takes up half of the div, I looked around, and everyone suggest background-size: cover;, but that's not working. What am I doing wrong? How can I make it so that the image always covers the div?
#page-header {
margin: 0 auto;
width: 100%;
height: 700px;
background-image: url(an-image.png);
background-size: cover;
background-repeat: no-repeat;
background-origin: border-box;
display:flex;
align-content: center;
}
Because you are using height:700px and the background-image, your image will not occupy 100% of your width, but 700px of your height.
You have to use the <img/> tag.
For exemple, add to #page-header position:relative; and overflow:hidden;. Then, add an img tag child (with the src attribute) with those properties:
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;

Center background image with header

I have a JSFiddle here - https://jsfiddle.net/ow1x3e0a/14/
Simple CSS problem.
I have a header which I need to have an image on the side of. I can do this with a background image.
When the window is smaller I need to center the text and image so it appears in the center as it does on the left.
At the moment the text centers but the image stays on the left
I have tried it with without text-align but can't center it with margin: auto:
.container{
margin-top: 50px;
}
.header{
font-size: 20px;
padding-left: 110px;
background-image: url(http://placehold.it/100x50);
background-repeat: no-repeat;
}
#media only screen and (max-width:767px){
.header{
text-align: center;
}
}
When you are giving the background, you need to use:
background-position: center center;
The text-align: center or margin: auto are only for contents, not background.
Add background-position: center center (or shorthand background: url(...) center center;). Adjust padding to get it aligned how you want.

Centering a background image inside a div

I'm trying to center an image inside a div, it gets close, but still is not really centered. The image is 976x976 px. The following is the CSS:
div {
margin-left: auto ;
margin-right: auto ;
border:1px solid #ccc;
max-width:976px;
height:976px;
min-width: 433px;
padding:0;
background: url("images/background.png") center center no-repeat;
}
The image must to be centered, but its exorbitant at the top and right, that is:
Looking at your provided URL I saw that positioning the background-image is indeed positioned more towards the top due to the fact the bgimage is larger than the div itself. Therefore you need to play with the percentages.
background: url("images/background.png") no-repeat 50% 18.5%;
Could solve your problem and place the image in the center of you div
Seems to be working fine??
Ive changed the order of your shorthand css and used 50% instead of center.
div {
position: absolute;
width: 100%;
height: 100%;
}
div {
margin-left: auto ;
margin-right: auto ;
border:11px solid red;
max-width:976px;
height:976px;
min-width: 433px;
padding:0;
background: url("http://lorempixel.com/output/fashion-q-c-976-976-4.jpg") no-repeat 50% 50%;
}
<div></div>
Your image on your link is a rectangular image with the circle at the top so isn't square.
Crop that image for your code to work!

Full Width Background Image

I have an issue with the background image for a header.
I'm creating a non-responsive website with a minimum width of 960px for the content area.
When the screen is 960px or larger, the background image in the header goes across the entire screen.
When the screen is smaller than 960px, the background image in the header starts to shrink to the left, leaving white space on the right side when you scroll to the right.
Is there a way to:
Not make the screen scroll so far that white space appears?
and/or
Make the background image appear as far across the screen as scrolling allows?
Here is my CSS:
header {
display: block; /* So that all browsers render it */
margin: 0 auto;
height: 300px;
background: url("http://upload.wikimedia.org/wikipedia/commons/5/51/Swallow_flying_drinking.jpg") no-repeat top center;
background-attachment: fixed;
}
.subWrapper {
width: 960px;
margin-left: auto;
margin-right: auto;
padding: 50px 50px;
background-color:rgba(255,255,255,0.7);
}
And my HTML:
<body>
<header>
<div class="subWrapper">
</div>
</header>
</body>
Please see this JSfiddle for an example:
http://jsfiddle.net/QrMV4/2/
Thank you so much!
/* This is what makes the background image rescale based
on the container's size */
background-size: cover;
Demo Here
If I understand your question right...
Insert:
overflow:hidden;
In header
You need to replace the background-attachment: fixed to scroll and put width on header as you mean to have the header on center, replace the widt:960px of subWrapper to 860px on subwrapper and remove margin-left:auto and marging-right: auto...
You can have a look on jsFiddle to
http://jsfiddle.net/9YuW6/
header {
display: block; /* So that all browsers render it */
margin: 0 auto;
height: 300px;
width:960px;
background: url("http://upload.wikimedia.org/wikipedia/commons/5/51/Swallow_flying_drinking.jpg") no-repeat top center;
/*background-attachment: fixed;*/
}

How to get background image to stick to bottom of layout?

I have this background, the css code is:
body {
background: #FFF url('images/bg.png') no-repeat bottom center;
margin-bottom: -500px;
width: 100%;
height: 100%;
color:#999;
}
The image is 400px tall, and I would like to make it align to the bottom of the page.
So far, this only works in Firefox. In Chrome and IE the background position is at top center, instead of bottom center.
You need to make the html element height 100% too:
html, body {
height: 100%; width: 100%;
padding: 0; margin: 0;
}
body {
background: #FFF url(images/bg.png) no-repeat bottom center;
}
Also, negative margins don't work in IE6/7 (not sure about IE8)

Resources