CSS Button background image not displaying
I have tried multiple sources online and ended up putting many things together. I know individually how they work but not sure what I do wrong here.
My CSS looks like this:
.chatButton {
position: fixed;
border: 0;
overflow: hidden;
bottom: 50px;
right: 50px;
border-radius: 50%;
width: 70px;
height: 70px;
box-shadow: 0px 5px 10px #888888;
transition: all ease 0.3s;
background-image: url('https://freeiconshop.com/wp-content/uploads/edd/chat-outline.png') no-repeat center center fixed;
background-size: contain;
background-position: center;
background-color: inherit;
}
.chatButton:hover {background-color: #888888; bottom: 55px;}
.chatButton:active {
box-shadow: 0 3px 0 #888888;
}
And my html like this:
<oj-button class="chatButton" on-oj-action="[[openListener]]">
</oj-button>
I am using oracle jet, but even if I remove oj-button and use a normal button I can't get the background image to show up.
Any ideas?
javascript html css jet
edited Nov 13 '18 at 10:51
Wernfried Domscheit
24k42857
asked Nov 13 '18 at 10:43
VaggourasVaggouras
2315
add a comment |
I have tried multiple sources online and ended up putting many things together. I know individually how they work but not sure what I do wrong here.
My CSS looks like this:
.chatButton {
position: fixed;
border: 0;
overflow: hidden;
bottom: 50px;
right: 50px;
border-radius: 50%;
width: 70px;
height: 70px;
box-shadow: 0px 5px 10px #888888;
transition: all ease 0.3s;
background-image: url('https://freeiconshop.com/wp-content/uploads/edd/chat-outline.png') no-repeat center center fixed;
background-size: contain;
background-position: center;
background-color: inherit;
}
.chatButton:hover {background-color: #888888; bottom: 55px;}
.chatButton:active {
box-shadow: 0 3px 0 #888888;
}
And my html like this:
<oj-button class="chatButton" on-oj-action="[[openListener]]">
</oj-button>
I am using oracle jet, but even if I remove oj-button and use a normal button I can't get the background image to show up.
Any ideas?
javascript html css jet
edited Nov 13 '18 at 10:51
Wernfried Domscheit
24k42857
asked Nov 13 '18 at 10:43
VaggourasVaggouras
2315
that doesn't look like a valid value forbackground-image- it should just have the url. Use thebackgroundshorthand if you're trying to set all those other properties in one declaration. (Also, have you expected in devtools to see if the rule is being applied?)
– Robin Zigmond
Nov 13 '18 at 10:48
1
jsfiddle.net/tLsvh6uk/1 (quick answer) - gonna go in depth in a sec.
– Mike
Nov 13 '18 at 10:49
1
Get rid of everything behind url and set them separately.
– Olayinka O
Nov 13 '18 at 10:51
@Mike this indeed seems to be what I am looking for. I think the issue is on my end then because somehow although in the fiddle it looks fine, in my html/css it does not work i.e. no image shown.
– Vaggouras
Nov 13 '18 at 10:55
@Vaggouras i am not familiar withjetif there could be anything with that. However the css and html part should work after that change.
– Mike
Nov 13 '18 at 11:03
add a comment |
I have tried multiple sources online and ended up putting many things together. I know individually how they work but not sure what I do wrong here.
My CSS looks like this:
.chatButton {
position: fixed;
border: 0;
overflow: hidden;
bottom: 50px;
right: 50px;
border-radius: 50%;
width: 70px;
height: 70px;
box-shadow: 0px 5px 10px #888888;
transition: all ease 0.3s;
background-image: url('https://freeiconshop.com/wp-content/uploads/edd/chat-outline.png') no-repeat center center fixed;
background-size: contain;
background-position: center;
background-color: inherit;
}
.chatButton:hover {background-color: #888888; bottom: 55px;}
.chatButton:active {
box-shadow: 0 3px 0 #888888;
}
And my html like this:
<oj-button class="chatButton" on-oj-action="[[openListener]]">
</oj-button>
I am using oracle jet, but even if I remove oj-button and use a normal button I can't get the background image to show up.
Any ideas?
javascript html css jet
edited Nov 13 '18 at 10:51
Wernfried Domscheit
24k42857
asked Nov 13 '18 at 10:43
VaggourasVaggouras
2315
I have tried multiple sources online and ended up putting many things together. I know individually how they work but not sure what I do wrong here.
My CSS looks like this:
.chatButton {
position: fixed;
border: 0;
overflow: hidden;
bottom: 50px;
right: 50px;
border-radius: 50%;
width: 70px;
height: 70px;
box-shadow: 0px 5px 10px #888888;
transition: all ease 0.3s;
background-image: url('https://freeiconshop.com/wp-content/uploads/edd/chat-outline.png') no-repeat center center fixed;
background-size: contain;
background-position: center;
background-color: inherit;
}
.chatButton:hover {background-color: #888888; bottom: 55px;}
.chatButton:active {
box-shadow: 0 3px 0 #888888;
}
And my html like this:
<oj-button class="chatButton" on-oj-action="[[openListener]]">
</oj-button>
I am using oracle jet, but even if I remove oj-button and use a normal button I can't get the background image to show up.
Any ideas?
javascript html css jet
javascript html css jet
edited Nov 13 '18 at 10:51
Wernfried Domscheit
24k42857
asked Nov 13 '18 at 10:43
VaggourasVaggouras
2315
edited Nov 13 '18 at 10:51
Wernfried Domscheit
24k42857
asked Nov 13 '18 at 10:43
VaggourasVaggouras
2315
edited Nov 13 '18 at 10:51
Wernfried Domscheit
24k42857
edited Nov 13 '18 at 10:51
Wernfried Domscheit
24k42857
edited Nov 13 '18 at 10:51
Wernfried Domscheit
24k42857
24k42857
asked Nov 13 '18 at 10:43
VaggourasVaggouras
2315
asked Nov 13 '18 at 10:43
VaggourasVaggouras
2315
asked Nov 13 '18 at 10:43
VaggourasVaggouras
2315
2315
that doesn't look like a valid value forbackground-image- it should just have the url. Use thebackgroundshorthand if you're trying to set all those other properties in one declaration. (Also, have you expected in devtools to see if the rule is being applied?)
– Robin Zigmond
Nov 13 '18 at 10:48
1
jsfiddle.net/tLsvh6uk/1 (quick answer) - gonna go in depth in a sec.
– Mike
Nov 13 '18 at 10:49
1
Get rid of everything behind url and set them separately.
– Olayinka O
Nov 13 '18 at 10:51
@Mike this indeed seems to be what I am looking for. I think the issue is on my end then because somehow although in the fiddle it looks fine, in my html/css it does not work i.e. no image shown.
– Vaggouras
Nov 13 '18 at 10:55
@Vaggouras i am not familiar withjetif there could be anything with that. However the css and html part should work after that change.
– Mike
Nov 13 '18 at 11:03
add a comment |
that doesn't look like a valid value forbackground-image- it should just have the url. Use thebackgroundshorthand if you're trying to set all those other properties in one declaration. (Also, have you expected in devtools to see if the rule is being applied?)
– Robin Zigmond
Nov 13 '18 at 10:48
1
jsfiddle.net/tLsvh6uk/1 (quick answer) - gonna go in depth in a sec.
– Mike
Nov 13 '18 at 10:49
1
Get rid of everything behind url and set them separately.
– Olayinka O
Nov 13 '18 at 10:51
@Mike this indeed seems to be what I am looking for. I think the issue is on my end then because somehow although in the fiddle it looks fine, in my html/css it does not work i.e. no image shown.
– Vaggouras
Nov 13 '18 at 10:55
@Vaggouras i am not familiar withjetif there could be anything with that. However the css and html part should work after that change.
– Mike
Nov 13 '18 at 11:03
that doesn't look like a valid value for
background-image - it should just have the url. Use the background shorthand if you're trying to set all those other properties in one declaration. (Also, have you expected in devtools to see if the rule is being applied?)– Robin Zigmond
Nov 13 '18 at 10:48
that doesn't look like a valid value for
background-image - it should just have the url. Use the background shorthand if you're trying to set all those other properties in one declaration. (Also, have you expected in devtools to see if the rule is being applied?)– Robin Zigmond
Nov 13 '18 at 10:48
1
1
jsfiddle.net/tLsvh6uk/1 (quick answer) - gonna go in depth in a sec.
– Mike
Nov 13 '18 at 10:49
jsfiddle.net/tLsvh6uk/1 (quick answer) - gonna go in depth in a sec.
– Mike
Nov 13 '18 at 10:49
1
1
Get rid of everything behind url and set them separately.
– Olayinka O
Nov 13 '18 at 10:51
Get rid of everything behind url and set them separately.
– Olayinka O
Nov 13 '18 at 10:51
@Mike this indeed seems to be what I am looking for. I think the issue is on my end then because somehow although in the fiddle it looks fine, in my html/css it does not work i.e. no image shown.
– Vaggouras
Nov 13 '18 at 10:55
@Mike this indeed seems to be what I am looking for. I think the issue is on my end then because somehow although in the fiddle it looks fine, in my html/css it does not work i.e. no image shown.
– Vaggouras
Nov 13 '18 at 10:55
@Vaggouras i am not familiar with
jet if there could be anything with that. However the css and html part should work after that change.– Mike
Nov 13 '18 at 11:03
@Vaggouras i am not familiar with
jet if there could be anything with that. However the css and html part should work after that change.– Mike
Nov 13 '18 at 11:03
add a comment |
2 Answers
2
active
oldest
votes
So i'm new to oracle jet but here is something i found:
There is some issues with using the background-image properties.
Here is some Examples from oracle:
I found a fiddle with an example where oracle jet is used.
As you can see i added your button and the css. There i had the same issues with no image. Even after the css changes as listed in the comments.
With the changes from the oracle example i added a span inside the button and added this css:
.chatButton span{
height:60%;
content: url('https://freeiconshop.com/wp-content/uploads/edd/chat-outline.png');
}
fiddle
answered Nov 13 '18 at 10:55
MikeMike
524524
Great result. Still on my end I can't render it but I will need to find out why. Perhaps the ojet setup or something. Thanks though I will use it like that in terms of css code
– Vaggouras
Nov 13 '18 at 11:04
1
@Vaggouras i have edited my answer..
– Mike
Nov 13 '18 at 11:42
Worked!! Can't thank you enough mate! :) wish I could upvote 124 times
– Vaggouras
Nov 15 '18 at 10:55
Glad it worked for you :-) If it answers your question you should mark it as such.
– Mike
Nov 15 '18 at 11:16
add a comment |
if you want to set all the properties of the background in one line you should use background, not background-image.
background: url('https://freeiconshop.com/wp-content/uploads/edd/chat-outline.png') no-repeat center center fixed;
answered Nov 13 '18 at 10:55
Viktor MakoedViktor Makoed
113
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53279226%2fcss-button-background-image-not-displaying%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
So i'm new to oracle jet but here is something i found:
There is some issues with using the background-image properties.
Here is some Examples from oracle:
I found a fiddle with an example where oracle jet is used.
As you can see i added your button and the css. There i had the same issues with no image. Even after the css changes as listed in the comments.
With the changes from the oracle example i added a span inside the button and added this css:
.chatButton span{
height:60%;
content: url('https://freeiconshop.com/wp-content/uploads/edd/chat-outline.png');
}
fiddle
answered Nov 13 '18 at 10:55
MikeMike
524524
Great result. Still on my end I can't render it but I will need to find out why. Perhaps the ojet setup or something. Thanks though I will use it like that in terms of css code
– Vaggouras
Nov 13 '18 at 11:04
1
@Vaggouras i have edited my answer..
– Mike
Nov 13 '18 at 11:42
Worked!! Can't thank you enough mate! :) wish I could upvote 124 times
– Vaggouras
Nov 15 '18 at 10:55
Glad it worked for you :-) If it answers your question you should mark it as such.
– Mike
Nov 15 '18 at 11:16
add a comment |
So i'm new to oracle jet but here is something i found:
There is some issues with using the background-image properties.
Here is some Examples from oracle:
I found a fiddle with an example where oracle jet is used.
As you can see i added your button and the css. There i had the same issues with no image. Even after the css changes as listed in the comments.
With the changes from the oracle example i added a span inside the button and added this css:
.chatButton span{
height:60%;
content: url('https://freeiconshop.com/wp-content/uploads/edd/chat-outline.png');
}
fiddle
answered Nov 13 '18 at 10:55
MikeMike
524524
Great result. Still on my end I can't render it but I will need to find out why. Perhaps the ojet setup or something. Thanks though I will use it like that in terms of css code
– Vaggouras
Nov 13 '18 at 11:04
1
@Vaggouras i have edited my answer..
– Mike
Nov 13 '18 at 11:42
Worked!! Can't thank you enough mate! :) wish I could upvote 124 times
– Vaggouras
Nov 15 '18 at 10:55
Glad it worked for you :-) If it answers your question you should mark it as such.
– Mike
Nov 15 '18 at 11:16
add a comment |
So i'm new to oracle jet but here is something i found:
There is some issues with using the background-image properties.
Here is some Examples from oracle:
I found a fiddle with an example where oracle jet is used.
As you can see i added your button and the css. There i had the same issues with no image. Even after the css changes as listed in the comments.
With the changes from the oracle example i added a span inside the button and added this css:
.chatButton span{
height:60%;
content: url('https://freeiconshop.com/wp-content/uploads/edd/chat-outline.png');
}
fiddle
answered Nov 13 '18 at 10:55
MikeMike
524524
So i'm new to oracle jet but here is something i found:
There is some issues with using the background-image properties.
Here is some Examples from oracle:
I found a fiddle with an example where oracle jet is used.
As you can see i added your button and the css. There i had the same issues with no image. Even after the css changes as listed in the comments.
With the changes from the oracle example i added a span inside the button and added this css:
.chatButton span{
height:60%;
content: url('https://freeiconshop.com/wp-content/uploads/edd/chat-outline.png');
}
fiddle
answered Nov 13 '18 at 10:55
MikeMike
524524
edited Nov 13 '18 at 11:42
answered Nov 13 '18 at 10:55
MikeMike
524524
answered Nov 13 '18 at 10:55
MikeMike
524524
answered Nov 13 '18 at 10:55
MikeMike
524524
524524
Great result. Still on my end I can't render it but I will need to find out why. Perhaps the ojet setup or something. Thanks though I will use it like that in terms of css code
– Vaggouras
Nov 13 '18 at 11:04
1
@Vaggouras i have edited my answer..
– Mike
Nov 13 '18 at 11:42
Worked!! Can't thank you enough mate! :) wish I could upvote 124 times
– Vaggouras
Nov 15 '18 at 10:55
Glad it worked for you :-) If it answers your question you should mark it as such.
– Mike
Nov 15 '18 at 11:16
add a comment |
Great result. Still on my end I can't render it but I will need to find out why. Perhaps the ojet setup or something. Thanks though I will use it like that in terms of css code
– Vaggouras
Nov 13 '18 at 11:04
1
@Vaggouras i have edited my answer..
– Mike
Nov 13 '18 at 11:42
Worked!! Can't thank you enough mate! :) wish I could upvote 124 times
– Vaggouras
Nov 15 '18 at 10:55
Glad it worked for you :-) If it answers your question you should mark it as such.
– Mike
Nov 15 '18 at 11:16
Great result. Still on my end I can't render it but I will need to find out why. Perhaps the ojet setup or something. Thanks though I will use it like that in terms of css code
– Vaggouras
Nov 13 '18 at 11:04
Great result. Still on my end I can't render it but I will need to find out why. Perhaps the ojet setup or something. Thanks though I will use it like that in terms of css code
– Vaggouras
Nov 13 '18 at 11:04
1
1
@Vaggouras i have edited my answer..
– Mike
Nov 13 '18 at 11:42
@Vaggouras i have edited my answer..
– Mike
Nov 13 '18 at 11:42
Worked!! Can't thank you enough mate! :) wish I could upvote 124 times
– Vaggouras
Nov 15 '18 at 10:55
Worked!! Can't thank you enough mate! :) wish I could upvote 124 times
– Vaggouras
Nov 15 '18 at 10:55
Glad it worked for you :-) If it answers your question you should mark it as such.
– Mike
Nov 15 '18 at 11:16
Glad it worked for you :-) If it answers your question you should mark it as such.
– Mike
Nov 15 '18 at 11:16
add a comment |
if you want to set all the properties of the background in one line you should use background, not background-image.
background: url('https://freeiconshop.com/wp-content/uploads/edd/chat-outline.png') no-repeat center center fixed;
answered Nov 13 '18 at 10:55
Viktor MakoedViktor Makoed
113
add a comment |
if you want to set all the properties of the background in one line you should use background, not background-image.
background: url('https://freeiconshop.com/wp-content/uploads/edd/chat-outline.png') no-repeat center center fixed;
answered Nov 13 '18 at 10:55
Viktor MakoedViktor Makoed
113
add a comment |
if you want to set all the properties of the background in one line you should use background, not background-image.
background: url('https://freeiconshop.com/wp-content/uploads/edd/chat-outline.png') no-repeat center center fixed;
answered Nov 13 '18 at 10:55
Viktor MakoedViktor Makoed
113
if you want to set all the properties of the background in one line you should use background, not background-image.
background: url('https://freeiconshop.com/wp-content/uploads/edd/chat-outline.png') no-repeat center center fixed;
answered Nov 13 '18 at 10:55
Viktor MakoedViktor Makoed
113
answered Nov 13 '18 at 10:55
Viktor MakoedViktor Makoed
113
answered Nov 13 '18 at 10:55
Viktor MakoedViktor Makoed
113
answered Nov 13 '18 at 10:55
Viktor MakoedViktor Makoed
113
113
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53279226%2fcss-button-background-image-not-displaying%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
that doesn't look like a valid value for
background-image- it should just have the url. Use thebackgroundshorthand if you're trying to set all those other properties in one declaration. (Also, have you expected in devtools to see if the rule is being applied?)– Robin Zigmond
Nov 13 '18 at 10:48
1
jsfiddle.net/tLsvh6uk/1 (quick answer) - gonna go in depth in a sec.
– Mike
Nov 13 '18 at 10:49
1
Get rid of everything behind url and set them separately.
– Olayinka O
Nov 13 '18 at 10:51
@Mike this indeed seems to be what I am looking for. I think the issue is on my end then because somehow although in the fiddle it looks fine, in my html/css it does not work i.e. no image shown.
– Vaggouras
Nov 13 '18 at 10:55
@Vaggouras i am not familiar with
jetif there could be anything with that. However the css and html part should work after that change.– Mike
Nov 13 '18 at 11:03