I have a main wrapper div with the following css attributes:
div#mainWrapper {
margin: auto;
width:70em;
height:100%;
background: url(../images/header.jpg) no-repeat center center fixed;
background-size: cover;
}
I want to make the whole div and it's brackground to be visible, even if the div itself is empty.
I dont want to use position:fixed or position:absolute if possible.
Unless you set a height in the parent container, the height of your #mainWrapper will compute to 0 and you won't see the background image or color.
Set the height to 100px to double check that your image is loading properly.
Make sure that your body and html tags have height of 100% if you want to use relative heights.
It may be that your HTML or body elements aren't big enough. height:100% will only fill the parent containers height so try adding this to your CSS:
html, body
{
height:100%;
}
http://jsfiddle.net/unt9M/ demonstrates this using a single coloured background. Remove the CSS that I've described above and you'll see that the div is only then single line because the body and HTML are not big enough.
add:
body,html{
height:100%;
}
See http://jsfiddle.net/derekstory/xU2g9/
Note that I added a background color to show the example.
Does you parent have any styles for width and height?
If the parent is body then try like this :
CSS
html,body{
width:100%;
height:100%;
}
div#mainWrapper {
margin: auto;
width:70em;
height:100%;
background: url('http://images04.olx.com/ui/1/50/31/12504931_1.jpg') no-repeat center center fixed;
background-size: cover;
}
JSFiddle
I simply added a float:
div#mainWrapper {
margin: auto;
width:70em;
height:100%;
background: url(../images/header.jpg) no-repeat center center fixed;
background-size: cover;
float: left/right;
}
Related
I want to create a header with a fixed background. So I defined the following properties:
header {
margin: 0;
padding: 0;
width: 100%;
height: 300px;
display: block;
background-image: url('...');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
Now I have the following problem. Currently, the background is centered according to the Screen Width and Height. Since the header is at the top, the actual background of the header is just the top of the image. In addition, the header image section changes every time I change the screen height, which is not my goal.
I want the image to be centered within the header (center of the image is at the center of the header, but only if I have not scrolled down). In addition, the header image section should only change if I change the header width, height or screen width but not if the screen height is changed.
You can rely on vh unit combined with some calc(). The center is initally 50vh and you want it to be 150px from the top so we need a translation of 50vh - 150px. You should also get rid of cover if you want the image to not change when the screen height change but it may not render like you want.
I replaced 300px with 100px for the demo.
.header {
height:100px;
border:1px solid;
background:
url(https://picsum.photos/id/1014/1200/800) 50% calc(50% - (50vh - 50px)) fixed;
}
.not-fixed {
background-attachment:initial;
background-position:center;
margin-top:20px;
}
body {
min-height:200vh;
margin:0;
}
<div class="header">
</div>
<div class="header not-fixed">
</div>
With the use of cover
.header {
height:100px;
border:1px solid;
background:
url(https://picsum.photos/id/1014/1200/800) 50% calc(50% - (50vh - 50px))/cover fixed;
}
.not-fixed {
background-attachment:initial;
background-position:center;
margin-top:20px;
}
body {
min-height:200vh;
margin:0;
}
<div class="header">
</div>
<div class="header not-fixed">
</div>
You can clearly see how the first image is centred exactly like the second one without fixed
To get more details about the caluclation check this: Using percentage values with background-position on a linear gradient (the section Combining pixel and percentage values)
Try to wrap the img (outside the header div) and header div and play with position relative/absolute to superimpose header on top of the image.
Having done that, you can use z-index to push image backwards
whenever I do background-size:cover it covers the whole screen which is nice but it leaves a white bottom is there any fix to this?
body { background-image:url("maxresdefault.jpg");
background-size:cover;
background-repeat:no-repeat;}
You have to put height
So:
body {
background-image:url("maxresdefault.jpg");
background-size:cover;
background-repeat:no-repeat;
height: 100%;
}
There could be a few things causing this, I'd suggest making a plunker for it.
I'd guess those options: if there is some kind of tag that has a margin on it (like h1 or p) at the bottom, put it with margin: 0;.
Try:
body {
background-image:url("maxresdefault.jpg");
background-size:cover;
background-repeat:no-repeat;
margin: 0;
}
Try setting the height like people suggested above.
I am trying to integrate a hover effect to an img in css but the problem occurs when I hover it, the hover area is misplaced and the the hover effect occur even when the mouse is not over the img.
<body>
<div id='backgroundContainer'>
<div id='background31'></div>
</div>
</body>
CSS:
html, body {
max-height:100%;
width: 300%;
background: url('background.png');
top: 0;
left: 0;
background-size: cover;
background-repeat:no-repeat;
}
#backgroundContainer {
top:0;
left:0;
margin:0;
padding:0;
height:100%;
width:100%;
}
#background31 {
top:45%;
position: absolute;
margin:0;
padding:0;
background: url('alure.png');
background-repeat:no-repeat;
height:55%;
width:70%;
left:230%;
background-size: 5%;
}
#background31:hover{
background-size: 7%;
}
I was thinking about using background-position:x% y% or margin-left to simplify the code but it did not work what I tried.
You are applying the hover effect on an div which is set to a large area (the area in red in my fiddle below). This is why the hover is activated even when the mouse is not over the image.
If you add an image to the nested div, and apply the hover effect to this image it should work.
<div id='backgroundContainer'>
<div id='background31'>
<img src='http://www.sjiep.nl/images/sjiep.gif' id='testImage'>
</div>
</div>
and the css
#testImage{
width: 100px
}
#testImage:hover{
width: 150px;
}
See also: http://jsfiddle.net/2CbTX/1/
Update
Added a link to the image, see: http://jsfiddle.net/2CbTX/2/
because you have put the hover for the div the whole div , not just the image and this div background31 occupies the lower right corner square of your window .
see here : http://jsfiddle.net/Pda5e/
your image size becomes very small as compared to the div in which it is in. Since you have made it 5% of the div.
Resize the div to make it smaller and increase the background size to fill the div
so if you have to make the hover only affect the image, you must give the hover to image only.
like here : http://jsfiddle.net/Pda5e/1/
Try replacing this code
#background31{
background: url(maxresdefault.jpg);
background-repeat:no-repeat;
height:50px;
width:100px;
background-color:#066;
background-size: 5%;
}
#background31:hover{
background-size: 100%;
}
The hover effect occurs not over the image because you only change background-size, but not the size of #background31 element, it always remains width:70%.
So you should use background-size: 100% and change the width of the background31 element.
#background31 {
background-size: 100%;
width: 5%
}
#background31:hover{
width: 2%;
}
But background-size is not supported in IE8. If you want IE8 suuport than use <img> element instead of a div.
I am adding a few images to a portfolio website but want to use background-image in oppose to the img property. The website is very responsive and uses percents for it's basic structure. I am using the background-img property and setting the width of the container to 100% of its parent. Adding a set height makes the image visible however adding height:100% or height:auto makes the image disappear, I'm sure this is probably a pretty simple piece of code to figure out but I can't seem to find a solution. Below is the code I am using to implement the image
.image-left {
float:left;
width:100%; height:100%;
background-image:url(/img/image.jpg);
background-position: center top;
background-size: 100% 100%;
}
And here is a http://jsfiddle.net/WD4HM/3/ to better explain my problem.
Any help would be appreciated, thanks guys.
height: 100% does not work unless the parent element has an explicit height. The reason the image is disappearing when you use this rule is because the element actually has no height.
However, you can use javascript to capture the window height, and then match the element you want to be 100% of the window height.
new answer:
#wrap {
width:50%;
margin:0 auto;
overflow:hidden;
background:blue;
}
.img-left {
float:left;
width:100%;
height: 100%;
background-image:url(tiger.jpg);
background-position: center top;
background-size: 100% 100%;
margin-bottom:45px;
}
I have a background image which i need to display vertically as long as the content on the page, but, my background image only shows to the page in view and when I scroll down for the rest of the content the background is not shown in the rest of the page. What am I doing wrong?
css for the background image
#wrapper {
text-align: left;
margin: 0px auto;
border:0;
width: 960px;
height: 100%;
background-image: url('/images_/backgrounds/content_shadow.png');
background-repeat: repeat-y;
}
Try applying the background-image and background-repeat rules to body instead of #wrapper.
Try adjusting the height property, the 100% is relative to what?
Generally i prefer defining height rules with min-height.
My guess is that the wrapper div isn't extending to the bottom of the content either. Try setting the border of wrapper to:
border: 1px solid black;
You might find that the background is behaving just fine, and the div isn't doing what you want.
Apply the background image styling to html{ } instead.
remove the height: 100%; from css.