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.
Related
I have a script in CSS. I have no problem with this script on computers with big resolutions. But users that have a screen resolution like 1024 x 768 or smaller have problems with the html page. The script shows like 50% of the page and the user cant scroll to see the other 50% of the page.
How can I fix this
This is my code in CSS:
#contact2 {
padding-top: 0px;
padding-bottom: 0px;
background-color: black;
background :url(../images/contact-bg.jpg);
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#contact-us2 {
padding-bottom: 90px;
}
I have tried to add a overflow: scroll; element but this shows only the scroll bar. Scrolling is still disabled.
you should define a specific style section at the end of your css file, like the following
#media only screen and (max-width: 1024px) {
/* put here specific css for mobile */
#contact2 {
position: relative
overflow:auto;
}
#contact-us2 {
}
}
I have tried to add a overflow: scroll; element but this shows only the scroll bar
That happens because the content can fit inside the "contact2" div and there is no need for scrolling.
The second problem is that you haven't set a max-height and max-width property for your div. What 'min-height' does is that it defines the height the div should have, even when there are no contents in it. But it doesn't stop the div from resizing if the content can't fit inside the div, and that is the reason why your overflow: scroll isn't working.
The best solution would be to remove 'min-height' and 'min-width' from your code and just type this width and height:
#contact2 {
padding-top: 0px;
padding-bottom: 0px;
background-color: black;
background :url(../images/contact-bg.jpg);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#contact-us2 {
padding-bottom: 90px;
}
If you don't want to show the scrollbars when your content can fit inside the div and there is no need for scrolling you can use media queries.
https://www.w3.org/TR/css3-mediaqueries/
I hope this helps you. Feel free to comment below and I'll see what I can do.
I'm trying to make a background image on the header section autosize but it won't keep to aspect ratios. Here is an example, the image gets the bottom of it cut off: http://i.imgur.com/sxedPHI.png or if I make it this size, space appears between it and the divs below header: http://i.imgur.com/xX1e4GZ.png I can almost seem to get it working but then it scales the picture to an odd aspect ratio and the image gets distorted: http://i.imgur.com/jtxDNr0.png
I would like the header section to be the EXACT same size as the image, then have the image always showing all of the image (not cutting off a portion) and no space between header and the next divs.
This is the code I have for the HTML part:
<header>
T
</header>
I believe this is the relevant CSS:
header {
position: relative;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
background-image: url("ball.png");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
background-size: 100% auto;
}
The site in question is here:
http://www.stoppiefail.com/boot/sites3/index.php
You are using background-size: 100% auto; at the end which will be overwriting your previous code.
https://jsfiddle.net/26ejdss6/1/
div{
width:400px;
height:187px;
background:url('http://ajgdirect.co.uk/wp-content/uploads/2015/04/football.jpg');
background-size:cover;
background-position:center;
}
Also, check out a neat plugin named backstretch.js. It's pretty nice for this kind of thing, especially when auto-sizing user added images in a CMS
http://srobbin.com/jquery-plugins/backstretch/
Instead of using Background Image why not use an IMG tag with an absolute div on top of it.
HTML:
<header>
<img src="your/background/image.jpg" class="bg">
<div class="headerContent">Your Header Content Goes Here</div>
</header>
CSS:
header {
width: 100%;
position: relative;
}
header img.bg {
width: 100%;
height: auto;
position: relative;
z-index: 0;
}
header .headerContent {
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 100;
}
I havn't tested this but it is just another way to do this outside of css, that would allow the height of the header never to be cut off.
Here is an example: https://ironsummitmedia.github.io/startbootstrap-stylish-portfolio/
In the example there is the background landing page that fills the width of the viewport, doesn't take up the width of the whole page, and is responsive. How do you use bootstrap to hand code an image like this?
Based on this article, you just have to define a div with an id and put the image inside like this:
<div id="bg">
<img src="yourimg.jpg" alt="">
</div>
and then give this styles:
#bg {
position: fixed;
top: 0;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
}
.back {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
This should do the trick.
You can see this in action and play here ( for viewing in fullscreen just hit the arrow in the right corner next to "Auto-run js").
You use this to fill the tag:
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
Right now my background image adapts to the screen size. The problem is, when the screen shrinks too much (e.g. mobile) the background image is no longer long enough to fill the div vertically.
So what I did was to assign a value to width instead of using 100%:
#content {
width: 2000px;
}
The problem is, the div is no longer responsive, since it has a fixed width.
How to solve this dilemma?
Here's the relevant code:
HTML:
<div id="content">
<div class="container clearfix">
</div>
</div>
CSS:
.container {
position: relative;
margin: 0 auto;
width: 960px;
}
#content {
background: url(images/bg.jpg) repeat 0 0;
background-repeat: no-repeat;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
background-attachment: scroll;
background-position: 50% 0;
position: relative;
width: 100%;
height: 750px;
}
#content .container {
height: 750px;
}
And the live site: http://www.m2comm-semi.com/
These two rules
background-size: cover;
background-position: center; /* bottom, top, etc */
should make your background image work properly on every resolution as long as it is big enough to cover f.e. 1900x1200, just give it a shot and let me know if the result is satisfying, bro.
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;
}