I'm trying to set a background-image to the entire page.
In the page element, I set a class.
I set the css class to:
background-image: url('res://bg.png');
The file is in my (App_Resources/Android/drawable_nodpi) folder.
But the image is not being set.
If I change the background-image to background-color - it does set the color.
Removing the file extension (*.png) will do the job.
Sample application and it works as expected on my side
Related
I am currently using gatsby for a project and when i put gatsby Img component inside Link component so that it's clickable, the image gets shrinked to its parent component(the link component). i know gatsby fluid Img stretches or shrinks to its parent's width but i want it to show as full image. i tried using fixed instead of fluid but it didn't work and it's even tried specifying width while querying.
code
frontend part
It seems clearly a CSS issue since your <Link> is shrinking to the text (sssssssssss) length.
Debug your .thumbnail class and the component to see what's happening inside. For example, a CSS rules like the following will work but maybe don't fit your design specs:
.thumbnail{
position: relative;
width: 100%;
}
.thumbnail a,
.thumbnail img {
width: 100%;
}
Take a look at the resultant HTML output the adjust your selectors, since gatsby-image wraps the <Img> inside a nested structure, what may affect your CSS rules.
It seems that you are using Bootstrap (hence the w-100) so try adding it to the wrapper (<Link> component),
I'd like to use the theme styles to generate different CI for sub companies of our main company. I would like to insert every sub-companies logo into the top naviagtion bar. The plan was to have a seperate theme style for each sub company and within each style have a custom css code which sets the background image to a referenced static file (or theme file). Unfortunately the custom css code does not seem to evaluate the substitution strings so the images can not be rendered. e.g.
div.t-Header-logo {
background-image: url(#APP_IMAGES#COMPANY1_LOGO.png);
background-repeat: no-repeat;
width: 250px; /*or your image's width*/
height: auto; /*or your image's height*/
margin: 0;
padding: 0;
}
Is there any way to achive different logos per theme style?
Thanks for your support
replace the #WORKSPACE_IMAGES# reference with it's resolved name in the CSS file.
e.g. #WORKSPACE_IMAGES#add.gif becomes-
http://apex.oracle.com/pls/otn/wwv_flow_file_mgr.get_file?p_security_group_id=441224701954687600&p_fname=add.gif
Get the resolved name for your workspace by viewing page source, copy and replace #WORKSPACE_IMAGES# with the same. It will work.
Note: make sure that the image file you have uploaded is not specific to an application.
So I want to make the texts in joomla articles have an individual background images. Let's say I have an ellipsis image (like shown below) and I want every word on that article have the ellipsis image behind their text.
How to do that?
Thanks in advance!
you should work with CSS class and span tags:
Define a new css class with your background-image and add the class to your default .css file or custom file: eg. .ellipsis {background: url(img_flwr.gif; background-repeat: no-repeat)}. Make sure you are using the correct path in your URL
Put span tags around the words and use the class: <span class="ellipsis>word</span>.
This should work.
I'm working on a new website re-design; so far every browser compatibility issue has been resolved no problem - but there's one that remains in IE7.
The client has a dropdown menu from the header which extends over the content, but the problem occurs when the client has a related video on the page as this is often displayed first; the video [being displayed just below the header] pushes the menu behind.
The dropdown is created in CSS using a high z-index value (1000).
JavaScript is used to hide and show the menu by altering the 'visibility' value.
The video uses jPlayer, given the age of IE7 it doesn't use HTML5 to display the video but instead includes a .swf file.
I have tried altering the z-index of the header, jPlayer, etc to the suggestions on this site but had no luck. I have also tried changing the position from absolute to relative but this broke the dropdown.
I have modified the parameter 'wmode' so that it's property is 'transparent', I've also tried 'opaque'.
The only difference I have made so far is adding hours to the work-log.
The page is question can be found here:
http://www.newforest.gov.uk/healthandleisure/
Thanks!
Have you tried an iframe shim? I had a similar experience with the google earth plugin, and adding the shim to the pieces that need to go on top of the swf elements as:
<iframe class="bgi" frameborder="0" scrolling="no" src="about:blank">
<html><head></head><body></body></html>
</iframe>
where bgi is a class that has
height:100%;
width:100%;
z-index:-1;
Hello
I built a website for a graphic design company (www.brgdonline.com) and used the tag. The webpage will not show up at all in Chrome, Firefox, or IE. However, if I remove the doctype completely, it shows up fine. I have validated the website using w3's validator and got no errors. I can see the source code just fine even when it doesn't render.
Thanks so much in advance.
RMS
The div with id #whole has height:100% and overflow:hidden. The height is set to 100% of body which has no height defined and therefore becomes 0. Remove height:100% and overflow:hidden from #whole and I think it will render again.
alternatively give body and html a height:100% so they fill the whole viewport height.