It's located in project/resources/images/banner-landingpage.jpg. The
HTML index file is in the project folder. I cannot get the background to display using:
.banner {
background-image: url(./resources/images/banner-landingpage.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 100px;
}
I thought the ./ meant go up one file then follow the path to the file?
I believe the standard solution to this is
.banner {
background-image: url('../resources/images/banner-landingpage.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 100px;
}
where you go up a directory using ../
Also note that the url will be relative to where the css file is stored.
Related
QUESTION: Is it possible to use a SCSS list to generate a number of classes without repeating the attributes?
The point is to keep the file easy maintainable by have ONE list ($svgs) of names which then can be used for classes or variables (see example below, $svg). This list is much larger in reality.
Note that I can't use .box i[class*=".icon-"] or similar selectors, as there are other elements that would be affected.
Here's the current SCSS, which works, but creates bloated CSS. .
$svgs: cancel, danger, exit;
#each $svg in $svgs {
.box i.icon- {
&#{$svg} {
background-image: url($svg + '.svg');
height: 24px;
width: 24px;
background-repeat: no-repeat;
background-size: contain;
}
}
}
Result CSS is:
.box i.icon-cancel {
background-image: url("cancel.svg");
height: 24px;
width: 24px;
background-repeat: no-repeat;
background-size: contain;
}
.box i.icon-danger {
background-image: url("danger.svg");
height: 24px;
width: 24px;
background-repeat: no-repeat;
background-size: contain;
}
.box i.icon-exit {
background-image: url("exit.svg");
height: 24px;
width: 24px;
background-repeat: no-repeat;
background-size: contain;
}
Desired CSS:
.box i.icon-cancel, .box i.icon-danger, .box i.icon-exit {
height: 24px;
width: 24px;
background-repeat: no-repeat;
background-size: contain;
}
.box i.icon-cancel {
background-image: url("cancel.svg");
}
.box i.icon-danger {
background-image: url("danger.svg");
}
.box i.icon-exit {
background-image: url("exit.svg");
}
To get this result you can use #extend with a placeholder selector:
$svgs: cancel, danger, exit;
%svg-styles {
height: 24px;
width: 24px;
background-repeat: no-repeat;
background-size: contain;
}
#each $svg in $svgs {
.box i.icon- {
&#{$svg} {
#extend %svg-styles;
background-image: url($svg + '.svg');
}
}
}
I have a bootstrap Masthead img thats great when its full size , but as I shrink the page the entire ~25% of the top and bottom get cut off. Of all the things on the page I want this to just scale correctly. I tried width:100% but that don't work
padding-top: 10rem;
padding-bottom: calc(10rem - 56px);
background-image: url("../img/Am/20180904_094438cropped.jpg");
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Thanks
You could try putting your code into a container div. It may look something along the lines of:
.container {
padding-top: 10 rem;
padding-bottom: calc(10rem - 56px);
background-image: url("../img/AM/20180904_094438cropped.jpg");
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100%;
width: 100%;
}
Additionally, I found this reference for you: similar topic on stack overflow
I think it may help. Your code looks just about the same, however the width 100%, is a bit different! Check it out.
I want to know how I can see the 100% of a picture in a header with CSS. The problem is that when I add the image to the header, the image does not resize, so I have to make bigger the header, but I don't want that.
.header{
background-image: url("../IMAGES/myimage.png");
width: 100%;
height: 100px;
}
Basically I want to achieve a header with an image resized, so I will be able to see the full image in a header with the dimensions that I want on the header. I am new in CSS. Feel free to ask any question. Thank you.
how I can see the 100% of a picture in a header with CSS
to see a background image in it's entirety, use
background-size: contain;
.header{
background-image: url("//placehold.it/300x100/cf5");
background-size: contain;
background-repeat: no-repeat; /* add this to not repeat it as pattern */
background-position: 50% 50%; /* center it? */
height: 100px;
}
<div class="header"></div>
than id needed you can additionally play with background-position to set it's position
If you want the image to fill the entire header area without distortions use
background-size: cover;
.header{
background-image: url("//placehold.it/300x100/cf5");
background-size: cover;
background-repeat: no-repeat; /* add this to not repeat it as pattern */
background-position: 50% 50%; /* center it? */
height: 100px;
}
<div class="header"></div>
if you don't care that the image distorts but you want the image to stretch-to-fill than use
background-size: 100% 100%;
.header{
background-image: url("//placehold.it/300x100/cf5");
background-size: 100% 100%;
height: 100px;
}
<div class="header"></div>
Without exactly knowing what you really want to achieve, I think you're trying to do, what the background-size property does.
With background-size: cover; you can force the background image to cover the whole area of the according element (like a div).
Your code example would look like
.header{
background-image: url("../IMAGES/myimage.png");
width: 100%;
height: 100px;
background-size: cover;
}
Just use:
max-width: 100%;
On the css of the image, that will make it be at max, the 100% of the width of the container.
CLARIFICATION
For an image inside the container header, max-width will do the trick. If it's a background image, background-size:contain will maintain the image INSIDE the header, while cover will expand the image to cover the whole header.
.header > img {
max-width: 100%;
height: 200px;
width: 600px;
}
.header2 {
background-image: url("https://source.unsplash.com/random/500x500");
background-size: contain;
background-repeat-x: no-repeat;
height: 200px;
width: 600px;
}
.header3 {
background-image: url("https://source.unsplash.com/random/500x500");
background-size: cover;
background-repeat: no-repeat;
height: 200px;
width: 600px;
}
<div class="header">
This is my header
<img src="https://source.unsplash.com/random/500x500" alt="and this is my image inside it" />
</div>
<div class="header2">
This is my second header with a background contained inside
</div>
<div class="header3">
This is my third header with a background covering it
</div>
I'm trying to set a background image for a page in IONIC 2.
I have tried multiple things.
my Html code**strong text**
<ion-content class="myview" padding class="letsstart">
</ion-content>
**my scss**
.myview {
background-image: url('../../img/letsstart.jpg');
// background-image: url('/img/letsstart.jpg');
// background-image: url('img/letsstart.jpg');
// background-image: url('../img/letsstart.jpg');
// background-image: url('./img/letsstart.jpg');
}
Above mentioned ways are not working..
is something I am missing ??
Try including a variable in ts with your url as value and then use the variable in html.
TS
constructor(){
this.backimg = 'img/letsstart.jpg';
}
HTML
<ion-content class="login-content" style="background-image: url('{{backimg}}')">
</ion-content>
SCSS
.login-content{
width: 100%;
height: auto;
background-repeat: no-repeat;
background-size: 100% 100%;
}
It worked for me. Hope this helps you too.
Don't use background-image:
background-image: url('../../img/letsstart.jpg');
Use background:
background: url('../../img/letsstart.jpg');
To make it work use the following format. This should work for both web and the device.
background-image: url('../img/lola_akinmade_akerstrom-white_reindeer-1605.jpg');
Credit:
https://forum.ionicframework.com/t/css-body-background-image-not-showing/9649/6
Ionic 3.10.1
Include without quotes and the finish into declaration
page-login {
.login-background{
background: no-repeat fixed center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-image: url(/assets/img/background.jpg);
}
}
Result:
Photo by Samuel Fyfe on Unsplash
Anywhere you are, on any level, keep using the path ../assets/your_folder/your-image.*
ion-content {
background: url("../assets/images/city-view_min_resized.jpg") no-repeat center center fixed;
height: 100%;
}
Hope it helps :)
How can i set to a div a background image with a full height (as a cover)?
.index-image-content{
background: ##00aa77;
background-image: url("../images/zenbg-1.png"), url("../images/zenbg-2.png");
background-repeat: repeat-x, repeat;
width:100%;
height:auto;
padding-top:20px;
padding-bottom: 20px;
color:#fff;
}
Thanks in advance !!
Just add those to your class
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;
source
This should work normally
.index-image-content{
background-image: url("../images/zenbg-1.png"), url("../images/zenbg-2.png");
background-repeat: no-repeat;
background-size: cover;
}