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/
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.
body{
margin: 0 auto;
width: 1000px;
height: 100%;
padding-top:150px;
background: url('images/background.jpg');
background:#5F755D;
}
Okay so, that's the css I'm using and I cannot seem to get the background to change from this ugly colour the background image I want. Any ideas?
You are overwriting the background image, with the color. Change the CSS to this:
body{
margin: 0 auto;
width: 1000px;
height: 100%;
padding-top:150px;
background-color:#5F755D;
background-image: url('images/background.jpg');
}
This way, the color will be shown, if the image cant be found.
You set the background image, and then overwrite by using a color in the next line:
background:#5F755D;
You will see the image (if it exists) if you remove the above line. Note that the image will repeat itself. You can disable it by using
background-repeat: no-repeat;
Just merge your background color and background image like so:
body{
margin: 0 auto;
width: 1000px;
height: 100%;
padding-top:150px;
background:#5F755D url('images/background.jpg') no-repeat;
}
For some reason, background images are not showing up at all in IE11 (Windows 7 Pro).
.home {
position:relative;
height: 620px;
background-image: url(/images/bg_home3.jpg);
background-position: 540px 190px;
background-repeat: no-repeat;
}
Any clues?
If you are trying to set background to HTML5 element there is a chance that it doesn't have some default style in IE11. For example if the element is main try to set display: block to it. You may also try to set width, but without seeing more of your code can't help you more. Look the example below.
.home {
display: block;
width: 100%;
position:relative;
height: 620px;
background-image: url("/images/bg_home3.jpg");
background-position: 540px 190px;
background-repeat: no-repeat;
}
necessary use width: 100px; <= you size px
.home {
position:relative;
height: 620px;
width: 200px;
background-image: url('/images/bg_home3.jpg');
background-position: 540px 190px;
background-repeat: no-repeat;
}
Use a png image as it seems IE 11 cannot display jpg with non web colors.
I think with two easy steps you can eliminate the problem:
Set display: block; The display property specifies the display behavior on your page. IE 8 and upper versions fully supports this property.
Put your url between quotation marks ("").
background-image: url("/images/something.jpg");
I found setting the background size of the image made it display in IE11.
I also had to set the width and height. Setting the value of these attributes to auto it didn't work.
I have the above image
I have to set it in such a way that it covers the entire page. I tried the following code.
margin: 0px;
background: url(../images/common/header/Background_color.png);
background-repeat:repeat-x;
background-attachment:fixed;
background-position:top center;
height: 100%;
width: 100%;
border: 0;
display:inline-block;
background-color: transparent;
But what I get is this.
It is not covering the entire page. At the bottom I am getting the white space.Could anyone help me? Thanks in advance.
Just change this
background: url(../images/common/header/Background_color.png); background-repeat:repeat-x;
To this
background: url(../images/common/header/Background_color.png); background-repeat:repeat;
try this :
background-size: cover;
Here is the css part:
#selectTagId{
background-color: transparent;
color: white;
background-image: url('images/img01.jpg');
background-position: right;
overflow: hidden;
}
The image path is correct. But the image isn't shown. Instead, the background is white? Ughhh how to solve this?
For me, it works with an absolute img path. See http://jsfiddle.net/9qf59/2/
Keep in Mind, that relative paths in css can lead to some odd effects. they are relative to the css file, not the document.
Did you apply this style to a div? if so, you must specify width and height of that div:
#selectTagId{
background-color: transparent;
color: white;
background-image: url('images/img01.jpg');
background-position: right;
overflow: hidden;
width: 200px;
height: 200px;
}