I'm using XAAMP server for development
I'm trying to crate a parallax effect but the image home_image.png is not accessible from index.css.
I tried both ways from below but none of them are working.
Folder structure screenshot
Added image local path
Network console path trying to load
.img-1{
background-image: url('/healtech/assets/images/home_image.png');
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 500px;
}
.img-2{
background-image: url('../images/home_image.png');
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 500px;
}
<div class="img-1"></div>
<div class="img-2"></div>
I tried to create parallax effect but background image is not accessible from index.css :
I Believe that Your URL address is not correctly linked to the pictures!
You can use a relative path to fix this issue. For Example :
How to use relative/absolute paths in css URLs?
if you are defined this CSS class in your Index.css this will work correctly
background-image: url('../images/home_image.png');
Related
so i have this header-task class but for some reason the background-image wont show up but when i click the url in visual studio code its show me the image from the url. does anyone know what's the problem to my code here? thanks
.header-task{
background-image: url("..\image\nightlandscape.jpg");
background-repeat: no-repeat;
background-size: 100% 200%;
height: 120px;
position: relative;
}
here is the picture of my visual studio code when I click the URL image
I did some digging but personally I do not have the environment to test it out. So you might need to check it for yourself.
Can you please try the below:
.header-task{
background-image: url("static(image/nightlandscape.jpg"));
background-repeat: no-repeat;
background-size: 100% 200%;
height: 120px;
position: relative;
}
If your STATIC_URL is '/static/' (I believe that is in settings.py), this will be rendered as:
.header-task{
background-image: url("/static/image/nightlandscape.jpg");
background-repeat: no-repeat;
background-size: 100% 200%;
height: 120px;
position: relative;
}
Another possibility:
.header-task{
background-image: url('{% static 'nightlandscape.jpg' %}') or url('{% static "/img/nightlandscape.jpg" %}')
background-repeat: no-repeat;
background-size: 100% 200%;
height: 120px;
position: relative;
}
but for that I think you would need to load static files first: {% load static%} in your HTML and then load the stylesheet.
<head>
<style>
{% include "path/to/my_styles.css" %}
</style>
</head>
Possibly simply changing url("..\image\nightlandscape.jpg") to url("../image/nightlandscape.jpg")
It's working for me:
background-image: url( '/static/images/moon.jpg');
Happy coding.
I do have a similar use case, I call the background image in the CSS file as below
.class-name{
background-image: url('../img/img.png');
}
And I have a folder structure which corresponds as:
Static
Css
file.css
Img
img.png
It might be the folder structure that it can't resolve.
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'm trying to set a full-size background image using CSS and here is what my code looks like after reading several blogs, including one topic started here on this website:
html{
background-image: url('C:\Users\sony\Desktop\psddesigns\background.jpeg');
background-repeat: no-repeat;
background-position: center center;
min-height: 100%;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-attachment: fixed;
}
The image still doesn't show up. Its size is 2.4 megabytes. All files are on my pc.
put the css not on the html tag but on the body
body{
margin: 0;
padding: 0;
background-image: url(../images/background/australia_sky.jpg); //this is a relative path change it to your liking
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
use relative url ,eg( url(./psddesigns/background.jpeg) ) or upload it to the internet
Use relative path. Put your HTML file and the image in the same directory and then you can load the image using the relative URL like this:
html {
background-image: url('image-name.jpeg');
There are more you can learn about relative and absolute paths.
http://webdesign.about.com/od/beginningtutorials/a/aa040502a.htm