I load a background image through jquery into a DiV, and occasionally a modal pops up which stretches the screen height so that you have to scroll.
I wanted to have my bg image scroll with the view, but the issue is that height:100% apparently means 100% of the original height. The div doesn't stretch with the rest of the screen.
Why is that? Here is my code:
#bgDiv {
display: none;
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-position: center center;
background-attachment:fixed;
top:0;
right:0;
position: absolute;
z-index: -9999;
}
Thanks!
If you set your position to fixed instead of absolute, it should stay, even when there is scrolling.
Related
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%;
i have a div positioned absolute inside another div. absolute positioned div has a background image and its bottom is 0. but when I resize the window it come out to the middle of the container div. it is not always fixed with bottom 0. how do i solve it??
<div class="img-container">
<div class="wave"></div>
</div>
.img-container {
background: url("/images/laptop.jpg");
background-size: cover;
height: 100vh;
position: relative;
}
.wave {
position: absolute;
bottom: 0;
background: url("/images/wave.png");
background-size: 100%;
background-repeat: no-repeat;
height: 143px;
width: 100%;
}
Inner div .wave is sticking to bottom: 0. (red bordered element is inner div with border just for demonstration)
This gap is created to maintain the aspect ratio of the image. If you are okay with stretching of the inner div background, set background-size: 100% 100%; (for inner div). It will stretch the image but will not create empty space which looks like .wave is not sticking to bottom: 0;
If I am using background-size: cover; for a background image and that image is only 800px wide but the viewport is 1500px wide, how can I make it so that the image does not exceed its own width? (I don't want it stretched any larger than it's original size.)
header.hero {
position: relative;
clear: both;
overflow: hidden;
min-height: 390px;
background-repeat: no-repeat;
background-position: center center;
background-size:cover;
}
Add this css:
max-width: 800px;
But I don't want to add a CSS definition every time I use a different
image...
So you can try add CSS properties:
width: auto; - your image width will be scale to img height
max-width: 100%; - your image never will be wider than container wrapper
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;*/
}
I'm an iPhone Developer mainly, I'm a bit rubbish at CSS and I'm trying to make a webpage for my app.
I want to make my footer have the following properties:
Fixed width of 640px
Centered
Attached to bottom of screen, not page. So when the user resizes the window, the footer is always at the bottom
All the other styling I can do myself, it's just positional styling that I find really difficult.
Can someone please explain to me how to do this in just CSS.
footer {
width: 640px;
margin: 0% -320px;
position: fixed;
left: 50%;
bottom: 0%;
}
Example: http://jsbin.com/imisig/3
Example with heaps of text: http://jsbin.com/imisig/4
Put the footer HTML into a <div id="footer">. And the CSS would be something like this:
#footer {
width: 640px;
position: fixed;
bottom: 0px;
left: 50%;
margin-left: -320px;
}
Explanation
The width property sets the width to 640px
position: fixed will make it so it scrolls with the page
bottom: 0px makes it fixed on the bottom of the page (distance to bottom = 0px)
left: 50% puts the left side of the div to the center of the page
margin-left: -320px - now we have to move it 320px from the left to make it centered
.footer{
width:100%;
position: fixed;
bottom: 0%;
}
position: fixed will make it so it scrolls with the page
bottom: 0px makes it fixed on the bottom of the page (distance to bottom = 0px)
The width property sets the width to 100%