I have an iframe that has a background image in a div. The image displays fine with a direct link to the iframe page but when the page is displayed as an iframe (within another page) the image is not visible?
I have checked the code in Firebug and when I hover over the url in the console it just says "failed to load the given URL").
.fd-img{background-image:url('images/fd-img.jpg'); width: 342px; height: 228px; margin: 76px 0 0 205px;}
<div class="fd-img"></div>
For some reason the image displays in the iframe with no problem using an absolute url but not a relative one. I would use absolute but it is not practical at all for what I need to do.
Hope this makes sense.
Not sure why but it appears that AMPPS was the problem. I moved the exact same files to the server and everything worked fine. I was working on my local drive using AMPPS. Nothing has changed server side, I am still using Firefox and the same code so perhaps AMPPS does not like iframes? Hope this helps someone else that is having the same problem.
in css, point url link as if you were in the folder where the .css file is located
iframe's src will point to a page. The src can be set with javascript or however you like, based on event, etc. The <iframe></iframe> itself can't have a background image. You can give it dimensions, ie. width, height, scroll, etc. But content is from a source page.
Related
My image grid on my Wordpress site for some reason does not resize fully to the max-width of the browser when I click an internal link to the homepage (eg. I click on an image then click back on the logo). It goes back to fullscreen when I resize the browser. It also works fine if I go into my website externally (from typing in the url). I have tried using:
#site {
max-width: !important;
}
but doesn't work. I'm not sure if if it is the theme that is the issue or one of my custom css. I have tried isolating some css with the inspector tool and seeing if any of them caused the problem but I couldn't find anything.
Unfortunately I don't have access to the full backend of the theme and I'm not a developer.
So if anyone has any idea that would be great!
Link is http://imconniehuang.com/
Your image gallery's width is calculated and set by Javascript. Have a look at the surrounding div.vc_row, the width is set inline there. So no point in using CSS here. Seems like the script waits for a resize event to recalculate the gallery's width.
The prefix vc_row indicates that you are using Visual Composer. I think the problem is with this plugin. I therefore recommend getting support from the plugin provider-
BTW:
max-width: !important; is not valid syntax. 'max-width' sets the maximum width of an element. You can have a look at the syntax here.
As you can see from the image below, the browser (both Chrome and Firefox) insists on applying width:24px / height 24px for the icon.
However, I have already changed the values on the CSS file. In fact, if you click on the file the browser says the width/height are coming from, the browser inspector itself show the updated values of width:150/height:40, as the image below shows.
So basically the inspector is contradicting itself! I can't solve this clearing the cache.
Any ideas on what is going on? Could it be related to this being a .scss file?
You can check it live here: https://www.chatbotforums.com/ . I am trying to change the size of the Facebook login icon, inside the "Welcome" box.
Your banner is overflowing. You will have to modify the CSS for the box container and then the icon.
Modify width and height style to min-width and min-height.
img {
min-width: 250px;
min-height: 250px;
}
<img src="https://www.google.ca/images/branding/product/ico/googleg_lodp.ico">
Solved it.
For some reason the browser inspector was saying that the width/height were being pulled from the _style.scss file, but that was not the case.
They were being pulled from another file, the standard style.css, so I had to tweak the values there instead.
Strangely this incorrect information appeared on inspectors of both Chrome and Firefox.
Recently I've started dealing with CSS and I am stuck with a "cursor isssue".
I've tried to find a solution online but no succeed.
I have nested an iframe in a parent directory and I wanted to place a customized cursor both in a parent directory and in the iframe itself. The parent dir works fine but there is a problem with the iframe.
As long as the cursor is over a content it's customized according the the code.
But when it moves underneath the text it gets back to the default pointer.
How to make it look customized in a whole iframe not matter if over or not over any kind of content?
The typical CSS underneath:
cursor: url(images/cursor.cur), auto;
I've downloaded a background image for my website, and for some reason or other, it's simply not being displayed.
This is the CSS code I've got:
background-image: url(Resources/Icons/background-image.jpg);
background-attachment: fixed;
I've even tried adding the full path name - to no avail.
The strange thing is that I've done this numerous times in my website, and all my images are displayed. It's only this that's giving me a problem - and there is no red cross showing that it cannot find the image - it just doesn't appear.
EDIT: For some reason, if I place the url of the webage where I got the image from, it works.
Any ideas?
Is your css in the same directory as your image? Probably not, I would assume. So you need to get back to the root and access the image properly.
Something like:
background-image: url(../Resources/Icons/background-image.jpg)
Unless your stylesheet resides in the same folder as you images, you should try navigating from the root:
background-image("/images/someimage.png");
Personally, I've found that navigating from the root of the application/site tends to be the most reliable/scalable option.
Wrong path probably...
background-image: url('/Resources/Icons/background-image.jpg');
In Internet Explorer the background of the webpage moves without the rest of the page's content, I need the background to be fixed with the content, so when I resize it the background doesn't move, like the content inside it, here is the link to the website:
Website Link
This error only appears in Internet Explorer. I have an internet explorer-only stylesheet you can view in the source of the website.
I believe instead of (or in addition to) position: fixed, you can use
background-attachment: fixed;
Hope that helps.