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.
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>
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.
Hi guys I'm using stellar.js and it is working quiet well for desktop devices. But on mobile devices the background-image will be displayed only a part of it. It is not showing the whole image but the left corner of the image. The problem must be the css code. But I don't see it. Thanks for the help guys!
My css looks like:
.intro-section {
padding: 150px 0px;
text-align: center;
background-attachment: fixed;
width:100%;
height:100%;
position: relative;
background-position: center center;
background-size: cover;
background-image: url(../images/frederick_meseck_wood_logo.png);
background-repeat: no-repeat;
}
#media(min-width:768px) {
.intro-section {
min-height: 100%;
}
}
Try this in your media query:
#media(min-width:768px) {
.intro-section {
background-attachment: inherit !important;
background-size: 100% 100%;
background-repeat: no-repeat;
}
}
The first background-size parameter is the width, you can increase this value when going to smaller devices (I recommend this)
I have applied set background-image on one of my <div> with the following properties below:
.mydiv-left {
background: url(path to image) no-repeat center center fixed;
height:auto; // also tried with 100%
background-size:auto // also tried with "100%" and "100% 100%" as well as "cover"
}
This result is no image display, but when I set the height to this image, it cuts off the image. As image is of high resolution and I want it to fit in the smaller area of my div without removing any part/information.
Keep in mind that background image is dynamic and keep on changing for other divs within the loop.
Try this
CSS
.mydiv-left {
background-image: url(path to image);
height:(in px);
width: (in px);
background-size: 100% 100%;
background-repeat: no repeat;
background-position: center center;
}
If you post the entire code it is easy to find solution.
<div> without content/ height will result in 0 height. I guess that's why you can't see your image.
Give your <div> a size, and background-size should do its work.
http://jsfiddle.net/LsdDE/
.d1, .d2 {
border: 1px solid grey;
width: 200px;
height: 200px;
background: url(https://www.google.com.tw/images/srpr/logo11w.png);
}
.d1 {
background-size: auto 200px;
}
.d2 {
background-size: 200px auto;
}
Simplest suggestion would be to give min-height to your div in pixels... DEMO , keeping your markup same, below is the CSS.
CSS
.mydiv-left {
background: url(http://www.wallng.com/images/2013/08/image-explosion-colors-background-beautiful-263613.jpg) no-repeat center center fixed;
color : #FFF;
min-height:200px; /*this is the key*/
height:auto;
background-size: 100% 100%;
background-repeat: no-repeat;
}
if you give height:auto;, it would scale the div to content height.
if you want to show the div anyway, min-height is a solution
Thanks all for helping me out, I was able to get it done with the following below code:
mydiv {
background: url(images/bg.jpg) no-repeat;
height: 150px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Main thing was last four lines that worked for me the way I wanted.
.mydiv-left {
background-image: url(path to image);
height:(in px);
width: (in px);
background-size: 100% 100%;
background-repeat: no repeat;
background-position: center center;
}