When I use the following with a 1920x1080 pic (or for other resolutions I've tried), the very top of the picture gets cut off. Is there any way to prevent this?
div.background {
background-image: url("/images/home.jpg");
background-repeat: no-repeat;
position: absolute;
height: 100%;
width: 100%;
margin-top: 100px;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 0;
background-position: 50% 50%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
div.header {
background-color: red;
width:100%;
height: 100;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
padding: 0px 0px 0px 0px;
}
body {
margin: 0px 0px 0px 0px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/main2.css">
</head>
<body>
<div class="header"></div>
<div class="background"></div>
</body>
</html>
That's what background-size: cover does, makes it so that your background image is scaled, while maintaining aspect ratio, to cover the entirety of its container. If the aspect ratio of the image and the div do not match, you get clipping.
If you can guarantee that your background image will always have the same aspect ratio, you could do something like this:
div.background {
background-image: url("/images/home.jpg");
background-repeat: no-repeat;
position: absolute;
/* these lines are the important bits */
height: 0;
padding-bottom: 56.25%;
box-sizing: border-box;
width: 100%;
margin-top: 100px;
top: 0;
/* bottom: 0; */
left: 0;
/* right: 0; */
z-index: 0;
background-position: 50% 50%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Relative padding and margins are all based on width, not height. Using that specific percentage causes the div to have an aspect ratio matching the image, 16:9. Having the same aspect ratio means that no clipping will occur when using cover. See this answer on the topic.
border-box causes the height and width to include the padding and border sizes but not margin size, preventing margin from effecting the div's dimensions.
change the margin-top on your div.background to 0px. That will remove the cut off from the picture
div.background {
background-image: url("/images/home.jpg");
background-repeat: no-repeat;
position: absolute;
height: 100%;
width: 100%;
margin-top: 0px;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 0;
background-position: 50% 50%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Related
I have set a background image. I need that to be responsive. I have used media queries for that, but the image is the same. Should I use background-size or width and height to view it?
As in it gets cropped off. I tried the background-size:100% 100%, but it looks stretched.
The code is given below:
.header-area {
position: fixed;
background: url(images/image.jpg) no-repeat;
background-size:100% 100%;
width: 100%;
height: 100%;
}
.overlay {
position: relative;
z-index: 1;
}
.overlay:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
background: #000000;
opacity: 0.4;
}
make background-size: cover and background-position: center
.header-area {
background-image: url("image url");
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
thank you.
I've found the answer.
just needed to modify the code a bit.
.header-area {
position: fixed;
background: url(images/image.jpg) no-repeat center center fixed;
background-size: 100% 100%;
width: 100%;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
removed the media query and used this.
As you can see on my page, I've a loading gif. ( http://mauch-offner.com/)
The problem is while the page is loading, the scroll-bars let the gif in the middle "jump". My thought was the overflow as hidden, but nothing changed.
the css for the gif is:
#wptime-plugin-preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(http://mo02.greendeer-projekte.de/wp-content/plugins/the-preloader/images/loading-strich.gif) no-repeat #FFFFFF 50% 50%;
-moz-background-size: 332px 94px;
-o-background-size: 332px 94px;
-webkit-background-size: 332px 94px;
background-size: 332px 94px;
z-index: 99998;
overflow: hidden;
}
body.page-id-444 {
height: 100%;
margin:0px;
background: url(picture) ;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.page-id-444 div#page {
width: 500px;
height: 450px;
top: 0;
bottom: 0;
position: absolute;
left :0;
right: 0;}
}
On Fire HD 8 in Landscape mode , the background goes up(no in the center) , if I remove from div#page position: absolute; then the background goes in center.
Any suggestions?
I want to change header's background image opacity with css. Could you help me please.
.intro {
display: table;
width: 100%;
height: auto;
padding: 100px 0;
text-align: center;
color: #fff;
background: url(http://lorempixel.com/1910/500/nature/) no-repeat bottom center scroll;
background-color: #000;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
<header class="intro">
...
</header>
An alternative would be that you convert this background image file to the .PNG format and make the original image 0.2 opacity using a photo editing program but if you insist on using CSS, you can use the method below:
Since CSS does not directly support background image opacity, you can try using a pseudo-class to overlay another on your header and set opacity on it. Something along the lines of this should help:
<header class="intro">
...
</header>
.intro {
position: relative;
background: #5C97FF;
overflow: hidden;
}
/* You could use :after - it doesn't really matter */
.intro:before {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.6;
background-image: url('../img/bg.jpg');
background-repeat: no-repeat;
background-position: 50% 0;
-ms-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}
HTML code
<header class="intro">
<img class="IntroImg" src="../img/bg.jpg">
</header>
CSS code
.intro introIimg:hover {
opacity: 1.0;//Set your opacity
...
}
Hope it will help you.
You can change the opacity in programs like Photoshop or GIMP.
Or you can do that with opacity in css. But you probably don't want that since you will have some content in your .intro which will then also be affected by it.
So I suggest following solution
.intro {
position: relative;
z-index: 0;
display: table;
width: 100%;
height: auto;
padding: 100px 0;
text-align: center;
color: black;
background-color: transparent;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.intro:after {
content : "";
display: block;
position: absolute;
top: 0;
left: 0;
background: url('http://www.planwallpaper.com/static/images/canberra_hero_image.jpg');
background-size: cover;
width: 100%;
height: 100%;
opacity : 0.2;
z-index: -1;
}
https://jsfiddle.net/q63nf0La/
Basically you add :after element that will be a background image , you position it absolute ( your .intro will need to be position:relative; ) and then you set the z-index and opacity.
There is no CSS property background-opacity, but you can fake it by inserting a pseudo element with regular opacity the exact size of the element behind it.
.intro {
position: relative;
z-index: 0;
display: table;
width: 100%;
height: auto;
padding: 100px 0;
text-align: center;
color: #fff;
background-color: #000;
}
.intro:after {
content : "";
width: 100%;
height: 100%;
display: inline-block;
position: absolute;
top: 0;
left: 0;
opacity : 0.2;
z-index: -1;
background: url(https://t1.ftcdn.net/jpg/00/81/10/58/240_F_81105881_pmBwtzXqFmtFx6rfhujAqTnhpWZf8fXn.jpg) no-repeat bottom center scroll;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
<header class="intro">
...
</header>
See the link here
so I have background, which width is 1920px, and I'm trying to center it when the resolution is smaller than 1920x1080(1200).
At the moment image shows up, but it isn't in the center of screen.
My code:
header {
background-image: url("images/header.jpg") ;
background-color: #000;
height: 306px;
width: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
}
Link about background-position
header {
background-image: url("images/header.jpg") ;
background-color: #000;
height: 306px;
width: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
background-position:center; //add
}
if you need to crop the background just use
background-position: top center
this will ensure a centered alignment of the background along the x-axis and and a top-alignment along the y-axis
Try this:
html {
background: url(images/#.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}