I can't figure out why my background images in my absolutely positioned divs aren't displaying. I'm using firefox, but also in Chrome.
Pariticularly odd is that when viewing the page with the web developer toolbar's Edit CSS dialogue open, the images appear.
The images in question are a div with an id of "joel-image" and the nav items.
http://joelglovier.com
The paths in css are relative to the actual css file .. not the html page..
so your path should either be ../img/joel-image.jpg or better /img/joel-image.jpg
Currently your css file is in /css folder, so the background image property of url(img/joel-image.jpg) translates to /css/img/joel-image.jpg which is wrong ..
The request the browser is making to the image, is returning a 404. So the path to your image is wrong. Double check it. Try an absolute path.
Related
I'm very new to Webflow. I am somewhat familiar with CSS and web design concepts.
I downloaded one of the clonable templates to use as a practice:
https://webflow.com/made-in-webflow/website/Spaces-Urbanistic
With this template, I try to replace the logo image on the upper left.
I have a colorful webpage logo and inside the designer, I see all the colors.
When I click on preview, the logo turns into a grayscale image.
Webflow has Effects option that I could enable, but it is currently set to off, for Logo image element as well as all parent nodes up to the body tag.
When I inspect the logo in chrome dev tools, the immediate parent has this CSS:
element.style {
filter: invert(100%)
grayscale(100%)
contrast(128%);
}
My question is, where do those filter parameters are stored in webflow interface, if not under Style->Effects->Filters? Is there any other place I don't yet know about where the above code can be injected?
Thank you,
edit-1: I just noticed this code on top of the main HTML file:
Still, doesn't help me to identify where this code comes from. Thank you,
I can't seem to get the font awesome icons to load properly. The page in question can be found here: http://thelink.biz/AboutUs/
Am I loading the font awesome correctly or is there a conflict with Bootstrap?
You have the correct styling (line-height: 30px in stylesheet.css applying to the icons using .social-links > li a), but the order that you are loading the stylesheets in the page means that it is getting overridden by the default font awesome style. Make sure that you load stylesheet.css after the font awesome css files in your header.
I can see that you placed google analytics code wrogly at the top of the html file. Please place the code at the bottom of the html file & of course inside body tags.
Your <a> tags need some padding to push down the FontAwesome icons.
I was able to add
padding-top:7px
to the <a> and it fixed the centering of the icons.
Using phantom JS 1.9.7 I am having issues printing my webpage to PDF.
Instead of matching the page exactly, background colors and images are stripped, as per:
How can I force browsers to print background images in CSS?
Thanks to a post on another question, here is the answer:
body {
-webkit-print-color-adjust: exact;
}
You can add the CSS style "-webkit-print-color-adjust: exact;" to the element to force print the background color and/or image.
See the documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-print-color-adjust
Odd how this is on MDN.
There is a page with a large number of images. The images are set as a CSS style background looking like this:
<div style="background-image: url("http://test.com/abc123.jpg");">
The page loads, but sometimes, some images are not loaded. The URL is still set, the DIV has the correct size, only the image itself is not displayed. (This may be due to a browser, server or a network problem but that is not important here - we only want to know whether the image is loaded or not).
How can I check that a background image like this has been loaded?
You could get browser log and analyze it for errors https://code.google.com/p/selenium/wiki/JsonWireProtocol#/session/:sessionId/log
Or you could inject some js that will validate such elements https://code.google.com/p/selenium/wiki/JsonWireProtocol#/session/:sessionId/execute
I could not find a way to detect loading of background image, but you could inject hidden img and bind on its 'load' event. But its not very reliable between browsers, see http://api.jquery.com/load-event/
i installed the extension jpCarousel in Typo3 and want to add a slideshow. I changed nothing at the template css file of jpCarousel, but the container is not in the same position like the red div, which also is a div of the extension...
can anyone help me, and tell how i can adjust the galerie to the red div?
thanks!
http://preview-list.lmenges.de/index.php?id=auto
greetings!
Optimize your CSS, for an example width of #content_left causes moving content of right column down. Use some inspector in your browser to make it correctly, for now you have there a quite big mess.