I'm trying to make a website on a single page, with every section of the page taking up exactly the size of the user screen (using backstrech for backgrounds).
Like this: http://projects.lukehaas.me/scrollify/#home
The problem comes when the user's screen height is too small to contain my page's content. In that case, I want my background to stretch more than the user's screen, as it has to fill the entire content's background.
So, I've been using overflow:scroll, which fix the entire problem except for displaying an annoying horizontal scroll bar, even when it is not needed. What I mean is, even at full-screen when there's no overflow at all, the horizontal scrollbar appears
This is my code:
section#page1 {
background: url('../img/background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
overflow: scroll; }
try this:
section#page1 {
background: url('../img/background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
}
section#page1 {
background: url('../img/background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
overflow: auto;
}
Related
I've got a 8192x8192 image which should be used as a background image. It shows the image but only the half and I've got no clue how to scale the height correctly.
My CSS code:
body {
background: url('../img/atlas.png') no-repeat;
background-size: cover;
height: 100%;
width: 100%;}
Is it what you want?
body {
background: url(https://source.unsplash.com/IvfoDk30JnI/1500x1000) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I have a site on which the background of the image gets cut off even if the height is increased. How can I have the top area of the image on the page too?
.top-area {
background: url(../img/matt.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 677px;
}
Change .top-area to this. You're using fixed background attachment, so you need to modify the background position to clear your navigation (which is 78px tall), so move the background image down 78px. I also added a margin-top of 28px to .top-area so the div will clear your header, too.
.top-area {
background: url(../img/matt.png) no-repeat center 78px fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 677px;
min-height: 100%;
margin-top: 28px;
}
It's happening because you used navbar position fixed. if you want to use this add
body{padding-top:78px;}
or
.top-area{margin-top:28px;}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I have 2 sites I've created - How do I get the header background images to be resize correctly on mobile devices? When viewing on mobile the images are cut off on both sides.
I have this code in the header section for each:
Here is the code for each:
segregatedsunday.com
#h {
background: url(../img/header.jpg) no-repeat center top;
padding-top: 180px;
text-align:center;
background-attachment: relative;
background-position: center center;
min-height: 700px;
width: 100%;
color: white;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
whitehatdev.co
#headerwrap {
background: url(../img/header_bg.jpg) no-repeat center top;
margin-top: -50px;
padding-top:120px;
text-align:center;
background-attachment: relative;
background-position: center center;
min-height: 650px;
width: 100%;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I'm looking at your first example and it generally seems fine. The extra 100% background-size stuff doesn't fit the situation. When I drag the jsfiddle larger and smaller, the image resizes dynamically like "cover" should. Moo!
jsfiddle
#headerwrap {
background: url(http://www.glitters20.com/wp-content/uploads/2012/11/Funny-Cow-37.gif) no-repeat center top;
margin-top: -50px;
padding-top:120px;
text-align:center;
background-attachment: relative;
background-position: center center;
min-height: 250px;
width: 100%;
/* -webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%; */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You aren't mixing up cover and contain are you? Its not exactly clear on what goal you are trying to achieve. Cover and Contain will maintain aspect ratio so no image is ever distorted.
contain
The contain value specifies that regardless of the size of the
containing box, the background image should be scaled so that each
side is as large as possible while not exceeding the length of the
corresponding side of the container.
cover
The cover value specifies that the background image should be sized so
that it is as small as possible while ensuring that both dimensions
are greater than or equal to the corresponding size of the container.
I have a picture as my background but I can't figure out how to make my code responsive such that the image stays consistent when I decrease the browser window.Here is my code:
body {
margin-top: 50px;
}
.full {
background: url(../melissa.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
If you want a responsive background look at this SAMPLE
.full {
height: 500px;
background-image: url('image.jpg');
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
}
This will make it responsive for you.
Just add the height and width to 100%.
.full {
position: relative;
width: 100%;
height: 100%;
background: url(../melissa.jpg) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Actually, I'm assuming .full is a div which contains the background you want right? if that's the case, the width and height set to 100% will only make the div that big, which may still not work as he's using 100% to the height and thus you would need to set 100% to the body or any other container that .full is in. You can just set the background-size: cover, background-position:center center, backgorund-repeat:norepeat, and just give .full it's height and width. That should make the backgound always filling the whole container.
I am using bootstrap and rails. I am trying to have a background image take up the entire background and stretch when the browser is larger. This is working for the most part, except when the browser is smaller the bottom of the image goes up and the bottom of the browser screen is blank. Here is the css I have now:
body {
background-image: url('bilde.jpg');
background-repeat: no-repeat;
background-position: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I have tried this:
body {
background-image: url('bilde.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
but it does not work either. Does anyone have an answer for this problem? Thanks.
I figured it out. The difference was that I should have been using
background: url('bilde.jpg') no-repeat center center fixed;
instead of
background-image: url('bilde.jpg') no-repeat center center fixed;
Pretty subtle but the change did the trick.