I am making a website.But I have a problem.My background image comes up bigger than the screen every time I preview it.
HTML:
<div class="image">
<img src="images/background.jpg" alt="">
</div>
CSS:
.image {
position: absolute;
margin-left: -50px;
margin-top: -25px;
}
My image's size is 1920x1200
EDIT:
I did it by this code:
html {
background: url(images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I would recommend putting the background image in through the CSS and then using background-size: cover; as this will scale it with the browser window.
Try this:
CSS
.image {
background-image:url(images/background.jpg);
background-size:100%;
position: absolute;
margin-left: -50px;
margin-top: -25px;
width:Xpx; /* change X to what you want */
height:Ypx; /* change Y to what you want */
}
HTML
<div class="image">
</div>
It's important however that you with this method add height and width properties to .image, so that the div won't have 0x0 in dimensions.
I dont know what you are trying to do here but you are adding the styles to the div not the image.
.image img{ position: absolute; margin-left: -50px; margin-top: -25px; }
Would be the markup to affect the image inside a div.
Anyway use body background-image instead. And there are some js files for fitting images to any size display.
Good luck with your site!
Related
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.
Been playing around with CSS and for some reason I can't get the image to cover the whole screen. I managed to dip the opacity but the image won't cover the screen.
<div class="backgroundImage">
<img src="Image/BackgroundImage.jpg">
</div>
.backgroundImage{
opacity: 0.4;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
However if I use the code below I can make it to cover the whole screen, but the opacity won't dip. So for some reason it is not working on a div.
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You can combine multiple background images and stack them above each other. But then there is no way to control their opacity.
.backgroundImage {
background-image: url('http://www.css3.info/wp-content/themes/new_css3/img/sheep.png'), url('http://lorempixel.com/300/400');
background-position: center bottom, left top;
-webkit-background-size: 80px 60px, cover;
-moz-background-size: 80px 60px, cover;
-o-background-size: 80px 60px, cover;
background-size: 80px 60px, cover;
background-repeat: repeat-x, no-repeat;
width: 100%;
height: 100vh;
}
In your case the img tag is not closed. It should look like this <img src="Image.jpg">.
Further you can not specify the dimensions of an img with background-size: you should use width: and height:.
You can use CSS pseudo elements of either :before or :after and set the background image + opacity to it. You can either set everything to height:100%, or just use height:100vh on the div directly in order to make it to cover the whole viewport height.
Jsfiddle Example
body {
margin: 0;
}
.container {
position: relative;
height: 100vh;
}
.container:before {
background: url("https://unsplash.it/500") center / cover;
content: '';
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
z-index: -1;
opacity: 0.5;
}
<div class="container">Yes!</div>
Here is a demo of it: https://jsfiddle.net/a1wvdpwc/17/
I think that's the effect you want?
Just give the background div a width and height of 100%, and give it a position of fixed. Then give it a Z-index of very low so it stays at the very back. You then need to also give the image a height and width of 100%, so that it fills up the viewport. (In the demo I used vh and vw; which mean viewport-width and viewport-height, as percentages. )
Also the demo is in scss, but the only difference is that the css Img placed inside the backgroundImage styles uses a descendant selector, so it targets all Img elements that are descents of div.backgroundImage. I've put what the compiled css would look like in this answer.
Also sorry for the lack of indentation. I typed it up on a phone. I'll update it with a neater version in a few hours.
The html is:
<div class="backgroundImage">
<img src="http://lorempixel.com/image_output/city-q-c-640-480-6.jpg" />
</div>
<div class="content">
Content here
</div>
The css is:
.backgroundImage {
Position:fixed;
Top: 0;
Bottom: 0;
Width: 100vh;
Height: 100vh;
Opacity: 0.25;
Z-index: -5000;
}
.backgroundImage img {
width:100vw;
height: 100vh;
}
.content {
padding: 30px;
}
Also I forgot to add, (to the best of my knowledge) this method is not too good for semantics, but it shouldn't be too bad if you use it.
I'm building an one page scroll down type website, where each slide is a page.
In the last slide, the background image is somehow geting cuted and there's just a white space. The css used on the id of that slide:
#seven {background:url(../img/camara_view.JPG) bottom no-repeat fixed; }
Here's a print:
http://postimg.org/image/489mxfagt/
Any solutions?
You can use background-scale property:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images
If you're supporting modern browsers, you can do the following.
#seven {
background-size: cover /* contain */ /* width in px/em/rem ie 50rem 20rem */
}
Alternatively, you can put your image in an img tag within a container, position the container using either fixed or absolute positioning. Next, give it a width of 100% and height of 100% or top, left, right, bottom a value of 0, while hiding the overflow. Lastly, set the img width to width: auto and height: 100% with display: block.Example here.
using css background image
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
else you can try some other way below code works fine from ie7
css code
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position:absolute;
top:25%;left:25%;
right:25%;bottom:25%;
margin:auto;
min-width:50%;
min-height:50%;}
html code
<div id="bg">
<img src="images/Body-bg.png" alt="">
</div>
Just add .bgwidth { width: 100%; }
.bgheight { height: 100%; }
this will eliminate issue
My background image is fluid only to a certain point. When resizing the browser it starts to shrink
background-image : url("http://...");
background-repeat:no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center right;
height: 400vh;
You can see what I'm talking about here
The height: 400vh is your problem I believe if you can put this code on the html element as such
html {
background: url("http://...") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
and delete the class "me" from your code this should be fluid for you. The problem is you are setting the background on "me" which doesn't contain any content and its height is only being set by you as "400vh" so once it hits that height it stops being fluid so by setting it on the html it will wrap the whole page and be fluid
Edit
if you desire to have your image not clipped in anyway and show 100% of it on every screen you can do something like this
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto 0px;
}
turn the me class into an image instead of a div
<img class="me" src="http://24.media.tumblr.com/8760c4adc4f8c4b7cafa14c5cf6cc55c/tumblr_n2kq1hnFSF1tswi9io1_1280.jpg"></img>
and the css like this
.me {
width: 100%;
}
this will give you a wrap that will cover 100% of the persons screen size and will allow you to set the image to be in the background and will not clip the image as you resize. If you are trying to make this website responsive I wouldn't suggest using absolute references in your css as this may lead to some items out of place on different screen sizes. You may want to check out www.getbootstrap.com since they provide an excellent library for a responsive grid.
click_hear_demo
css
#wrap{
display:block;
width: 100%
}
body {
margin: 0 0;
position: relative;
}
.me {
background-image : url("http://d1jqu7g1y74ds1.cloudfront.net/wp-content/uploads/2013/04/44GHz_image_1.jpg");
background-repeat:no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center right;
height: 400vh; /*cia su viewportais reikes padirbet, nes cia realiai procentai kaip ir*/
}
}
html
<body>
<div id="wrap">
<div class="me"></div>
</div> <!-- end of #wrap -->
</body>
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.