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;
}
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.
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;
}
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
I created a static bar with the code:
#header_bar {
background-image: url(../img/background_white.png);
height: 64px;
border-bottom: 0px;
padding-left: auto;
padding-right: auto;
width: 100%;
top: 0;
position: fixed;
}
And my code for my content:
#content {
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: #D8F0DA;
width: 100%;
height: auto;
min-height: 100%;
position: relative;
background-image: url(../img/wallpaper.jpg);
background-position:center center;
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
}
It worked and my header bar became static but when I scroll down the header bar stays behind my contents. How can I fix this?
Try add a z-index to the header bar's CSS class:
position: fixed;
z-index: 100;
Should make it appear on top of content.