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>
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%;
}
I am trying to set Background image of an Ion-card which will completely cover the area of card but whenever I add background image it doesn't cover its complete area but It leaves the corner .My code is
<ion-card class="design" style="width : 43%;height: 35%;">
</ion-card>
Scss Code
.design {
background-image: url(../../assets/icon/rectangleCopy25#3x.png);
background-size: cover;
display: inline-block;
}
Try with this,
#design{
background-size: 100%;
background-repeat: no-repeat!important;
background-size: cover!important;
width: 105vw!important;
height: 100vh!important;
margin-left: -10%!important;
background-attachment: fixed!important;
margin-top: -10%!important;
background-position: center center!important;
}
DEMO
Simple:
You need to point your own component to define the style settings.
ion-card {
background-image: url('assets / 35.jpg');
background-size: cover;
(...)
}
You may encounter some problems with your background-image when calling the URL parameter. To resolve this issue if you get in the way of it, go to this link:
https://github.com/vuejs/vue-loader/issues/481
That is because ion card has a default margin of 10px around it.
You can simply do so by overwriting the original CSS by providing your own styling for the .card-md class
.design {
background-image: url(.....);
background-size: cover;
display: inline-block;
}
.card-md {
margin: 0;
}
However, I would recommend you to set background-position as center instead.
.design {
background-image: url(...);
background-size: cover;
background-position: center;
}
Here is a demo.
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 been researching for a while to how to get my background image to work on different screen resolutions. After many failed attempts I noticed I can't even get a normal css background in. It's not the file, I have tried different formats.
Code for the different screen resolutions:
html {
background: url('background.jpg') no-repeat center center fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
The code the normal background:
body {
background-image: url('Background.jpg');
}
That is strange. Did you check that the path to your image is correct? For example if the image is inside an "example" folder, the path should be "example/myImage.png".
As for a responsive background, I believe you are on the right track, although a simple background-size: 100%; would have been enough. Check this Jsfiddle https://jsfiddle.net/a0mvnj63/
Also try using an external image, like in my example, just in case.
Try to use your code like this background-image:url('../background.jpg'); with height: 100vh;
body {
padding: 0;
margin: 0;
height: 100vh;
background-image: url(http://static.tumblr.com/295a1562899724d920b2b65ba33ffb76/vouqyzj/f2Dna5qb8/tumblr_static_197ahk99f1z44ogskg4gw4c80.jpg);
background-size: 100% 100%;
background-position: center;
}
h1 {
text-align: center;
color: #fff;
}
<body>
<h1>Hello Universe</h1>
</body>
only background elements does not give height and width to any div or html.
try giving some height and width to your code. just like
html { background: url('background.jpg') no-repeat center center fixed; height:500px; width:500px; }
or just put some data on body so you get auto height width according to contain and get image in background.
I have the below code and I'm trying to add an attribute to center the background but it's not working.
Existing Code:
<div class="av-section-color-overlay" style="opacity: 1; background-color: #000000; background-image: url(http://andytraph.com/wp-content/uploads/2015/08/avatar.jpg); background-repeat: repeat;"></div>
Existing CSS:
opacity: 1;
background-color: #000;
background-image: url("http://andytraph.com/wp-content/uploads/2015/08/avatar.jpg");
background-repeat: repeat;
}
The CSS I tried to add is:
.av-section-color-overlay {
background-position: center center !important;
}
The website is http://andytraph.com/ and I'm trying to center the full-screen Avatar image
I would suggest not repeating the background, but letter-boxing it in the container, which looks way better. Center works:
{
opacity: 1;
background-color: #000000;
background-image: url(http://andytraph.com/wp-content/uploads/2015/08/avatar.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
There are a few competing problems here:
There is no content inside the element you are working with, so the background image is getting clipped as a result.
The background image is very large, so it is difficult to see the desired centering without either 1) setting the DIV element to a relatively larger height / width, or setting the background-size CSS property.
The concepts of background-repeat: repeat and background-position: center constitute competing desires. You can't really both center an image, and tile it indefinitely in both directions.
So in light of the above, if you apply a few further style modifications, you get your desired behavior with what you specified: background-position: center. (If you want to center in both directions, you don't need to expressly state it twice -- it is implied that you want to use it in both directions if there is only a single value.)
Something like:
.av-section-color-overlay {
background-color: #000;
background-image: url("http://andytraph.com/wp-content/uploads/2015/08/avatar.jpg");
background-repeat: no-repeat;
background-size: 100px;
background-position: center;
height: 200px;
width: 200px;
}
and:
<div class="av-section-color-overlay"></div>
Example: https://jsfiddle.net/7mpqfd22/2/