- This topic has 16 replies, 2 voices, and was last updated 6 years, 11 months ago by
.
-
Posts
-
I am trying to add a background image, rather than a color, to the Genesis enews extended plugin. I created a png and uploaded vai ftp to images folder on the server. I can't seem to get it to render though but think this code is correct:
.widget-above-content .enews-widget {
color: #333;
background-image: url('img/enews_background.png'); cover no-repeat;}
Does anyone know what I am missing? I had to guess the png depth but the width is 1200px.
Tnx.
Hi,
try adding
background-color: transparent;
Christoph, many thanks for this!
Well, I've got rid of the color but not achieved an image showing! Not sure if I am missing something else now. I stuck background-color:transparent in two places in fact. Perhaps the image url code is wrong? I googled it and found several version of it. I uploaded the png to the Uploads>images.
Any more thoughts? If you've time! Tnx so much.
.widget-above-content {
background-color: #transparent;
background-image: url('img/enews_background.png'); cover no-repeat;
margin: -20px auto 30px;
padding: 30px 40px;
width: 1200px;
}.widget-above-content .enews-widget {
background-color: #transparent;}
You are welcome.
I'd remove the # in front of transparent.
When you inspect the element (Chrome Inspector or Firefox developer tools) and hover over the link, does it show the image or a message like "Image not found"?
Hi Christoph,
Errm, trying to inspect it but can't see a no show image alert. I do notice that the site containers are way below my image px size.
I created a png 1200 px as that's what the css said. The subscribe box is in fact full width almost. The inspector says:
Div site-container 705px
and:
div. widget-above-content .widget-area 625px
Do you think my image size is wrong then? Hence no show?
Thanks for your continued help!Are you developing locally or can you share a URL?
Developing locally but it's the Glam theme and you'll see the enews widget full across the body on homepage.
Tnx!
Sorry Christoph, I got the wrong theme! It's Tickled Pink by Restored 316 who also does the Glam theme! Trying to find out how to get same view as you in Inspector as not familiar with it so well!
No worries.
Same principle:
http://prntscr.com/aviwe7.widget-above-content { background: transparent url(/faithful/files/2015/07/DSCF9069-2500x800_c.jpg); margin: -20px auto 30px; padding: 30px 40px; width: 1200px; }
OK think i've found it. I am getting this: But I don't seem to see the same tool bar in inspector as you do, Not sure i am opening it right!
Tnx.
.widget-above-content {
background-color: transparent;
background-image: url('img/enews_background.png');
margin: -20px auto 30px;
padding: 30px 40px;
width: 1200px;
}Here's a quick screencast in Firefox. Chrome works almost identical.
http://screencast.com/t/u47EbMCuTry adding a / in front of img
('/img/enews_background.png');
OK, going round in circles on this one and huge thanks for your help Christoph. I've located the place using inspector and if I put a #hex for a color in, it show; if I replace the color hex with image code nothing show!
So this works showing a color in the correct widget area - behind the enews:
/* Widget Above Content
------------------------------------------------------ */.widget-above-content {
background-color: #f87da9;
margin: -20px auto 30px;
padding: 30px 40px;
width: 1200px;
}.widget-above-content .enews-widget {
background-color: transparent;}
But if I replace that #hex with various variation on the css code for placing an image, I get nothing - just white.
So clearly I've identified the correct widget but not sure what to do re the image I wish to replace color with. I made the image 1200px wide and 300px deep. I don't know if my depth guess would have an issue.
Tnx for continued help!
I don't think you need this: `
.widget-above-content .enews-widget {
background-color: transparent;}`
As you see on the screenshots, this code works:
.widget-above-content { background: transparent url(/faithful/files/2015/07/DSCF9069-2500x800_c.jpg); margin: -20px auto 30px; padding: 30px 40px; width: 1200px; }Just in case, make sure the property is background
not background-color when you add the path to the image.Make sure that the path to your image is correct.
If you are using an image on a different website, you have to include the full (URL) path.
I keep on trying it but it won't work! Do you think it's something to do with a wrap code?
widget-above-content .widget-area .wrap
Is that the bit I should be targeting?
I have no way of knowing how big the image size should be. Perhaps my guess image is the wrong width / depth and therefore won't show?
Really appreciate your ongoing help here. I am totally baffled as to why it's not simple! At this rate, it's easier to unhook the current widget, create a new one and style that.
Unless you have done changes to related code, the css works.
I doubt that it has anything to do with the dimensions of the image.
Did you check that you can access the image with the path you are using?
Did you try a different image (from a different URL)?You can always try to add the image to a different element and see if that works, e.g. the footer.
Hi Christoph,
Finally, I've managed to get it done - so huge thanks for all your help and patience! I think it was missing trailing slashes and " ..." !
I can't tell you how helpful you've been. I just hope I'll be in a position before too long - with loads more learning under my belt- to do the same for others in the community!Cheers!
- The topic ‘Custom background image Genesis enews extended’ is closed to new replies.