I have searched this for the last 30 minutes, and I have tried every solution including VH, setting HTML/Body's width to 100%, but for some reason it just doesn't work for me.
If you view the image: http://gyazo.com/a4df21fa35dda0805e344ba9d22b30be
It doesn't expand to the entire screen for some reason. Why is there even a horizontal scroll in the bottom of my screen?
<style>
body {
background: url('http://i.imgur.com/jzI8yai.jpg') no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
}
html {
width: 100%;
}
.bar {
background: #003366;
width: 100%;
height: 50px;
position: fixed;
bottom: 0;
margin: 0;
overflow: hidden;
}
</style>
<body>
<div class="pictures">
</div>
<div class="bar">
Hello
</div>
</body>
You need to add following style
html, body {
margin : 0;
padding : 0;
}
You need to add margin:0 to the body element:
body{
margin: 0;
}
In most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides.
That's one of the reason why people using Normalizr or a reset css to start a new project. Another approach to avoid not desirable results can be something like:
* {
margin: 0;
padding: 0;
border: 0;
}
Related
I have 5 divs which are responsible for website's background. When user hovers pointer on one of action divs, background changes. On desktop background image displays perfectly, but in mobile browser I have something like on screenshot - image repeats
I have this css
.page_background
{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
min-width: 100%;
min-height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#bg_def
{
background: url("/images/bg.jpg") fixed top !important;
}
#bg_kvadro
{
background: url("/images/bg_kvadr.jpg") fixed top !important;
display: none;
}
#bg_hotel
{
background: url("/images/bg_hotel.jpg") fixed top !important;
display: none;
}
#bg_palatka
{
background: url("/images/bg_base.jpg") fixed top !important;
display: none;
}
#bg_eat
{
background: url("/images/bg_rest.jpg") fixed top !important;
display: none;
}
Part of html code
<body>
<div class="page_background" id="bg_def"></div>
<div class="page_background" id="bg_hotel"></div>
<div class="page_background" id="bg_eat"></div>
<div class="page_background" id="bg_palatka"></div>
<div class="page_background" id="bg_kvadro"></div>
My question is: how to expand image to fit body?
Define the image as child, not as background.
I'm trying to figure out the best method for making a background image fully responsive - so far the best way I can figure out is to use background-size: cover, as most people tend to suggest, but with background-attachment: fixed so that the image scales down it's proportions as the screen resizes, otherwise it just retains it's original proportions and doesn't scale at all. Using just background-size: cover stretches the image to fill the container div, but won't automatically scale proportions..
However I don't want the effect of fixed background that hides part of the image as you scroll down and would prefer it to be background-attachment: scroll, but I can't get that to work and make it scale as well.
So my question is: is there any way I'm not aware of to have the background images scale automatically with screen size without having to use background-attachment: fixed to achieve it?
Please see my JSFiddle for what I've got at the moment: https://jsfiddle.net/uhoL5d5w/2/
(and yes I'm also aware I will be needing to use media-queries at some point to serve optimized images to the various screen sizes)
My current code looks like:
<header>
<div class="launch-bg">
<nav class="menu">
</nav>
</div>
</header>
<div class="page-wrapper">
</div>
<div class="push"></div>
<!-- Footer -->
<div class="footer"></div>
html,
body {
#include box-sizing(border-box);
height: 100%;
}
div,
body {
margin: 0;
padding: 0;
}
body {
display: block;
background-color: #000000;
}
.page-wrapper {
margin: 0 auto -900;
min-height: 100%;
height: auto;
}
* {
margin: 0;
padding: 0;
}
header {
display: block;
width: 100%;
height: 1200px;
}
.launch-bg {
height: 1200px;
background-image: url('http://s8.postimg.org/56xlj2rc5/launch_bg.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
}
.footer {
height: 900px;
padding: 6% 0;
color: $white;
background-image: url('http://s8.postimg.org/onib5lmg5/footer_bg.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
}
Here's a simple example, I think, of what you're asking for, just trimmed it all down for clarity:
header {
display: block;
width: 100%;
height: 1200px;
background-image: url('http://s8.postimg.org/56xlj2rc5/launch_bg.jpg');
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
background-size: cover;
}
I've tried changing the pixels to percentages and nothing seems to work. If I make it in 1920x1080 and then switch to a lower resolution the website looks all cluttered and weird.
Here's the CSS code:
body
{
margin: 0px;
padding: 0px;
background: url("images/Background.png")
}
#header
{
position: absolute;
top: -160;
left: 420;
right: 0;
}
.headerImage1
{
margin: 0px;
padding: 0px;
position: absolute;
width:100%;
height:100%;
background-repeat:no-repeat;
}
Here is what it looks like on a different resolution: (The correct way would be centered)
http://puu.sh/6RgHg.jpg
EDIT: HTML part:
<body>
<div id="header">
<div class="headerImage1">
<img src="images/Header.png">
</div>
I think it's cause your ratio gets off when you use:
width:100%;
height:100%;
Try this instead:
width: 100%;
height: auto;
That way the ration doesn't mess up, if you want the background to not mess up, try this:
background: url("images/Background.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
EDIT:
If you mean centering the image, absolute poitioning is the absolute size of the browser, the full screen. While relative is the current position of the brower.
I would use relative for cross-device purposes.
I'm trying to do a background image of 100% and have an image as the background. When I upload the image it goes to 100% but it cuts off have the picture. It makes the image wider than my screen. How do I fix it where the picture width is 100% but the image width fits the screen without getting cut off. Here is my tumblr to let you see what I mean (http://ophelialogy.tumblr.com/) and here is the full image to show you the full image and give you an idea for where it's cutting off (http://imageshack.us/a/img7/7103/khb3.png).
Here is my code:
CSS PART
/* --- HEADER --- */
#header {
top: 0;
left: 0;
width: 100%;
{block:IfAdjustableHeader}height:{text:Header Height};{/block:IfAdjustableHeader}
{block:IfNotAdjustableHeader}height:100%;{/block:IfNotAdjustableHeader}
position: fixed;
z-index: 10;
background-image: url('{image:header}');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* --- PAGE CONTENT --- */
#page {
{block:IfAdjustableHeader}top:{text:Header Height};{/block:IfAdjustableHeader}
{block:IfNotAdjustableHeader}top:100%;{/block:IfNotAdjustableHeader}
left: 0;
width: 100%;
min-height: 100%;
position: absolute;
background: {color:Background};
z-index: 99;
}
.container {
margin: 50px auto 0px;
{block:If400Posts}width: 800px;{/block:If400Posts}
{block:If500Posts}width: 900px;{/block:If500Posts}
}
/* --- POSTS --- */
.postcol {
width: 540px;
margin-left: 240px;
}
.posts {
margin-bottom: 20px;
background-color: #fff;
padding: 20px;
}
.posts img, .posts li, .posts blockquote {
max-width: 100%;
}
HTML Part
<body>
<div id="header">
<div class="description">{Description}</div>
</div>
<div id="page">
<div class="container">
<div class="postcol">
{block:Posts}
<div class="posts">
</div>
this excellent blog post explains exactly what you need, without any third party tools:
http://css-tricks.com/perfect-full-page-background-image
also, there are some jQuery plugins for that, including:
https://github.com/jaysalvat/vegas
https://github.com/buildinternet/supersized
SO...
What cover does (in my mind) is take the background image and do it's best to use the most of it that it can depending on the height or width of the box it is in. There are 2 ways to deal with this. One way is to make the box the perfect ratio for the image. The other is to actually use an img that will stretch the box to it's exact size. Here is how to do each. The plus of the background-image version, is that you can easily only serve a small version to small screens with an #media rule.
HTML
<header class="container global-header"></header>
<header class="container global-header2">
<img alt="banner-thing" src="http://placekitten.com/400/100" />
</header>
CSS
html, body {
height: 100%;
margin: 0;
}
.container {
width: 100%;
float: left;
}
.global-header {
width: 100%;
/* this is hacky - but it is your answer */
height: 0;
padding-bottom: 25%;
background-image: url("http://placekitten.com/400/100");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* you should have this too */
background-position: center center;
}
.global-header2 {
width: 100%;
/* height will be determined by image size */
}
.global-header2 img {
display: block;
width: 100%;
height: auto;
}
FIDDLE
use:
background-image: url(../images/myimage.jpg);
background-size: cover;
Do you want the background image in the header or on the main page?
It is currently in the header.
Set the background image on the html tag if you want it to cover the whole page.
Nasser's link to do that is a good one (I would leave out the browser specific hacks though).
EDIT
AHH You're talking about width.
I think it might be something to do with the irritating slider tumblr have coming in from the right - it is about that much too stretched.
I suggest trying these styles on jsfiddler - or another separate site - you'll probably find it works fine.
Have a look at this page: rozbub
As you see, there is a fix header on the top and a scrollable content below. The content inside the black div scrolls well, but the image is fixed. How can I let this image scroll too?
Basically, I defined the main wrappers as following:
body{
width: 100%;
height: 100%;
overflow: hidden;
margin: 0px;
}
#generalWrapper{
height: 100%;
}
#header{
height: 70px;
width: 100%;
background: #080808;
}
#content{
overflow: auto;
position: absolute;
width: 100%;
top: 70px;
bottom: 0;
background: url("../images/background.jpg");
background-repeat: repeat-y;
}
with a structure like
<body>
<generalWrapper>
<header>
</header>
<content>
</content>
</generalWrapper>
</body>
Then, the content div is filled with elements (which make this div taller than the screen and results in scrollability). But why is the background image not affected?
It looks like you are scrolling divs inside your content div, but the content div itself is not scrolled.
Try to look through the list of errors found on your site by W3C's Markup validator.
I tried a different approach. First of all, I put the background image on the html, with following attributes
html{
background: url("../background.jpg") center center #000;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Then, I changed the header and content to
#header{
height: 70px;
width: 100%;
background: #080808;
position: fixed;
z-index: 55;
box-shadow: 5px 5px 5px 5px #080808;
}
#content{
position: absolute;
width: 100%;
top: 70px;
bottom: 0;
}
which results in exactly that behaviour I desired (Although the problem considered by Jules Mazur in the comment is not solved, I will try to solve this by providing different images for different resolutions).
Try setting the background-attacment to scroll. MDN has documentation for this property.