When I put the following into a div in the main body, this WORKS:
<div style="display: block; width:100%; height: 100%; min-height: 100vh; background-color: #FFFFFF; background: url(./images/pic.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed;">
BUT when I use CSS is DOES NOT WORK:
<style type="text/css" media="all">
.myMainDiv {
width:100%;
height: 100%;
min-height: 100vh;
background-color: #FFFFFF;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
</style>
<div class="myMainDiv" style="display: block; background: url(./images/pic.jpg);">
It seems to be going wrong, because I need a different pic for each background and then this results in the background-repeat etc being ignored. (Note: also different divs will have different display values, either block or none, so they need to be separately stated as well, but that is not the problem.)
Anyone know why and if there is a workaround.
Hmm. Seems you are overwriting your CSS. Using backgorund: url('./images/pic.jpg') as an inline style is the problem. You are overwriting all of your CSS properties (background-position, background-repeat, etc...) with this inline style. Replace backgorund: url('./images/pic.jpg') with backgorund-image: url('./images/pic.jpg').
Related
I'm not sure why but any image I choose for the page's background is never 100% entirely shown. I'm not sure if create-react-app has something to do with it or what but there is always some part of the image that is overflowing and gets cut from the page.
body{
background-image: url("https://images.unsplash.com/photo-1516849677043-ef67c9557e16?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
background-size: 100%;
background-position: center;
height: 100vh;
}
I need the image to be shown in its entirety. background-size: 100% doesn't seem to do it inside create-react-app for some reason.
Basically, background-size: 100% will fill the screen with the image, and crop it if necessary.
I think what you want is to see the whole image. You should use contain for that:
html {
width: 100%;
height: 100%;
background: red url('http://media.gettyimages.com/photos/groningen-city-view- picture-id588880579?s=612x612') no-repeat center;
background-size:contain;
}
jsfiddle
This can be done purly with CSS, look for some basic CSS background properties
body{
background-image: url("https://images.unsplash.com/photo-1516849677043-ef67c9557e16?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
background-size: cover; //contains these values - auto|length|cover|contain|initial|inherit;
background-position: center;
background-repeat: no-repeat; //contains these values - repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
height: 100vh;
background-attachment: fixed; //contains these values - scroll|fixed|local|initial|inherit;
}
Note: Look for background-attachment property, if you don't need it you can remove it.
Try this:
body {
background-image: url("https://images.unsplash.com/photo-1516849677043-ef67c9557e16?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100vh;
overflow: hidden;
width: 100%;
}
How do I specify a subclass to swap in background images?
Here's my css:
.background-image-post{
background-image:url('../images/posts/background-post.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
I want to change the image dependant on the post either with a subclass post1, etc or ideally override it in the HTML but It's not working.
any thoughts?
Subclass is the wrong verbiage here. All you need is an 'additional' class, which creates a higher level of specificity.
As an example: All divs with the class background-image-post get the placehold background. However divs with both background-image-post and phil classes, will get the fillmurray background because it's more specific.
.background-image-post{
display: inline-block;
margin: 3px;
background-image:url('//placehold.it/200x200');
width: 200px;
height: 200px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.background-image-post.phil {
background-image:url('//fillmurray.com/200/200');
}
<div class="background-image-post"></div>
<div class="background-image-post phil"></div>
It seems that background-position/background-cover is not working with data URI as background images? What I have is a preview of images to be uploaded. To show those previews I am using JS to get the data URI into CSS background images, which I hope to center.
But I notice the following code does not work with a data URI
div {
width: 200px;
height: 200px;
display: block;
background-size: cover;
background-repeat: no-repeat;
background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRg...);
}
https://jsfiddle.net/7pfc2vLx/
UPDATE
I notice like many mentioned I am missing background-position in my above example. But seems like even with that it does not work when its an inline style?
<div id="profile-avatar" style="width: 200px; height: 200px; background-position: center center; background-size: cover; background-repeat: no-repeat; background-image: url(data:image/png;base64,iVBORw0KGgoAAAA
https://jsfiddle.net/7pfc2vLx/4/
If you want to Center an image then try JSfiddle
div {
width: 100%;
height: 200px;
display: block;
background-size: contain;
background-repeat: no-repeat;
background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/4QBsRXhpZgAASUkqAAgAAAAD…y5eKCQaVqJ0y7W7JJJ2b6cxwd3MlGwz9mN4vrwL6sTjY+BzMiXWzjSpa2fJRFOu/auHjYv/9k=);
background-position: center center;
}
Maybe I'm missing something in your question, but shouldn't you just add the position?
background-position: center;
Your background already fit the div and if you want to make sure it's in the centre of the div, add:
background-position:center center;
But seem nothing change, because your div is not center itself, so add:
margin:0 auto;
Now they all in center posistion. https://jsfiddle.net/7pfc2vLx/2/
I have a background image which I would like to cover the element, using background-size: cover; However, I'd also like to scale it up 110% in both directions, beyond what cover does, so that I can subsequently move it around with background-position.
Put another way, I'd like background-size: cover to treat the surrounding div as if it were 110% larger in both directions.
Is there a way to do this purely in CSS?
If I understand correctly, this would be a way to do it, but max() is not standard CSS3:
background-size: max(auto 110%) max(auto 110%);
I have created a Fiddle for you to check out. I believe I understood the question correctly but please let me know if I am off base.
I wrapped the div that has the background-image in another div like so:
<div class="hero-container">
<div class="row" id="hero"></div>
</div>
and applied the styles like so:
.hero-container {
overflow: hidden;
width: 100%;
height: 100vh;
}
#hero {
background: url('https://i.ytimg.com/vi/ReF6iQ7M5_A/maxresdefault.jpg') no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
width: 100%;
height: 110vh;
margin-bottom: 0px;
right: 0;
}
Play around with the fiddle by changing the height: 110vh and let me know if this is what you were looking for, or if I am at least on the right track.
Hope this helps!
EDIT*: I removed the transition and the padding as these are not necessary.
If you would like to do this with a container that has a fixed height you can change the .hero-container height to 500px or something and then just use 110% instead of 110vh in the height for the #hero div.
If I do understood your question correctly, I guess you can try this below:
.box {
width: 40vw;
height: 40vh;
background: url('https://i.ytimg.com/vi/ReF6iQ7M5_A/maxresdefault.jpg') no-repeat center;
background-size: cover;
}
.box:hover {
background-size: 140%;
}
<div class="box"></div>
I have a large image to be use as a background-image of a page. What I want is that the height of the image will be stretched to fill the height of the page. It should be centered also.
background: black url("/image/background.jpg") no-repeat fixed center;
background-size: cover will do the trick in modern browsers - see mozilla's documentation for more details.
For older browsers (particularly older versions of IE), I've had a lot of success with jQuery plugins like this one to emulate the behaviour.
here is a good writeup
http://css-tricks.com/perfect-full-page-background-image/
the gist of it being
body {
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;
}
add this to the css
{
background: black url("/image/background.jpg") no-repeat fixed center;
height: 100%;
width:100%
}
I think using a div would be the easiest way to get the effect you are looking for.
<div id="background">
<img src="/image/background.jpg" class="stretch" alt="" />
</div>
<style>
#background {
background-color:#000000;
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1;
}
.stretch {
width:100%;
height:100%;
}
</style>