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.
Related
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');
I've got some trouble with my code. At the moment I'm working with HTML and CSS and got some problems with my header-banner-picture. It isn't responsive and I don't know why.
hmtl
<header id="header-banner"></header>
css
#header-banner {
width: 100%;
height: 0;
padding-top: 20.83%;
background:url("../img/header.jpg") no-repeat;
background-size: contain;
}
I'm also open for a JavaScript solution, but I really don't know why it's not working.
I' looking forward to hearing from you,
Fred
<html>
<header id="header-banner"></header>
<style>
#header-banner {
width: 100%;
height: 0;
padding-top: 20.83%;
background: url("../img/header.jpg") no-repeat;
background-size: contain;
}
</style>
</html>
So I am using unsplash for some images for my html page. Whenever I am including the backgground url I am not seeing it in my html page. I am receiving my images from https://unsplash.com/
I am just finding a picture right click copy image url and pasteing it into my body background url but I am not seeing any image background what am I doing wrong?
body {
background: url(https://unsplash.com/?photo=vZlTg_McCDo);
background-size: cover;
}
#content {
text-align: center;
padding-top: 25%;
}
Use background-image: instead of background:
According to their API documentation, your image URL should be of the following syntax
https://source.unsplash.com/{PHOTO ID}/{WIDTHxHEIGHT}
Here is the modified form of the code in your question
body {
background: url(https://source.unsplash.com/vZlTg_McCDo/1600x900);
background-size: cover;
}
#content {
text-align: center;
padding-top: 25%;
}
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 need assistance. I want to update the image URL in below CSS from the controller. I can use LESS and SCSS too. Is there a way?
.background{
height: 100%;
width: 100%;
background: asset-url('ad-rose.jpg', image) no-repeat 0px 40px;
}
This might help http://bonamin.org/blog/2012/03/08/dynamic-css-image-background-in-rails/